1 Reply Latest reply on Jul 31, 2010 12:53 AM by Willam van Weelden

    WebHelp Output: How to Add to the Styles used in the Nav Panel?


      I asked a similar question over on Yahoo's HATT Forum.  this version reflects some further research thanks to Rick Stone's "Skinny on Skins" (thanks Rick!).


      I am using RoboHelp 8 to generate WebHelp.


      I want to find where the styles for the navigation (TOC) panel are controlled.


      I changed the color scheme to a darker blue to match our corporate colors in the Skin Editor. I did this for the toolbar, and then in the navigation section for the Highlight color.


      The Skin editor allows me change the text color for hover, which is fine.


      It does not allow me to change the text color under the highlight, so if I select a page in the ToC/nav panel, it has a nice dark blue background - and basic black text. If i hover over it, the text becomes a light blue.


      I don't consider this a huge problem, as the selected page has its title displayed large in the topic panel.


      I thought about bypassing the skin editor and delving into the .js and w*.htm files to see if I could find where the TOC data is called in and try to assign it a style to turn the text light in the highlighted item. But I cannot quite find it.


      Rick Stone's "Skinny on Skins" guided me to the whtdhtml.html file that pointed out the following section of the file:


      setFont("Normal", "Tahoma","8pt","Black","Normal","Normal","none");

      setFont("Hover", "Tahoma","8pt","#4b92db","Normal","Normal","underline");




      When the help site used and the file is processed, the first term is for each setFont is a type. What I am looking for is where to put a line like:\


      setFont("Active", "Tahoma","8pt","Silver","Normal","Normal","underline");


      Where can I define these types? Anyone know?

        • 1. Re: WebHelp Output: How to Add to the Styles used in the Nav Panel?
          Willam van Weelden Level 5





          Changing the highlight and the hover is a bit more work than adding a single line.  You can set an active style, but that will only change the TOC when it is clicked. As soon as you click somewhere else, for instance to scroll a topic, your formatting is gone. To create the highlight and highlight styl, the TOC uses a javascript function to set a background color. This function is also used by the index and glossary. You need to modify this function so it not only changes the highlight, but also some text styling.




          See http://www.wvanweelden.eu/robohelp/skin/highlight_toc.php on how to change the TOC highlight. I created that for RoboHelp 7 WebHelp, but it should work fine for RH8. Note that the article expects you to know some JavaScript. You can add your own style definitions by adding ‘obj.style.[style] = ’. You can use http://www.w3schools.com/css/css_reference_atoz.asp to locate the style you want to change and find the corresponding javascript for it.




          When you have any questions, please post back.