Changing highlight search results color in Multiscreen HTML5 layout

[ajwwhitney96]

How do I change the highlight color used when "highlight search results" is selected and I'm working with the Multiscreen HTML5 layout? I know how to change it for the WebHelp Pro layout, but haven't been able to find where this is changed for Multiscreen HTML5. Is it now part of the style sheets?

[Peter Grainge]

I am not sure but try this.

Look in the Screen Layout folder and you will see the CSS being used.

Look for this and try changing the colour.

div.wSearchResultSettings {

    width: 100%;

    margin: 0;

    padding: 0;

    background-color: #02b5bc;

    height: auto;

    overflow: visible;

    overflow: hidden;

}

If it is not that selector, try some of the others or decide you really do like the default colour.

---

See www.grainge.org for RoboHelp and Authoring tips

@petergrainge

[Willam van Weelden]

This is a tricky one, as you can only set it in the widget properties. See my blog post http://www.wvanweelden.eu/blog/2013/03/18/set-multiscreen-html5-search-highlight-colour

@Peter: the selector you provided is for styling the section holding the settings for the search result page: number of search results + highlight search results.

Greet,

Willam

[ajwwhitney96]

Thanks, William, that did the trick!

[Peter Grainge]

@Willam

It was the best answer after yours, albeit totally wrong.

[Guest]

For those who prefer the HTML editor:

1. Open the SearchResults.slp file for the screen layout you want to modify.
2. Change the attributes in the widget code. I have bolded them, below. You can use any color you like, just like normal HTML.

<?rh-msp-search-highlight-control id="highlightsearch" widgettype="highlightsearch" type="checkbox" checked="true" class="wSearchHighlight" textcolorval="#000000" bgcolorval="yellow" ?>

[Captiv8r]

How exactly do you open this file in the RoboHelp HTML Editor?

[Guest]

Sorry for the lack of context.

To open the file in RoboHelp:

1. Open the Project Set-up pod.
2. Expand the Screen Layouts tree item.
3. Expand the tree item for the screen layout you want to modify. If you have multiple screen layouts for different devices, you need to modify each one separately.
4. Double-click the search results item under that screen layout. Different layouts seem to name them differently, but they are generally called "Search Results" or "search results page", so you should know pretty quickly which one it is.
5. Edit the file as you would any topic file. You can switch between Design view and HTML view as you normally would.

You can also access this file directly and modify it in a text editor like Notepad or Notepad++. The file is located in: [Project Folder]/!ScreenLayout!/[Layout Name]/SearchResults.slp. The actual file name might vary by layout, I'm not sure, but it should be fairly obviously named, and always a .slp filetype.

Hope that helps!