Changing The Search Highlight colors in Webhelp or Dot Net Help

 Article #: CSS1002F  Product: Flare   Version: 2.x and Version 3.x

Summary:

In Flare's Output for WebHelp and DotNet Help the quick search highlight color for results can now be changed.

Full Description:

Flare's Webhelp and Dot Net help outputs will highlight the Quick Search results in your topics. These colors are currently preset and can not be changed. We have created a new JavaScript file that now allows users to specify the highlight colors in their projects.

Solution:

 

For Flare Version 2.x see below. For Flare Version 3.x or later see this help topic from Flare's Help file.

Listed Below are the steps you will need to follow to allow you to change your highlight color in WebHelp or DotNet Help.

  1. Download the new MadCapHighlighter.js file from the following link: http://www.madcapsoftware.com/support/files/downloads/MadCapHighlighter.zip
  2. Extract the Zip file to temporary folder on your system
  3. Using windows explorer navigate to C:\Program Files\MadCap Software\MadCap Flare V2.5\Flare.app\Resources\WebHelp\Content\SkinSupport
  4. Replace the MadCaphighlighter.js file with the new one that has been extracted to a your temporary folder

Once that new file is in place, you can then modify the stylesheet in your project to include subclasses of the Span tag called Searchhighlight1, Searchhighlight2, etc. through Searchhighlight10. It is not necessary to specify all 10, but that will give you the most control over the appearance of the search results. If no span.Searchhighlight styles are specified, the search results will still result back to their defaults.

In your Stylesheet you will want to add a class to the Span Tag, Name this Class SearchHighlight1 Assign it a color and a background color. If you open the Stylesheet in the internal text editor it will look like the following.

span.SearchHighlight1
{
color: Black;
background-color: #fa8072;
}

Tip: Tip: How to edit the stylesheet to have the your Heading Styles appear with a different color.

If your search results appear in your H1 or other heading style, then the color and appearance can be different than if it is in a standard paragraph

In order to do this you will want to open the stylesheet in the internal text editor or notepad and then add then following:

 

H1 span.SearchHighlight1
{
color: Black;
text-decoration: underline;
background-color: #c1d72f;
}

Note the space between H1 and span. These style-dependent highlights will appear under the complex selectors in Flare's stylesheet editor, but they will need to be initially added in Notepad or Flare's internal text editor.

Attribution:

Last updated:

Aug 8, 2007

Author:

Neal Pozner, Richard Ferrell

Contributions by:

Aaron Morgulis