Different TOC Entry Icons on Hover and Select

[erineaster1]

I am interested in swapping out the TOC Entry Icons on hover and/or select. I am using icons that are sort of gray for the closed book, open book, and topic icons in the TOC. I would like for the icon to be the same only orange when hovering over the TOC Entry. Then upon select, the icon stays orange. I have created the orange icon files already. My problem is figuring out where to specify a "hover" and "select" icon option in the skin styles editor.

I've looked in the Navigation Panel > TOC style. The icons there are all set to my "grey" set of images. Is there a way to set a different image for on hover and select? I looked in the TOC Entry style as well but that seems to be the same as what is set at the higher Navigation Panel level.

Project Details:
[*]HTML 5 output
[*]Flare 8.1.2

Note: I know that I can specify a hover and select background color. I was hoping to avoid the whole highlight and instead indicate the selection using a different icon.

Does anyone know if this is possible?

[cbdebris]

You may need to use a text editor to add the calls to the new images for the <a> classes. That's the only way I can think of making it work.

[NorthEast]

You can't set this using the skin, so it really depends on how happy you are messing around with the CSS.


You can use inspection tools (like Firebug for Firefox) to work out what style classes are used in the TOC.

There seem to be li tag classes for all the TOC items/states, and the image is set on a div tag inside the li tag. There seem to be li classes for all the states, e.g .tree-node, .tree-node-selected, .tree-node-leaf, .tree-node-expanded, etc.

So, you'd need to modify Flare's output styles.css with your own styles, and set the background on the div tag; so you'd have entries like:

Code: Select all

li.tree-node-leaf:hover > div { background-image: url ('image1.png') no-repeat; }
li.tree-node-leaf.tree-node-selected > div { background-image: url ('image1.png') no-repeat; }

li.tree-node-expanded:hover > div { background-image: url ('image2.png') no-repeat; }
etc.