Open topic with navigation

Using Styles to Change the Look of Highlighted Search Terms

When users perform searches in your online output, the keywords that are found are highlighted in the topics. The background for each term found in a topic is highlighted in a different color. In Flare you can create styles for this purpose and change not only the color background, but other settings as well (e.g., font style, text decoration).

How to change the style of highlighted search terms

1. Open the style sheet that you want to modify.

2. Complete one of the following sets of steps, depending on whether you want to use the Simplified view or Advanced view in the Stylesheet Editor.

   • Simplified The Simplified view is better for new users. It provides an easier way to apply properties to styles, with format options available from a toolbar (similar to the way one would use the Text Format toolbar to change the look topic content without a style). In many cases, only the most common property options are available in the Simplified view (e.g., font, letter/word spacing, paragraph alignment/indentation, auto-numbering format, borders, background). One advantage of the Simplified view is that you can apply a property to multiple styles at the same time. You can also click a check box to hide the properties in the editor, allowing you to see only the styles.
   • Advanced The Advanced view displays style classes and properties in hierarchical tree structures. It is not as quick as using the Simplified view, but it allows you to edit a great deal more settings than are available in the Simplified view.

If using the Simplified view:

1. In the local toolbar, make sure the first button displays (which means that the Simplified view is currently shown in the editor). If the button displays instead, then click it.
2. In the upper-left corner of the editor, click in the Show Styles field and select Show Character Styles.
3. Create new classes to hold the style information for the search terms found in a topic. You can do this for the first 10 terms that users enter in the search field, naming each class "span.SearchHighlight1," "span.SearchHighlight2," and so on until you create "span.SearchHighlight10." The easiest way to create these classes is to import them from a Flare factory style sheet, but you can also create them manually.

   example

   Let's say that you create the following three classes: span.SearchHighlight1, span.SearchHighlight2, and span.SearchHighlight3. For span.SearchHighlight1, you change the background color to blue. For span.SearchHighlight2, you change the background color to orange. And for span.SearchHighlight3, you change the background color to yellow.

   If a user enters "topic information help find" in the search field, the term "topic" will be displayed with a blue background everywhere it occurs in a topic. The term "information" will be displayed with an orange background, and the term "help" will be displayed with a yellow background. The term "find" will be displayed with the default background color specified by Flare (since you did not change it).

   If another user enters "help find topic information" in the search field, the term "help" will be displayed with a blue background. The term "find" will be displayed with an orange background, and the term "topic" will be displayed with a yellow background. The term "information" will be displayed with the default background color specified by Flare (since you did not change it).

   Use the following steps to import these classes from a Flare factory style sheet:

   1. In the local toolbar, click the Options button and select Import Styles. The Import Styles dialog opens.
   2. In the Library Folders section, make sure Factory Stylesheets is selected.
   3. In the Stylesheets section, select SearchHighlight.
   4. (Optional) In the [Medium] drop-down list, you can select a specific medium. This determines the medium to which the styles are imported in your current style sheet. If you select "default," the imported style properties will be applied to all of the mediums in the other style sheet. If you select a custom medium, the imported style properties will be imported to that medium in the other style sheet. For more information see About Style Sheet Mediums.
   5. In the section below, click the Import check box next to each style class named span.SearchHighlight followed by a number. There are 10 of these style classes.
   6. Click OK. The style classes are added to the current style sheet.

   Use the following steps to create these classes manually:

   1. From the grid in the bottom portion of the Stylesheet Editor, select the span tag.
   2. In the local toolbar, click . The New Style dialog opens.
   3. Enter SearchHighlight1 (or replace 1 with another number at the end, up to 10).
   4. Click OK.
4. Select the new style class that you want to modify.

5. In the local toolbar of the editor, click . The Properties dialog opens.

6. Use the Properties dialog to change values for the style's properties.

   example

   Let's say that you want to change the background color for the class span.SearchHighlight1. After you select that class on the left you can select the Font tab in the Properties dialog. Then click the down arrow in the Background field and choose the color you want.

7. In the Properties dialog, click OK.

If using the Advanced view:

1. In the local toolbar, make sure the first button displays (which means that the Advanced view is currently shown in the editor). If the button displays instead, then click it.
2. In the upper-left corner of the editor, click in the Show Styles field and select Show Character Styles.
3. Create new classes to hold the style information for the search terms found in a topic. You can do this for the first 10 terms that users enter in the search field, naming each class "span.SearchHighlight1," "span.SearchHighlight2," and so on until you create "span.SearchHighlight10." The easiest way to create these classes is to import them from a Flare factory style sheet, but you can also create them manually.

   example

   Let's say that you create the following three classes: span.SearchHighlight1, span.SearchHighlight2, and span.SearchHighlight3. For span.SearchHighlight1, you change the background color to blue. For span.SearchHighlight2, you change the background color to orange. And for span.SearchHighlight3, you change the background color to yellow.

   If a user enters "topic information help find" in the search field, the term "topic" will be displayed with a blue background everywhere it occurs in a topic. The term "information" will be displayed with an orange background, and the term "help" will be displayed with a yellow background. The term "find" will be displayed with the default background color specified by Flare (since you did not change it).

   If another user enters "help find topic information" in the search field, the term "help" will be displayed with a blue background. The term "find" will be displayed with an orange background, and the term "topic" will be displayed with a yellow background. The term "information" will be displayed with the default background color specified by Flare (since you did not change it).

   Use the following steps to import these classes from a Flare factory style sheet:

   1. In the local toolbar, click the Options button and select Import Styles. The Import Styles dialog opens.
   2. In the Library Folders section, make sure Factory Stylesheets is selected.
   3. In the Stylesheets section, select SearchHighlight.
   4. (Optional) In the [Medium] drop-down list, you can select a specific medium. This determines the medium to which the styles are imported in your current style sheet. If you select "default," the imported style properties will be applied to all of the mediums in the other style sheet. If you select a custom medium, the imported style properties will be imported to that medium in the other style sheet. For more information see About Style Sheet Mediums.
   5. In the section below, click the Import check box next to each style class named span.SearchHighlight followed by a number. There are 10 of these style classes.
   6. Click OK. The style classes are added to the current style sheet.

   Use the following steps to create these classes manually:

   1. In the Styles section on the left side of the editor, select the span tag.
   2. In the local toolbar, click . The New Style dialog opens.
   3. Enter SearchHighlight1 (or replace 1 with another number at the end, up to 10).
   4. Click OK.
4. Select the new style class that you want to modify.
5. From the Show Properties drop-down list on the upper-right side of the editor, select Show: Property Groups.
6. In the Properties section to the right, locate the specific property that you want to change. Not only can you change the background color, but you can change any other property for the class as well. The property name is shown in the left column. The right column is used for selecting and entering values for the property.
7. Click in the value column on the right side. Depending on the type of property, you can either type the value, select it from a drop-down list, or complete the values in a dialog or popup box. If you completed values in a popup, click OK at the bottom of the box.

   example

   Let's say that you want to change the background color for the class span.SearchHighlight1. After you select that class on the left you can double-click the Background property group on the right side of the editor. Then in the cell to the right of background-color, click the down arrow and choose the color you want.

3. Press CTRL+S or click to save your work.

Note: You can also create and specify highlight styles for particular parent elements, such as h1. In order to do this, you need to open the style sheet in a simple text editor, such as Notepad. Then manually create the appropriate span classes for the tag (e.g., h1 span.SearchHighlight1, h1 span.SearchHighlight2).

See Also

Open topic with navigation