Adobe RoboHelp: Change WebHelp TOC Highlight

When you visit a topic, the TOC highlights the visited topic. Normally you can only set the background colour of this highlight. But with some changes to your output files, you can style the highlight any way you like. This means that you need to copy the modified files in your output every time you generate your project.

To change the highlight, you have to change whutils.js, whthost.js and whtdhtml.htm.

First, open whutils.js and search for the function HighLightElement. Once you found it, copy the function HighLightElement and the (next) function resetHighLight. Paste the functions below the current functions and rename the copied functions by adding TOC to the function name:

function HighLightElementTOC(obj,sHighLightColor,sNormalColor)
function resetHighLightTOC(sNormalColor)

On the fifth line of the function HighLightElementTOC, change the text resetHighLight to resetHighLightTOC.

Now add any markup you want below the second if. Make sure that all markup you place in the function HighLightElementTOC is undone in the function resetHighLightTOC.

function HighLightElementToc(obj,sHighLightColor,sNormalColor)
{
  if(obj!=null)
  {
    resetHighLightToc(sNormalColor);
    if (obj.style)
      obj.style.backgroundColor=sHighLightColor;
    obj.style.color="#fff";
    goHighLighted=obj;
  }
}

function resetHighLightToc(sNormalColor)
{
  if(goHighLighted!=null)
  {
    if (goHighLighted.style)
      goHighLighted.style.backgroundColor=sNormalColor;
    goHighLighted.style.color="#2c2e74";
    goHighLighted=null;
  }
}

Note: To change any style, you have to use the JavaScript syntax. You’ll find the syntax for every element on the CSS reference site at w3schools.com.

Close whutils.js and open whtdhtml.htm. Find setBackgroundcolor and set the standard background colour for your TOC. Next, go to setActiveBgColor and set the highlight colour for your TOC. Save your changes.

Open whthost.js. Find gsBgColor (its a variable and at the top of the script). Give this variable the same colour as you gave setBackgroundcolor in whtdhtml.htm. Now find gsABgColorand give this variable the same value as you gave setActiveBgColorin whtdhtml.htm.

Find the function markObj and on the fifth line of the function, change HighLightElement to HighLightElementTOC. Now find the function syncInitand on the sixteenth line of the function, change HighLightElement to HighLightElementTOC.

Save the file and make a backup of whutils.js, whthost.js and whtdhtml.htm. Copy these files in your output every time you generate your project.