I wrote a response to this post, and the forum software ate it for lunch. So here is another attempt.
There are several search results styles that apply to HTML5, TopNav, and SideNav targets. They are done in the style sheet, not in the skin editor.
First, if you want to change how the search terms are displayed on the search results page itself, you have to change the <b> tag. You'll notice that Flare wraps each word from the search term in a separate <b> tag, but it doesn't differentiate the search terms in any other way. So if you are using the <b> tag elsewhere in your project, those settings will apply here as well, and you have to use a complex selector. Thanks to the way MadCap renders the search results, you can use the following code in your CSS to change just the <b> tags on the search results page:
Now, if you want to change how search results are styled/highlighted on the topic pages that you open from the search results, then you have two options. First, you can style all the individual search term words with the same style. This is what we do in our project. To do that, just add the following to your CSS style sheet:
Code: Select all
.SearchHighlight
{
background-color: yellow;
}
Flare gives you an additional option when styling these words. Because of the way Flare generates output, you can actually style each word from the search phrase separately. Here is what Flare renders in HTML output for a two word search:
Code: Select all
<span class="SearchHighlight SearchHighlight1">Term1</span> <span class="SearchHighlight SearchHighlight2">Term2</span>
That gives us the opportunity to use the following code to change the styles/background colors of each word separately:
Code: Select all
.SearchHighlight.SearchHighlight1
{
background-color: yellow;
}
.SearchHighlight.SearchHighlight2
{
background-color: orange;
}
.SearchHighlight.SearchHighlight3
{
background-color: pink;
}
You can keep adding numbers for as many search terms as you need. I don't know if there is an upper limit. This isn't something I've tested, as we only use one background color for all highlighted terms.
I hope this helps explain how you can affect the way search results are displayed in Flare.