Adobe RoboHelp: Change WebHelp Glossary Highlight

When you click a term in the glossary, 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, whghost.js and whgbody.htm. First, open whutils.js and search for the function HighLightElement. Once you found it, copy the function HighLightElement and the function resetHighLight. Paste the functions below the current functions and rename the copied functions by adding “Glos” to the function name:

function HighLightElementGlos(obj,sHighLightColor,sNormalColor)
function resetHighLightGlos(sNormalColor)

On the fifth line of the function HighLightElementGlos, change the text resetHighLight to resetHighLightGlos.

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 HighLightElementGlos is undone in the function resetHighLightGlos. When you want to change the text, start your command with TextElem, otherwise start with obj:

function HighLightElementGlos(obj,sHighLightColor,sNormalColor)
{
if(obj!=null)
{
  resetHighLightGlos(sNormalColor);
  if (obj.style) {
   obj.style.backgroundColor=sHighLightColor;
   obj.style.display= "block" ;
    
   var TextElem = obj.firstChild ;
   TextElem.style.color= "#fff"
  }
   goHighLighted=obj;
}
}
 
function resetHighLightGlos(sNormalColor)
{
if(goHighLighted!=null)
{
  if (goHighLighted.style) {
   goHighLighted.style.backgroundColor=sNormalColor;
    
   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.

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

Open whghost.js and find the function HighLight. In the function HighLight, replace HighLightElement by HighLightElementGlos. Then find gsBgColor (a variable at the top of the script). Give this variable the same value as you gave setBackgroundcolor in whgbody.htm. Now find gsABgColor and give this variable the same value as you gave setActiveBgColor in whghost.js.

Find the function HighLight and on the fifth line of the function, change HighLightElement to HighLightElementGlos.

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