Hi guys!
I am using the Side Navigation skin for our online help. I am finding the skin editor a bit limiting, but I do not have great html skills. I have two wishes:
1. I would really link to add different icons to some of the menu items on the top level as some of these describe tools and it would be great to have the tool icon next to the tool name. I was hoping I could open the TOC file in a text editor and add a link to an image, but how would I phrase it?
2. I would like to add divider lines so I can group the items, so I can make a section with e.g. tools and a section with e.g. actions in the TOC. Alternatively have different background colors to make this division. As far as I can see, I can give different levels different colors, but not items on the same level. Again I was hoping I could open the TOC and add something?
Looking forward to your great ideas and suggestions!
-Vibeke
Adding images in SideNav menu
Re: Adding images in SideNav menu
The HTML5 skin does not directly support either adding dividers or icons (for individual items).
You can do it, but it requires a bit of work, and some basic CSS knowledge.
This LinkedIn post describes how to add dividers:
https://www.linkedin.com/pulse/how-i-co ... itte-gagne
You can add icons using a similar method to the way you add a divider. First you would set up a TOC style class, one class for each different icon. Then you'd style the class to include the icon - I'd suggest using :before with your style class to insert the icon.
You can do it, but it requires a bit of work, and some basic CSS knowledge.
This LinkedIn post describes how to add dividers:
https://www.linkedin.com/pulse/how-i-co ... itte-gagne
You can add icons using a similar method to the way you add a divider. First you would set up a TOC style class, one class for each different icon. Then you'd style the class to include the icon - I'd suggest using :before with your style class to insert the icon.
Re: Adding images in SideNav menu
I did a similar thing to our Flare project for better visual navigation in line with icon themes. Try adding the following to your main stylesheet and include some small 30 x 30 pixel icons for each Level 1 TOC entry.Vibeke B wrote:...
Code: Select all
ul.sidenav > li.is-accordion-submenu-parent > a
{
padding-right: 0;
min-width: 200px;
}
ul.sidenav > li.is-accordion-submenu-parent:nth-child(1) > a::before
{
content: url('../Images/TOC/toc_1.png');
position: relative;
left: -28px;
}
ul.sidenav > li.is-accordion-submenu-parent:nth-child(2) > a::before
{
content: url('../Images/TOC/toc_2.png');
position: relative;
left: -28px;
}
ul.sidenav > li.is-accordion-submenu-parent:nth-child(3) > a::before
{
content: url('../Images/TOC/toc_3.png');
position: relative;
left: -28px;
}
ul.sidenav > li.is-accordion-submenu-parent:nth-child(4) > a::before
{
content: url('../Images/TOC/toc_4.png');
position: relative;
left: -28px;
}
ul.sidenav > li.is-accordion-submenu-parent:nth-child(5) > a::before
{
content: url('../Images/TOC/toc_5.png');
position: relative;
left: -28px;
}
Re: Adding images in SideNav menu
Hi Dave,
Thanks for the link. I did experiment with this and I can certainly use it for separators. I found it more challenging to use for the icons. However, I did find a solution somewhere else in this forum, the topic "Span tags in menu proxies".
viewtopic.php?f=6&t=29402&p=136457&hili ... 67#p136457
Thanks again for a great forum, you are very good at what you do. Thanks for sharing!
-Vibeke
Thanks for the link. I did experiment with this and I can certainly use it for separators. I found it more challenging to use for the icons. However, I did find a solution somewhere else in this forum, the topic "Span tags in menu proxies".
viewtopic.php?f=6&t=29402&p=136457&hili ... 67#p136457
Thanks again for a great forum, you are very good at what you do. Thanks for sharing!
-Vibeke
Re: Adding images in SideNav menu
Yep, that's what I was suggesting for the icons - using a :before to add the icon to the TOC style class.
I'd seen that post before but couldn't find it!
I'd seen that post before but couldn't find it!
Re: Adding images in SideNav menu
Thanks OzScott,
I actually got it to work using this code for the map icon:
.mapicon a::before {
content: "";
display: block;
background: url('../Images/AppIcons/SVG/maps.svg') no-repeat;
width: 20px;
height: 20px;
float: left;
margin: 0 6px 0 0;
}
Then I add the class to the TocEntry in the TOC using a text editor. The only problem I have now is that the class carries on to the next level in my TOC, which is not what I want. How do I get it to stop after just one level? It looks like the TocEntry doesn't really end. Do I create a new class for the next level to "neutralize" the change?
<TocEntry
Title="[%=System.LinkedTitle%]"
BreakType="chapter"
StartSection="false"
PageNumberReset="continue"
SectionNumberReset="continue"
VolumeNumberReset="same"
ChapterNumberReset="continue"
PageLayout="../../Content/Resources/PageLayouts/PrintLayout.flpgl"
Link="/Content/Topics/COP/Map/Maps_Intro_New.htm"
Class="mapicon">
Like I said, my CSS and html skills are very beginners level, but I am learning every day.
-Vibeke
I actually got it to work using this code for the map icon:
.mapicon a::before {
content: "";
display: block;
background: url('../Images/AppIcons/SVG/maps.svg') no-repeat;
width: 20px;
height: 20px;
float: left;
margin: 0 6px 0 0;
}
Then I add the class to the TocEntry in the TOC using a text editor. The only problem I have now is that the class carries on to the next level in my TOC, which is not what I want. How do I get it to stop after just one level? It looks like the TocEntry doesn't really end. Do I create a new class for the next level to "neutralize" the change?
<TocEntry
Title="[%=System.LinkedTitle%]"
BreakType="chapter"
StartSection="false"
PageNumberReset="continue"
SectionNumberReset="continue"
VolumeNumberReset="same"
ChapterNumberReset="continue"
PageLayout="../../Content/Resources/PageLayouts/PrintLayout.flpgl"
Link="/Content/Topics/COP/Map/Maps_Intro_New.htm"
Class="mapicon">
Like I said, my CSS and html skills are very beginners level, but I am learning every day.
-Vibeke
Re: Adding images in SideNav menu
That's because .mapicon a::before means you're selecting every a tag inside .mapicon, so it selects all the links at lower levels in the menu.
Assuming .mapicon is the class on the parent li tag, then use:
That means only select the a tag that is the direct child of .mapicon.
CSS selectors reference: https://www.w3schools.com/cssref/css_selectors.asp
Assuming .mapicon is the class on the parent li tag, then use:
Code: Select all
.mapicon > a::before {
CSS selectors reference: https://www.w3schools.com/cssref/css_selectors.asp
Re: Adding images in SideNav menu
Thank you so much, Dave. It looks great now!
-
- Propeller Head
- Posts: 86
- Joined: Tue Jun 04, 2013 9:49 am
- Location: Arkansas, U.S.A.
Re: Adding images in SideNav menu
@Vibeke, I never thought to edit the TOC at the code level like this. I'm always hesitant to change Flare's code. I will try this as a test though. Thanks to you and Dave for sharing!
Jim
Jim