Starting with HTML5 layouts in RoboHelp: Getting to know the widgets

Modifying or creating Multiscreen HTML5 layouts is no walk in the park. You will need substantial knowledge of HTML and CSS. And if you want to support the RoboHelp Screen Layout editor aside from different browsers and devices, you will find that the editor has quite a few limitations. (More about that in another post.) Luckily, the framework of the default layouts doesn’t require manual tinkering. That just leaves the widgets.

Widgets are code snippets for Screen Layout pages. Widgets control everything that is important: topic contents, table of contents, index, browse sequence buttons, etcetera. This post will give you an introduction to the different widgets and their CSS selectors. This will help you find what you need to do in the CSS.

Widgets

RoboHelp 10 contains the following default widgets:

dget	What does it do?
Advanced search options	This widget with a search field, search button and a checkbox to enable AND search. Clicking the search button will redirect the user to the Layout’s search results page. The AND search means: Default search behaviour: RoboHelp finds topic that contain any of the given search terms. With AND search enabled: RoboHelp finds only those topics that contain all the given search terms.
Basic search options	Widget with a search field and search button. Clicking the search button will redirect the user to the Layout’s search results page.
Browse sequence buttons	Buttons to traverse browse sequences.
Browse sequence links	Simple links to traverse browse sequences.
Glossary	Inserts a glossary.
Index	Inserts the index.
Loading	Hidden widget: This widget is shown when the output is loading resources.
Print button	Button to print the current page.
Print link	Link to print the current page.
Project title	Text placeholder that will be replaced by the project title on generation.
Search results area	Search results. This widget contains: Search results settings: Highlighting and number of results shown on page. Search message: Message of how many results there are. Search results: List with the found topics. Search navigation: Navigation when there are more search results than fit on one page: Links for next and previous page and links for jumping to a specific page.
Search results area (Small Screens)	Search results optimized for small screens such as smartphones. The difference between this widget and the regular search results: This widget does not contain page numbers for the number of pages with search results. This widget contains a native image for going to the next or previous page with search results.
Show/Hide dual state	Links for showing and hiding the navigation part (for instance the tabbed panel). Only the relevant link is shown.
Show/Hide static link	Static link that toggles the navigation part (for instance the tabbed panel).
Tabbed panel – Horizontal	Inserts a panel with horizontal tabs. There are two variants: An empty panel and a panel prefilled with TOC tree, Index and Glossary. (Uses the default widgets for this.)
Tabbed panel – Vertical	Inserts a panel with vertical tabs, like MS Outlook. There are two variants: An empty panel and a panel prefilled with TOC tree, Index and Glossary. (Uses the default widgets for this.)
TOC expanding node	The table of contents that shows you only one level at the same time. Clicking a book will take you to the next level. Perfect for mobile devices.
TOC tree	Default table of contents that presents a tree view. Perfect for desktop.
Topic	Placeholder for topic contents.