Menu Proxy Styling

This forum is for all Flare issues related to the HTML5, WebHelp, WebHelp Plus, and Adobe Air Targets
Post Reply
joshua_cline
Propeller Head
Posts: 35
Joined: Mon Jun 25, 2018 8:45 am

Menu Proxy Styling

Post by joshua_cline »

Hello. I am attempting to add an ordered list to a menu proxy. This menu is located inside of a topic and serves as a clickable TOC for the topic. See the screenshots below. How do I add an ordered list to this menu?
You do not have the required permissions to view the files attached to this post.
DaveMags
Propeller Head
Posts: 33
Joined: Fri Mar 23, 2018 5:53 am
Location: Florida

Re: Menu Proxy Styling

Post by DaveMags »

Do you mean you want, like in your second image, those Header entries to display numbered like an ordered list?
NorthEast
Master Propellus Maximus
Posts: 6359
Joined: Mon Mar 05, 2007 8:33 am

Re: Menu Proxy Styling

Post by NorthEast »

You can't style this using Flare's skin editor, so you need to add the CSS yourself.

Flare generates a menu proxy as an unordered list (ul). If you press F12 in your browser and view the HTML, you'll see something like <ul class="nocontent _Skins_YourSkinName mc-component" ... >

So you can add your own CSS to your stylesheet to style that list, e.g.

Code: Select all

ul._Skins_YourSkinName  {
    list-style-type: decimal;
}
joshua_cline
Propeller Head
Posts: 35
Joined: Mon Jun 25, 2018 8:45 am

Re: Menu Proxy Styling

Post by joshua_cline »

Thanks for the response, but that did not work. It only worked when I styled:
ul.menu, ul.menu ul, ul.menu li
{
list-style-type: decimal;
}

But this ends up adding decimals to the other menu proxies, which I do not want.
NorthEast
Master Propellus Maximus
Posts: 6359
Joined: Mon Mar 05, 2007 8:33 am

Re: Menu Proxy Styling

Post by NorthEast »

It works fine for me - my example was to style ul._Skins_YourSkinName which would style a menu proxy that uses a menu skin called YourSkinName.

Your CSS needs to target the list in that particular menu proxy, so the CSS needs to be more specific than just ul.menu (which is used for menu proxies, and other controls too).

So to make it specific you might use (a) the class name for that skin, e.g. ul._Skins_YourSkinName, (b) put the menu proxy in a container, e.g. div.YourContainer ul.menu
joshua_cline
Propeller Head
Posts: 35
Joined: Mon Jun 25, 2018 8:45 am

Re: Menu Proxy Styling

Post by joshua_cline »

Thank you, Dave. This is now working, although I have another problem.

list-style-type: decimal works fine for the first level (say H1) but the other headings (H2, H3, etc) each start at "1" rather than what I want "1.1" or "1.2". How can I achieve this?

For example:

1 First Level
1.1 Second Level
2. First Level
2.1 Second Level
2.2 Third Level.

Thank you!
Post Reply