Edit online

You can select from several different styles of layouts (for example, by default, you can select either a tiles or tree style of layout). Furthermore, each layout includes a collection of skins that you can choose from, or you can customize your own.

Figure 1: WebHelp Responsive Output on a Normal Screen
Figure 2: WebHelp Responsive Output on a Narrow Screen

Edit online

The Main Page is the home page generated in the WebHelp Responsive output. The main function of the home page is to display top-level information and provide links that help you easily navigate to any of the top-level topics of the publication. These links can be rendered in either a Tiles or Tree style of layout. The main page also consists of various other components, such as a logo, title, menu, search field, or index link.

Main Page - Tiles Layout

In the tiles presentation mode, a tile component is created for each chapter (first-level topic) in the publication. The tile presents a link to the topic and its short description.

Figure 3: Main Page - Tiles Layout
Logo ComponentTitle ComponentSearch Input ComponentMenu ComponentIndex Terms Link ComponentTopic Tiles ComponentFooter Component

Main Page - Tree Layout

In the tree presentation mode, links to the first and second level topics in the publication are displayed using a tree-like component.

Figure 4: Main Page - Tree Layout
Logo ComponentTitle ComponentSearch Input ComponentMenu ComponentIndex Terms Link ComponentTable of Contents ComponentFooter Component

Main Page Components

The layout components displayed in the main page are:

Publication Title
The title of the publication. It is usually taken from the DITA map title.

Displays a logo associated with the publication. Additionally you can set a target URL that will be opened when you click on the logo image.

The logo image can be specified using the webhelp.logo.image transformation parameter. For the target URL, use the webhelp.logo.image.target.url parameter.

Menu
Helps you to navigate to your documentation. This component presents a set of links to all topics from your publication. For information about customizing the menu, see How to Customize the Menu topic.
Presents a link to the index terms page. You can control if this component is displayed by using the webhelp.show.indexterms.link parameter.
Search Input
Input text field allowing you to easily enter your search queries.
Topic Tiles
A tile associated with a main topic. Each topic tile has three sections that correspond to the topic title, short description, and image.
Topic Tile Title
Presents the navigation title of the associated topic.
Topic Tile Short Description
Presents the short description of the topic. It may be collected either from the topic or from the DITA map topic meta.
Topic Tile Image
Presents an image associated with the topic. The image association is done in the DITA map.
Tree Table of Contents
An area containing topic titles from first and second level of your publication.
WebHelp Responsive output footer.

Edit online

The Topic Page is the page generated for each DITA topic in the WebHelp Responsive output. The HTML pages produced for each topic consist of the topic content along with various other additional components, such as a title, menu, navigation breadcrumb, print icon, or side table of contents.

Figure 5: Topic Page
Logo ComponentTitle ComponentSearch Input ComponentMenu ComponentIndex Terms Link ComponentExpand/Collapse All Sections ComponentNavigation Links ComponentPrint Link ComponentBreadcrumb ComponentPublication Table of Contents ComponentFooter ComponentTopic Content ComponentTopic Table of Contents Component

Topic Page Components

The layout components displayed in this page are:

Publication Title
The title of the publication. It is usually taken from the DITA map title.

Displays a logo associated with the publication. Additionally you can set a target URL that will be opened when you click on the logo image.

The logo image can be specified using the webhelp.logo.image transformation parameter. For the target URL, use the webhelp.logo.image.target.url parameter.

Menu
Helps you to navigate to your documentation. This component presents a set of links to all topics from your publication. For information about customizing the menu, see How to Customize the Menu topic.
Presents a link to the index terms page. You can control if this component is displayed by using the webhelp.show.indexterms.link parameter.
Search Input
Input text field allowing you to easily enter your search queries.
The navigation links (Previous / Next arrows) can be used to navigate to the previous or next topic. These navigation links are controlled by the collection-type attribute. For example, if you set collection-type="sequence" on a parent topic reference, navigation links will be generated in the output for that topic and all of its child topics. You can also use the webhelp.default.collection.type.sequence parameter and set its value to yes to generate navigation links for all topics, regardless of whether or not the collection-type attribute is present.
Tip: To hide the navigation links, you can edit the transformation scenario and set the value of the webhelp.show.navigation.links parameter to no.
Expand/Collapse Sections Button
Icon that expands or collapses sections listed in the side table of contents within a topic.
A print icon that opens the print dialog box for your particular browser.
Breadcrumb
Presents the path of the current displayed DITA topic in documentation.
Topic Content
Presents the content of the associated DITA topic.
Publication Table of Contents
A Table of Content for the publication displayed in the left side.
Topic Table of Contents (On this page links)
A table of contents for the topic displayed on the right side with a heading named On this page and it contains links to each section within the current topic and the section corresponding to the current scroll position is highlighted. This component is generated for any topic that contains at least two <section> elements and each <section> must have an @id attribute.
WebHelp Responsive output footer.

Edit online

The Search Page presents search results in the WebHelp Responsive output. The HTML page consists of a search results component along with various other additional components, such as a title, menu, or index link.

When you enter search terms in the Search field, the results are displayed in a results page. When you click on a result, the topic is opened in the main pane and the search results are highlighted. If you want to remove the colored highlights, click the Toggle Highlights button at the top-right side of the page. The Search field also includes an autocomplete feature.

Figure 6: Search Results Page
Logo ComponentTitle ComponentSearch Input ComponentMenu ComponentIndex Terms Link ComponentSearch Results ComponentFooter Component

Search Page Components

The layout components displayed in the search page are:

Publication Title
The title of the publication. It is usually taken from the DITA map title.

Displays a logo associated with the publication. Additionally you can set a target URL that will be opened when you click on the logo image.

The logo image can be specified using the webhelp.logo.image transformation parameter. For the target URL, use the webhelp.logo.image.target.url parameter.

Menu
Helps you to navigate to your documentation. This component presents a set of links to all topics from your publication. For information about customizing the menu, see How to Customize the Menu topic.
Presents a link to the index terms page. You can control if this component is displayed by using the webhelp.show.indexterms.link parameter.
Search Input
Input text field allowing you to easily enter your search queries.
Search Results

Each result includes the topic title that can be clicked to open that page. Under the title, a breadcrumb is displayed that shows the path of the topic and you can click any of the topics in the breadcrumb to open that particular page.

WebHelp Responsive output footer.

Autocomplete Suggestions in the Search Text Field

When you are typing in the search text field, proposals are presented to help you to compute the search query. The information proposed when you are typing is collected from:
  • The search queries from the history of the previous searches.
  • The titles collected from your documentation.
  • Documentation index terms and keywords. For example, in a DITA topic, the keywords and index terms are specified in the topic prolog section like this:
    <prolog>
      <metadata>
    	<keywords><indexterm>databases</indexterm></keywords>
    	<keyword>installing</keyword>
    	<keyword>uninstalling</keyword>
        <keyword>prerequisites</keyword> 
      </metadata>
    </prolog>

Missing Terms

If you enter multiple search terms (other than stop words), for any result that the search engine found at least one term but not one or more of the other terms, the Missing terms will be listed below each result.

Edit online

The Index Terms Page page consists of an index terms section along with various other additional components, such as a title, menu, or search field.

An alphabet that contains the first letter of the documentation index terms is generated at the top of the index page. Each letter represents a link to a specific indices section. The indexes are presented in multiple columns to make it easier to read this page.

Figure 7: Index Terms Page
Logo ComponentTitle ComponentMenu ComponentIndex Terms Link ComponentIndex Terms ComponentAlphabet Links ComponentFooter Component

Index Terms Page Components

The layout components displayed in this page are:

Publication Title
The title of the publication. It is usually taken from the DITA map title.

Displays a logo associated with the publication. Additionally you can set a target URL that will be opened when you click on the logo image.

The logo image can be specified using the webhelp.logo.image transformation parameter. For the target URL, use the webhelp.logo.image.target.url parameter.

Menu
Helps you to navigate to your documentation. This component presents a set of links to all topics from your publication. For information about customizing the menu, see How to Customize the Menu topic.
Presents a link to the index terms page. You can control if this component is displayed by using the webhelp.show.indexterms.link parameter.
Index Terms Alphabet
An alphabet that contains the first letter of index terms. Each letter represents a link to a specific indices section.
Index Terms
The first letter of the index along with the list of index terms.
WebHelp Responsive output footer.