Smaller Graphics in the Menue

rfuest6134

Is there a way to use smaller than 16px images in the menue to show the status ("status indicator image" for "completed, "in progress" or "not started")?

It is not a question about the visual experience (smaller content on a transparent background would help here), we just need place to show all entries of the menue. Therefore a small vertical bar would be enough for us.

The generated code shows for the correspondig div with=16 and for the image width and hight=16. Using CSS to manipulate seems difficult (the image ids are dynamic and for every menue item different). Or is there a solution around the corner?

Any help appreciated.

Reiner

klaatu

Can you attach a sample of your project with the status indicator? I need to see the code. You might be able to use a "Starts with" or "Ends with" selector to target the dynamically names ID's and then style them how you need with CSS. See my post in the question "Change font of standard message window" from November 18th to see how I used the selector to target the dynamically named Modals.

Darrel

rfuest6134

Your solutions souds very interesting.

At the moment the problem looks like this:

Working with css childs the following works for images without attributes for width and height:

.menu-img>div>table>tr>td>img{
width:4px !important;
height:4px !important;
}

works for:

But Lectora (sadly) produces:

This can only overridden by:

img{
width:4px !important;
height:4px !important;
}

or

tr>td>img{
width:4px !important;
height:4px !important;
}

Why the complete child path is not working?

klaatu

For some reason the images are not displaying in your post. It would be easier for me to try to help you troubleshoot if I had a sample that I can work off of. You can private message me if you'd prefer and I will take a look.

rfuest6134

Oh, it's just the HTML code, the images are just dummies.

I will do some more testing and provide some more information later.

rfuest6134

The following seems to work (I used descendent selectors, not child selectors), but there are some coloring issues.

/* make the images in the menu with class menue smaller */
div.menue img {
width:4px !important;
height:4px !important;
}

/* size down the souurounding div */
div.menue div {
width:4px !important;
}

/* size down the sourrounding td */
div.menue td[width="20px"] {
width:8px !important;
}

At the end, I am not shure, if we will use this hack in our modules.

Thank you, Darrel, for your hint and encouraging me to learn something about css selectors!