Adobe RoboHelp: Change WebHelp Search Pane Highlighting

When you click a term in the search results, the selected page is highlighted by a gray background. With some changes, you can style the hi ghlight 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.

Note: You may also be interested in changing the highlight of search results in topics.

You can style the highlight the easy way, or the hard way. When you choose the hard way, you will have to change the JavaScript that sets the font (sStyle and setFont) in whfbody.htm and whfform.htm. You have to set the font in three different places: if you change only whfbody.htm and the function writeFormStyle in whfform.htm, it will not work. There’s another style definition at the bottom of whfform.htm.

The easy way is to attach a style sheet to both whfbody.htm and whfform.htm. In this style sheet, add styling for the tag a. This will style all the topic titles. For the highlight, define the pseudo-classes a:active and a:focus. Just don’t forget the !important rule if your style doesn’t take effect. You probably need to overwrite the styles from the JavaScript. You’re styles may look something like this:

a {
  display: block !important;
  text-decoration: none !important;;
}
a:active, a:focus, a:hover {
  color: #fff !important;
  background-color: #849AE7 !important;
  font-weight: bold !important;
  border: 1px solid #045abb !important;
}