Adobe RoboHelp: Edit a Multiscreen HTML5 Layout

 

Multiscreen HTML5 is a new Single Source Layout found in Adobe RoboHelp 10. Multiscreen HTML5 is an output that is accessible on just about any kind of device including desktop and laptop computers running Windows or the Macintosh operating systems, iPhones, iPads and other mobile devices.

 

If you want to control the appearance of Multiscreen HTML5 layouts, there are Screen Layouts, which are often compared to WebHelp Skins. If you've ever used a WebHelp Skin, you know that it is pretty easy to customize the look and feel of the skin via RoboHelp's Skin Editor. Screen Layouts differ from WebHelp skins in that there is no Skin Editor. Instead, there's a Screen Layout Editor, which isn't nearly as intuitive as the Skin Editor, making customizing a Screen Layout a challenge. For instance, if you want to control something as simple as the search results highlight color, you'll need to edit from within the Screen Layout Editor, which is essentially an HTML page.

 

In the image below, notice the default highlight color in the Desktop_Layout Screen Layout.

 

 

 

If you want to change the highlight color you need to determine which colors you want to use. You need a background color and a font color for highlighted text, for example light blue and black.

 

The Screen Layout needs these colors in a hexadecimal format, which is a way to represent color using letters and numbers. For example, #000000 is the hexadecimal format you would use in HTML coding to create the color black. You can find the hexadecimal value of your colors with the free color calculator by Peter Jones.

 

Here is how you change the highlight color for a layout:

1. With a RoboHelp project open, go to the Project Set-up pod.
2. Open Screen Layouts > Desktop_Layout > Search results page.
    
3. On the Search results page, scroll down and click the checkbox before the text Highlight Search Results.
    
4. Right-click the checkbox and choose Screen Layout Properties. (The Properties will appear at the right side of the RoboHelp window by default.)
    
5. Type the hexadecimal value for the Highlight Color you would like to use. (For example: #EAEFF3 is a light blue color.)
    
6. Type the hexadecimal value for the Font Color. (For example: #000000 is black.)
7. Save the project and generate.

The search highlight will now use your specified colors.

 

 

 

***

Looking to learn RoboHelp? We offer a live, two-day online RoboHelp class once each month.