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.