Adobe RoboHelp: Change WebHelp Index Highlight
When you click a term in the index, the selected term is highlighted by a gray background. With some changes, you can style the highlight any way you like. To do this, you have to modify your output files. 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, whibody.htm and whihost.js. 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 “Idx” to the function name:
function HighLightElementIdx(obj,sHighLightColor,sNormalColor) function resetHighLightIdx(sNormalColor)
On the fifth line of the function HighLightElementIdx
, change the text resetHighLight
to resetHighLightIdx
.
Before you can add the markup for the highlight, you need to address the correct element. The standard element (obj) of the function is not the element you can use to style the text. To style the text, you need to address the first child of the element obj
. Add a new variable below the line obj.style.backgroundColor=sHighLightColor;
:
obj.style.backgroundColor=sHighLightColor; var TextElem = obj.firstChild;
Now add any markup you want below the second if. Make sure that all markup you place in the function HighLightElementIdx
is undone in the function resetHighLightIdx
. When you want to change the text, start your command with TextElem
, otherwise start with obj
:
function HighLightElementIdx(obj,sHighLightColor,sNormalColor) { if(obj!=null) { resetHighLightIdx(sNormalColor); if (obj.style) { var TextElem = obj.firstChild ; TextElem.style.backgroundColor=gsIdxActiveBgColor; TextElem.style.color="#fff" } goHighLighted=obj; } } function resetHighLightIdx(sNormalColor) { if(goHighLighted!=null) { if (goHighLighted.style) { var TextElemReset = goHighLighted.firstChild ; TextElemReset.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. Open whibody.htm and findgsBgColor
(its a variable and at the top of the script). Give this variable the colour value for the standard background. Now findgsIdxActiveBgColor
and give this variable the colour value for the highlight. Open whihost.js and find the functionclearHighLight
. RenameresetHighLight
toresetHighLightIdx
. Find the functionfindCKInDom
, this is a large function. Inside this function, locateHighlightElement
. RenameHighLightElement
toHighLightElementIdx
. Because the index uses the functionfindCKInDom
only when you type a keyword in the search bar, you also need to style the index for when you click a keyword. Find the functionIndexWriteClassStyle
(still in whihost.js) and scroll down to the line starting withsStyle+="A:hover
. Turn the line into a comment by adding two slashes (//) in front of the line:sStyle+="A:active {background-color:"+gsIdxActiveBgColor+";}\n"; //sStyle+="A:hover {"+getFontStyle(goIdxHoverFont)+"}\n"; sStyle+="</STYLE>";Go to the line starting with
sStyle+="A:active
and add all your highlight styles after the opening bracket{
. You enter these styles in CSS syntax. Now copy the line and paste is below. Rename the pseudo-class:active
to:focus
. It has to look something like this:sStyle+="A:active {color: #ff; background-color:"+gsIdxActiveBgColor+"}\n" sStyle+="A:focus {color: #ff; background-color:"+gsIdxActiveBgColor+"}\n" //sStyle+="A:hover {"+getFontStyle(goIdxHoverFont)+"}\n"Save the file and make a backup of whutils.js, whibody.htm and whihost.js. Copy these files in your output every time you generate your project.