Screen layouts

A screen layout contains standard layout pages for displaying topic contents and search results. However, you can add and design any number of layout pages to display other types of content, for example a home page with the TOC.

1. In the Project Set-up pod, right-click on the screen layout name or on an existing SLP name. Select New > Screen Layout Page.

2. In the General tab, specify a page title and description.

3. In the Appearance tab, attach a style sheet and modify styles if required.

4. (Optional) Add background sound.

5. Click OK.

The key component of a screen layout page is a widget. A widget contains placeholders that you can be styled and laid out using cascading style sheets. While generating output, RoboHelp converts the placeholders into standard HTML tags with associated functionality.

The following customizable widgets are available for achieving different functions:

LNG String

Insert this widget to add a string from the LNG file.

Note: The LNG file contains strings for various user interface elements. RoboHelp loads these strings at runtime.

Tab

Insert this widget to add a tab in a tabbed panel.

Browse Sequence

Choose options from this widget menu to insert browse sequence buttons and links in default or custom styles.

Glossary

Insert this widget to create a placeholder for a glossary.

Index

Insert this widget to create a placeholder for an index.

Print Button

Insert this widget to add an icon for printing.

Print Link

Insert this widget to add a text link for printing.

Project Title

Insert this widget to create a placeholder for the project title.

Tabbed Panel

Insert a group of tabs in two layouts (tabs placed horizontally and tabs placed vertically (accordion)). The default tab group consists of Table of Contents, Index, and Glossary. You can also choose Blank Horizontal Tabs or Blank Vertical Tabs(Accordion) to insert blank tab groups.

Search

Insert the Search Options and Search Results Area widgets. The Search Options widget lets you add and style a search box to display in the output. The option to show search results for all words specified in the search box is also added by default.

The Search Results Area widget lets you design and style the area in which search results should be displayed. You can add and configure components such as Search URL and Search Context.

Show/Hide

Insert the Show/Hide widget into a widget to enable end users to show or hide the widget. For example, if you insert the Show/Hide widget into a TOC widget, the end users get the capability to show or hide the TOC in the output.

Choose one of the following options:

Dual State Show/Hide

Displays different text (for example, Show or Hide) in each of the two states

Static Show/Hide

Displays the same text (for example, Show/Hide) in both states

TOC

Choose between Tree and Expanding Node to insert a TOC element on a screen layout page and style the various placeholders. Tree displays TOC items in a hierarchical view. In Expanding Node, arrows next to the TOC items at each level display the items at the next level.

Topic

Insert this widget to create a placeholder for topic contents.

Each Multiscreen widget has a set of placeholders, and each placeholder has predefined attributes.

The following table lists various placeholders and their properties and attributes:

• Design the screen layouts using the standard widgets available with RoboHelp.

• Avoid reusing any image from the standard widgets or default layouts in any new screen layout.

• Define styles for all widgets in a screen layout CSS regardless of whether or not the widget is used in the screen layout. This ensures that the look-and-feel of the screen layout is not affected if a widget is added later.

• Create only simple class styles in the CSS. Make sure that each style has a modular definition.

• Make sure that all the icons and images are present in the screen layout folder regardless of whether or not they are used in the screen layout. The image names and formats should be in the required format.

• Specify height and width of images in px for img styles.

• Make sure that required style names are used in the screen layout. If you need to define additional styles in the CSS, follow a similar naming convention but do not use 'w' as first the character. Style names starting with 'w' are reserved for predefined widgets.

• Do not use absolute positioning in styles. Fluid layouts work better for Multiscreen HTML5 output.

• Do not use positioning attributes (for example, float) in the styles of top-level parent element of widgets. Examples of these elements are Topic, Index, and Tabbed Panel.

• Include pseudo-class definition for hyperlink styles.

• Make sure that the font family used in styles is appropriate and taking care of supported devices

• Make sure that hyperlink styles take care of touch scenarios and include webkit proprietary attributes (for example, -webkit-tap-highlight-color) if required.

  Note: These attributes cannot be inserted through RoboHelp CSS Editor and need to be inserted manually.

• Use LNG strings for inserting generic text in screen layouts.

• Do not use any inline styling in screen layouts.

• Provide a representative image of each screen layout for use in its preview.

• Make sure that a Layout.css file includes the style definition used internally by Multiscreen widgets. Refer to the Layout.css file of any factory screen layout available in the Gallery folder of your RoboHelp installation.

1. In the Project Set-up pod, expand the screen layout you want to edit.

2. Double-click the screen layout page. Screen Layout Editor opens. You can add new components by inserting available widgets, change their placement, and modify their properties.

   View full size graphic

   Screen layout page in Screen Layout Editor

3. Edit the screen layout page as required.

   • To insert a widget, do one of the following:

     • Select Insert > Multiscreen Widgets. Select a widget.

     • Click a tool button on the Widget toolbar in Screen Layout Editor.

   • To select a placeholder in the widget, click the placeholder name in the Tag list below the Screen Layout Editor title bar. For example, to navigate to the LNG String placeholder in a Tabbed Panel widget, click LNG String in the Tag list.

   • To view or modify the attributes of a widget, do the following:

     • Select View > Pods > Screen Layout Properties.

     • Right-click and select Screen Layout Properties.

A new screen layout comes with two default pages, Search Results Page and Topic Page. You can customize these pages in various ways.

Here are some examples of how you can customize the Topic page:

• Place the project title placeholder at the bottom of the page.

• Change the background color of the Topic page. Click Document in the Tag list, right-click and select Topic Borders And Shading. Select a color and click OK.

• Customize the tabbed panel. To remove a tab, select the tab from the Tag list and press Delete. To add a tab, select the tab before which you want to add a tab and click the Insert Tab widget. Specify the tab name.

• Replace the images in the browse sequence. Select an image in the browse sequence. Right-click and select Image Properties. Browse and select the PNG file for the new image. Change the other image in the same way.