Adding images in SideNav menu

This forum is for all Flare issues related to the HTML5, WebHelp, WebHelp Plus, and Adobe Air Targets
Post Reply
Vibeke B
Propeller Head
Posts: 73
Joined: Thu Mar 15, 2018 7:14 am
Location: Denmark

Adding images in SideNav menu

Post by Vibeke B »

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
NorthEast
Master Propellus Maximus
Posts: 6359
Joined: Mon Mar 05, 2007 8:33 am

Re: Adding images in SideNav menu

Post by NorthEast »

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

Re: Adding images in SideNav menu

Post by OZScott »

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

Re: Adding images in SideNav menu

Post by Vibeke B »

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
NorthEast
Master Propellus Maximus
Posts: 6359
Joined: Mon Mar 05, 2007 8:33 am

Re: Adding images in SideNav menu

Post by NorthEast »

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

Re: Adding images in SideNav menu

Post by Vibeke B »

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
NorthEast
Master Propellus Maximus
Posts: 6359
Joined: Mon Mar 05, 2007 8:33 am

Re: Adding images in SideNav menu

Post by NorthEast »

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

Re: Adding images in SideNav menu

Post by Vibeke B »

Thank you so much, Dave. It looks great now! :D
jimgilliam
Propeller Head
Posts: 81
Joined: Tue Jun 04, 2013 9:49 am
Location: Arkansas, U.S.A.

Re: Adding images in SideNav menu

Post by jimgilliam »

@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
:flare:
Post Reply