Skip to main content
A
ajwwhitney96
Known Participant
May 2, 2013
Question

Changing highlight search results color in Multiscreen HTML5 layout

  • May 2, 2013
  • 2 replies
  • 1357 views

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?

This topic has been closed for replies.

2 replies

A
Anonymous
January 16, 2015

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
Captiv8r
Legend
January 17, 2015

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

A
Anonymous
January 17, 2015

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!

    Peter Grainge
    Community Expert
    Peter GraingeCommunity Expert
    Community Expert
    May 2, 2013

    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

    Use the menu (bottom right) to mark the Best Answer or Highlight particularly useful replies. Found the answer elsewhere? Share it here.
    Willam van Weelden
    Willam van Weelden
    Inspiring
    May 2, 2013

    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

      A
      ajwwhitney96Author
      Known Participant
      May 2, 2013

      Thanks, William, that did the trick!

      Terms & ConditionsAccessibility statement
      Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices