Explore the community Forums Lectora Lectora Questions & Answers Smaller Graphics in the Menue

Tagged: 

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #302371 Score: 0
    Profile photo of Reiner Fuest
    Reiner Fuest
    Member
    beginner
    intermediate
    contributor
    @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

    #302372 Score: 0
    Profile photo of Darrel Somoza
    Darrel Somoza
    Member
    contributor
    friend finder
    beginner
    intermediate
    junior moderator
    advanced
    wise owl
    curious george
    profile
    209 pts
    @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

    #302375 Score: 0
    Profile photo of Reiner Fuest
    Reiner Fuest
    Member
    beginner
    intermediate
    contributor
    @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?

    #302376 Score: 0
    Profile photo of Darrel Somoza
    Darrel Somoza
    Member
    contributor
    friend finder
    beginner
    intermediate
    junior moderator
    advanced
    wise owl
    curious george
    profile
    209 pts
    @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.

    #302381 Score: 0
    Profile photo of Reiner Fuest
    Reiner Fuest
    Member
    beginner
    intermediate
    contributor
    @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.

    #302389 Score: 0
    Profile photo of Reiner Fuest
    Reiner Fuest
    Member
    beginner
    intermediate
    contributor
    @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!

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.