Smaller Graphics in the Menue

rfuest6134
rfuest6134 Community Member Posts: 43
in Lectora Desktop
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

Comments

  • klaatu
    klaatu Community Member Posts: 988
    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
    rfuest6134 Community Member Posts: 43
    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:
    image
    But Lectora (sadly) produces:
    image
    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
    klaatu Community Member Posts: 988
    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
    rfuest6134 Community Member Posts: 43
    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
    rfuest6134 Community Member Posts: 43
    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!

Categories