Menu Proxy Styling
-
- Propeller Head
- Posts: 35
- Joined: Mon Jun 25, 2018 8:45 am
Menu Proxy Styling
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.
Re: Menu Proxy Styling
Do you mean you want, like in your second image, those Header entries to display numbered like an ordered list?
Re: Menu Proxy Styling
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.
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;
}
-
- Propeller Head
- Posts: 35
- Joined: Mon Jun 25, 2018 8:45 am
Re: Menu Proxy Styling
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.
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.
Re: Menu Proxy Styling
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
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
-
- Propeller Head
- Posts: 35
- Joined: Mon Jun 25, 2018 8:45 am
Re: Menu Proxy Styling
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!
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!