VR Course Contest
Show us your best virtual reality course and win $50 gift card and a winner badge!
CHECK IT OUT
Smaller Graphics in the Menue

rfuest6134
Community Member Posts: 43
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
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
0
Comments
-
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.
Darrel0 -
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{
works for:
width:4px !important;
height:4px !important;
}
But Lectora (sadly) produces:
This can only overridden by:img{
or
width:4px !important;
height:4px !important;
}tr>td>img{
Why the complete child path is not working?
width:4px !important;
height:4px !important;
}0 -
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.0
-
Oh, it's just the HTML code, the images are just dummies.
I will do some more testing and provide some more information later.0 -
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 */
At the end, I am not shure, if we will use this hack in our modules.
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;
}
Thank you, Darrel, for your hint and encouraging me to learn something about css selectors!0
Categories
- 4.4K All Categories
- 35 ✫ Announcements
- 6 ✪ Contests
- 34.1K eLearning Brothers® Products
- 102 Lectora®
- 1.1K Lectora Discussions
- 1.9K Lectora Feature Requests
- 53 Lectora User Groups
- 2 AssetLibrary™
- AssetLibrary Discussions
- 2 AssetLibrary Feature Requests
- 69 CenarioVR®
- 111 CenarioVR Discussions
- 78 CenarioVR Feature Requests
- 2 Rockstar Learning Platform®
- 1 Rockstar Learning Platform Discussions
- 1 Rockstar Learning Platform Feature Requests
- 4 Off-the-Shelf Course Library
- 3 Off-the-Shelf Course Library Discussions
- 1 Off-the-Shelf Course Library Feature Requests
- 1 CourseMill®
- 101 CourseMill Discussions
- ReviewLink®
- 21 ReviewLink Discussions
- 12 ReviewLink Suggestions
- 1 The Training Arcade®
- 1 The Training Arcade Discussions
- The Training Arcade Feature Requests
- 7 Additional Learning Products
- 2 Adobe®
- 2 Articulate®
- 1 Camtasia®
- Docebo®
- 1 iSpring®
- 1 Microsoft® PowerPoint®
- 293 All Things eLearning
- 3 Course Development Showcase
- 1 eLearning Brothers® Downloads
- 1 Compliance Training
- 5 eLearning Development
- eLearning Game Design
- 7 Instructional Design
- 266 Learning Management System (LMS) Integration
- 2 Mobile Learning
- 2 Visual Design
- 319 Web Accessibility
- 579 ♪ The Green Room
- 3 ♡ Community Feedback
- 6 Community Tips