Screen layouts

Screen layouts help you define the look-and-feel of Multiscreen HTML5 or Responsive HTML5 SSL outputs. For example, using screen layouts, you can define what the topic page should look like, how the search page should behave, or what branding options to add. Screen layouts offer placeholders for different elements, such as Table of Contents, index, and glossary. This support gives you the flexibility to lay out the elements in the way you want.

Screen layouts contain XHTML screen layout pages (SLP) and their linked files, such as CSS, images, and multimedia assets.

An SLP has a set of placeholders and HTML content that define layouts for Multiscreen HTML5 or Responsive HTML5 SSL outputs.

Note: Each screen layout can have only one Search Results layout page and one Topic layout page. Generic layout pages can be more than one.

Default screen layouts are available in the Gallery folder of your RoboHelp installation. For Multiscreen HTML5 or Responsive HTML5 output, you need to create a screen layout based on an available screen layout in the gallery. RoboHelp copies all required files in a <screen_layoutname> folder under !ScreenTemplates! in the project hierarchy.

Create a screen layout

  1. In the Project Set-up pod, right-click Screen Layouts and select New Screen Layout.

  2. Select a screen layout from the available list in the gallery.

  3. Specify a name and description.

  4. Click OK.

Manage screen layouts

In the Project Set-up pod, right-click a screen layout and do the following:

  • To rename a screen layout, select Rename (or Properties) and specify another name.

  • To view or change the description, select Properties.

  • To import a screen layout, select Import and specify an SLZ file name.

  • To export a screen layout, select Export and specify the location where the SLZ file should be saved.

Preview a screen layout

Preview a screen layout to see whether the different screen layout components and their appearance and placement meet your requirements.

Note: The contents of the project do not appear in a screen layout preview. If you want to see how the content appears in a certain screen layout, map the screen layout to a screen profile in Multiscreen HTML5 or Responsive HTML5 layout settings and click Preview in the toolbar.

To preview a screen layout while editing the screen layout, do the following:

 Press Ctrl + W.

Editing a screen layout

A screen layout has two key components, a set of screen layout pages and a CSS. The screen layout pages define the content and the structure. The CSS defines the layout and the skin.

You can edit or customize a screen layout page in various ways. For example, you can add new screen layout pages, edit the screen layout pages to customize the position and style of widgets on the pages, insert widgets, and so on.

Add a screen layout page (SLP)

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.

Note: You can add a Search Results page if the screen layout does not already have a SearchResults.slp file.
  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.

Screen layout page components

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.

Note: The look-and-feel of a widget in the output and in Screen Layout Editor might differ to some extent.

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.

TOC widget

Insert a TOC Tree widget or a TOC Expanding Node widget into a screen layout page to create and style a placeholder for a TOC in the output.

Attributes

Class
Specifies that a Div class should be applied on the parent TOC placeholder

Child placeholders
A TOC Tree widget has the following child placeholders:
Open Book
Defines the look and feel of open book items in the TOC in the output. You can insert any relevant HTML content inside this placeholder.

Closed Book
Defines the look and feel of closed book items in the TOC in the output.

Page
Defines the look and feel of page items in the TOC in the output.

Link
Defines the look and feel of TOC items that are linked to web addresses, email messages, multimedia files, Usenet newsgroups, and FTP sites in the output.

Placeholder properties and attributes

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

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

Placeholder

Parent

Children

Attributes

Alphabet category

Glossary

Text

class, showin

Browse sequence Back

[HTML]

[None]

class

AND Search Control

     

Browse sequence Nect

[HTML]

[None]

class

Closed book

TOC

Text

Icon

class, classhover, classselected

Filter Box

Glossary

Index

[None]

placeholder

Glossary

Tab Content Group

[HTML}

Glossary TermGlossary DefinitionAlphabet CategoryFilter Box

class, showin

Glossary Definition

Glossary

Text

class, classhover

Icon

Closed Book

Open Book

Page

Link

Note: These placeholders are children of TOC.

Image

class, src, hoversrc, selectedsrc

Index

Tab Content Group[HTML]

Index Keyword

Index Link

Alphabet Category

Filter Box

class, showin

Index Keyword

Index

Text

class, classhover, classbookchilds

Index Link

Index

Text

class, classhover

Lng String

[All]

[None]

class

Navigation Link

[All]

[None]

class, href

Open Book

TOC

Text

Icon

class, classhover, classselected, classbookchilds

Search Field

[All]

[None]

placeholder

Search Combo

Search Results

[None]

[None]

Search Context

Search Result Item

[None]

class

Search URL

[All]

[None]

class

Search Message

Search Results

[None]

class

Search Page Numbers

Search Results

[None]

class, ckasspagelink, classpage

Search Result Back

Search Results

[None]

class

Search Result Item

Search Results

Search Title

Search Context

class, classhover

Search Result Next

Search Results

[None]

class

Search Results

Tab Content Group[HTML]

Search Message

Search Combo

Search Result Item

Search Page Numbers

Search Result Back

Search Result Next

class

Search Title

Search Result Item

[None]

class

Show/Hide

[All]

[None]

class

Tab

Tab Group

[None]

class, classhover, classselected

Tab Content

Tab Content Group

[None]

class

Tab Content Group

Tabbed Panel

[None]

class

Tab Group

Tabbed Panel

[None]

defaulttab

Tabbed Panel

[HTML]

[None]

class, showin

Text

Closed Book

Open Book

Page

Link

Index Keyword

Index Link

Alphabet Category

Glossary Term

Glossary Definition

[None]

class

TOC

Tab Content Group[HTML]

Closed Book

Open Book

Page

Link

class, showin

Page

TOC

Text

Icon

class, classhover, classselected

Link

TOC

Text

Icon

class, classhover, classselected

Topic

Tab Content Group[HTML]

[None]

class

Guidelines for screen layout design

  • 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 or Responsive 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 or Responsive widgets. Refer to the Layout.css file of any factory screen layout available in the Gallery folder of your RoboHelp installation.

Edit a screen layout page (SLP)

  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.

Customize the default Topic page

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.