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:
|
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 area (Small Screens) | Search results optimized for small screens such as smartphones. The difference between this widget and the regular 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. |