How to change expander icon in top nav menu

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

How to change expander icon in top nav menu

Postby aevansb on Thu Jan 10, 2019 12:26 pm

I'd like to change the expander icon (not sure the official term) in the top nav menu, but I can't figure out where to do it. Does anyone know?

expander_icon.png
You do not have the required permissions to view the files attached to this post.
Adam Evans in Chicago
Sr Technical Documentation Manager at Strata Decision Technology
aevansb
Jr. Propeller Head
 
Posts: 9
Joined: Tue Mar 11, 2014 12:50 pm

Re: How to change expander icon in top nav menu

Postby DaveMags on Sat Jan 12, 2019 10:45 pm

I don't see where you can set this in the skin file, but you can do it with CSS. Add this to your main CSS file:

Code: Select all
ul.navigation ul > li.has-children > a::after
{
    content: somethinghere;
}

Then, you're going to replace somethinghere with whatever you want to appear in that spot. You have a couple of options at this point. I assume you probably want another icon, so If you have an image you want to use, you can reference it like this:

Code: Select all
content: url('../Images/somefolder/anotherolder/imagefiename.png');

You can also use an icon code (I do this in my top nav site on these menus). Check out https://brajeshwar.github.io/entities/ for a good list of options for that icon. On that site, you'll want to use the code in the CSS (ISO) column. In that case, you'll place that icon code in quotes in that content style, like this for example:

Code: Select all
content: "\25b6";

You can also then add font-size, color, etc. styles to that same element to style the icon. \25b6 in my example is a solid right-pointing triangle, and comes out looking like this:

menuicon.png


Hope this helps :)
You do not have the required permissions to view the files attached to this post.
DaveMags
Propeller Head
 
Posts: 24
Joined: Fri Mar 23, 2018 5:53 am
Location: Florida

Re: How to change expander icon in top nav menu

Postby aevansb on Tue Jan 15, 2019 11:12 am

Thanks so much! It worked! Very helpful.
Adam Evans in Chicago
Sr Technical Documentation Manager at Strata Decision Technology
aevansb
Jr. Propeller Head
 
Posts: 9
Joined: Tue Mar 11, 2014 12:50 pm

Re: How to change expander icon in top nav menu

Postby vkitcen on Fri Jan 25, 2019 9:04 am

Hi Dave,
I've been trying to implement your solution in the top nav Silverado template. I've added your CSS code to the MainStyles.css (used "\25b6") but I don't see anything different in my top nav. I assumed your solution would work for any template. Is this correct? If yes, what am I missing here. Thanks.
Also, how would you change the CSS code if the same functionality needs for the side navigation menu (same template)?
Thank you. Vlad.
vkitcen
Jr. Propeller Head
 
Posts: 3
Joined: Thu Oct 04, 2018 6:06 am

Re: How to change expander icon in top nav menu

Postby DaveMags on Fri Jan 25, 2019 1:26 pm

I downloaded the Silverado template to test it out, and you are right.

Try adding that same code, shown again below, to both your "StylesForHomePage.css" and the "MainStyles.css" file. When I put it in the MainStyles.css file, it only changed the icon on topic pages, but not the home page. I'm thinking that maybe that's what happened on yours? Adding it to the StylesForHomePage.css file also added it to the home page.

Does that fix it?

Code: Select all
ul.navigation ul > li.has-children > a::after
{
     content: "\25b6";
}


For the side nav version, you want to change this icon?
side nav icon.png
You do not have the required permissions to view the files attached to this post.
DaveMags
Propeller Head
 
Posts: 24
Joined: Fri Mar 23, 2018 5:53 am
Location: Florida

Re: How to change expander icon in top nav menu

Postby DaveMags on Fri Jan 25, 2019 2:37 pm

Well, assuming that's what you want to change, I think I managed to do that - kind of a fun challenge anyway :). Flare creates that "icon" in an interesting way, with a border that it hides a part of to make a triangle, which it then flips upside down when you expand the menu.

My method was to clear all that out, then insert my own icons in the right places. Same as before, I think you'll need to put this in both your home page and main styles css files to get it to show on all your pages.

Code: Select all
.is-accordion-submenu-parent > a span.submenu-toggle     /* Removes the default arrow/triangle */
{
   border: none;
}

.is-accordion-submenu-parent > a span.submenu-toggle::after     /* Adds an icon for when the menu is collapsed - I used our right-pointing triange and made it white */
{
    content: "\25b6";
    color: #fff;
}

[aria-expanded='true'].is-accordion-submenu-parent > a span.submenu-toggle::after     /* Adds an icon for when the menu is expanded - I used a heart and made it orange ¯\_(ツ)_/¯  */
{
    content: "\2665";
    color: orange;
}

.is-accordion-submenu-parent > a span.submenu-toggle-container     /* Adjusts the positioning to center it - adjust to your needs */
{
   height: 60%;
}

[aria-expanded='true'].is-accordion-submenu-parent > a span.submenu-toggle     /* Stops the icon from flipping upside down when you expand the menu */
{
    -webkit-transform-origin: none;
   -ms-transform-origin: none;
   transform-origin: none;
    -webkit-transform: none;
   -ms-transform: none;
   transform: none;
}

side nav icon change.png
You do not have the required permissions to view the files attached to this post.
DaveMags
Propeller Head
 
Posts: 24
Joined: Fri Mar 23, 2018 5:53 am
Location: Florida

Re: How to change expander icon in top nav menu

Postby vkitcen on Mon Jan 28, 2019 11:58 am

Thanks for your response, Dave. I am wondering if we talk about the same Silverado template? Your screen shot indicates that your template already has the expander icons. The Silverado template that I download does not. My screen shot is below. Actually, none of the available Top Nav templates have the expander icons in their menu (top or side). Thanks.
You do not have the required permissions to view the files attached to this post.
vkitcen
Jr. Propeller Head
 
Posts: 3
Joined: Thu Oct 04, 2018 6:06 am

Re: How to change expander icon in top nav menu

Postby DaveMags on Mon Jan 28, 2019 1:00 pm

hmmm - I was looking at the Silverado template here: https://www.madcapsoftware.com/downloads/madcap-flare-project-templates/
DaveMags
Propeller Head
 
Posts: 24
Joined: Fri Mar 23, 2018 5:53 am
Location: Florida

Re: How to change expander icon in top nav menu

Postby vkitcen on Mon Jan 28, 2019 5:21 pm

I think I can add a bit more to my previous post:
I looks like the Top Nav templates (the Silverado template as well) are using the Menu Proxy for navigation which is connected to the SideMenu skin. This is what my screen shot (in my previous post) is showing. Now, is there a way to make this type of side navigation look/behave as the side navigation in the Side Nav templates?
I hope this makes sense. Thank you, Dave.
vkitcen
Jr. Propeller Head
 
Posts: 3
Joined: Thu Oct 04, 2018 6:06 am


Return to Web-based Outputs

Who is online

Users browsing this forum: Dave Lee and 4 guests