Adding images in SideNav menu

This forum is for all Flare issues related to the HTML5, WebHelp, WebHelp Plus, and Adobe Air Targets

Adding images in SideNav menu

Postby Vibeke B on Tue Jan 14, 2020 7:16 am

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
Vibeke B
Propeller Head
 
Posts: 50
Joined: Thu Mar 15, 2018 7:14 am
Location: Denmark

Re: Adding images in SideNav menu

Postby Dave Lee on Tue Jan 14, 2020 7:48 am

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.
Dave Lee
Master Propellus Maximus
 
Posts: 5790
Joined: Mon Mar 05, 2007 8:33 am
Location: UK

Re: Adding images in SideNav menu

Postby OZScott on Tue Jan 14, 2020 9:50 pm

Vibeke B wrote:...


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.

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;
}
OZScott
Jr. Propeller Head
 
Posts: 8
Joined: Sun Apr 07, 2019 4:58 pm

Re: Adding images in SideNav menu

Postby Vibeke B on Wed Jan 15, 2020 7:26 am

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&hilit=tocentry&sid=dc1f1a165233e7d5586445fa11757767#p136457

Thanks again for a great forum, you are very good at what you do. Thanks for sharing!

-Vibeke
Vibeke B
Propeller Head
 
Posts: 50
Joined: Thu Mar 15, 2018 7:14 am
Location: Denmark

Re: Adding images in SideNav menu

Postby Dave Lee on Wed Jan 15, 2020 11:58 am

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!
Dave Lee
Master Propellus Maximus
 
Posts: 5790
Joined: Mon Mar 05, 2007 8:33 am
Location: UK

Re: Adding images in SideNav menu

Postby Vibeke B on Thu Jan 16, 2020 1:16 am

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
Vibeke B
Propeller Head
 
Posts: 50
Joined: Thu Mar 15, 2018 7:14 am
Location: Denmark

Re: Adding images in SideNav menu

Postby Dave Lee on Thu Jan 16, 2020 1:28 am

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:
Code: Select all
.mapicon > a::before {

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
Dave Lee
Master Propellus Maximus
 
Posts: 5790
Joined: Mon Mar 05, 2007 8:33 am
Location: UK

Re: Adding images in SideNav menu

Postby Vibeke B on Thu Jan 16, 2020 3:36 am

Thank you so much, Dave. It looks great now! :D
Vibeke B
Propeller Head
 
Posts: 50
Joined: Thu Mar 15, 2018 7:14 am
Location: Denmark


Return to Web-based Outputs

Who is online

Users browsing this forum: No registered users and 5 guests