Edit online

An Oxygen Publishing Template package for WebHelp output must contain a template descriptor file and at least one CSS file, and may contain other resources (such as graphics, XHTML files, XSLT files, etc.). All the template resources can be stored in either a ZIP archive or in a folder. It is recommended to use a ZIP archive because it is easier to share with others.

Edit online

Each publishing template includes a descriptor file that defines the meta-data associated with template. It is an XML file with certain elements that defines all the resources included in a template (such as CSS files, images, JS files, and transformation parameters).

The template descriptor file must have the .opt file extension and must be located in the template's root folder.

A template descriptor might look like this:

<publishing-template>
    <name>Flowers</name>

    <webhelp>
        <tags>
            <tag>tree</tag>
            <tag>light</tag>
        </tags>
        <preview-image file="flowers-tree.png"/>
        
        <!-- Resources (CSS, favicon, logo and others) -->
        <resources>
            <!-- Main CSS file -->
            <css file="flowers.css"/>
            
             <!-- Resources to copy to the output folder -->
            <fileset>
                <include name="resources/**/*"/>
                <exclude name="resources/**/.svn"/>
                <exclude name="resources/**/.git"/>
            </fileset>
        </resources>
        
        <parameters>
            <parameter name="webhelp.show.main.page.tiles" value="no"/>
            <parameter name="webhelp.show.main.page.toc" value="yes"/>
            <parameter name="webhelp.top.menu.depth" value="3"/>
        </parameters>
    </webhelp>
</publishing-template>
Tip: It is recommended to edit the template descriptor in Oxygen XML Editor/Author because it provides content completion and validation support.

Template Name and Description

Each template descriptor file requires a name element. This information is displayed as the name of the template in the transformation scenario dialog box.

Optionally, you can include a description and it displayed when the user hovers over the template in the transformation scenario dialog box.

<publishing-template>
    <name>Lorem Ipsum</name>
    <description>Lorem ipsum dolor sit amet, consectetur adipiscing elit</description>
    ...

Template Author

Optionally, you can include author information in the descriptor file and it displayed when the user hovers over the template in the transformation scenario dialog box. This information might be useful if users run into an issue or have questions about a certain template.

If you include the author element, a name is required and optionally you can include email, organization, and organizationUrl information.

<publishing-template>
    ...
    <author>
      <name>John Doe</name>
      <email>jdoe@example.com</email>
      <organization>ACME</organization>
      <organizationUrl>http://www.example.com/jdoe</organizationUrl>
    </author>
    ...

Webhelp Element

The webhelp element contains various details that define the WebHelp Responsive output. It is a required element if you intend on using a WebHelp Responsive transformation scenario. The elements that are allowed in this webhelp section specify the template tags, template preview image, resources (such as CSS, JS, fonts, logos), transformation parameters, HTML fragment extensions (used to add fragments to placeholders), XSLT extensions, or HTML page layout files.

    <webhelp>
        <tags>
          ...
        </tags>
        <preview-image file="MyPreview.png"/>

        <resources>
          ...
        </resources>

        <html-page-layouts>
          ...
        </html-page-layouts>

        <parameters>
          ...
        </parameters>
    </webhelp>

Template Tags

The tags section provides meta information about the template (such as layout type or color theme). Each tag is displayed at the top of the Templates tab window in the transformation scenario dialog box and they help the user filter and find particular templates.

<publishing-template>
    ...
    <webhelp>
      <tags>
        <tag>tree</tag>
        <tag>dark</tag>
      </tags>

Template Preview Image

The preview-image element is used to specify an image that will be displayed in the transformation scenario dialog box. It provides a visual representation of the template to help the user select the right template. The image dimensions should be 200 x 115 pixels and the supported image formats are: JPEG, PNG, or GIF.

You can also include an online-preview-url element to specify the URL of a published sample of your template. This will display an Online preview icon in the bottom-right corner the image in the transformation scenario dialog box and if the user clicks that icon, it will open the specified URL in their default browser.
<publishing-template>
    ...
    <webhelp>
      ...
      <preview-image file="ashes/ashes-tree.png"/>
      <online-preview-url>https://www.example.com/samples/tiles/ashes</online-preview-url>

Edit online

The resources section of the descriptor file specifies a set of resources (CSS, JS, fonts, logos, graphics, etc.) that are used to customize various components in generated output. These resources will be copied to the output folder during the transformation process. At least one CSS file must be included, while the other types of resources are optional.

This section is defined using the resources element and the types of resources that can be specified include:
  • CSS files - One or more CSS files that will define the styles of all generated HTML pages. They are referenced using the css element.
  • Favicon - You can specify the path to an image for the favicon associated with your website. It is referenced using the favicon element.
  • Logo - You can specify the path to a logo image that will be displayed in the left side of the output header. It is referenced using the logo element. Optionally, you can also specify:
    • target-url - will redirect the user to the specified URL if they click the logo in the output.
    • alt - provides an alternate text for the logo image.
  • JavaScript AMD module - The path to a JavaScript module that uses the AMD (Asynchronous Module Definition) format. This module will be loaded in the output HTML pages using the RequireJS library. It can be referenced using the js-amd-module element. For more information, see How to Insert JavaScript AMD Modules in WebHelp Responsive Output.
  • Additional Resources (graphics, JS, fonts) - For other resources (such as images referenced in CSS, JS, fonts, etc.) that need to be included in the output, you need to instruct the transformation to include them in the output folder. You can specify one or more sets of additional resources to be copied to the output folder by using the fileset element and you can use one or more include and exclude elements. This semantic is similar to the ANT FileSet.
<publishing-template>
    ...
    <webhelp>
      ...                
      <resources>            
          <css file="css/custom_styles.css"/>
          <css file="css/custom_fonts.css"/>

          <favicon file="images/favicon.png"/>

          <logo 
           file="images/logo.png" 
           target-url="http://www.example.com"
           alt="Alternate text for the logo image"/>

          <js-amd-module file="js/template-main.js"/>

          <fileset>
              <include name="common/**/*"/>
              <include name="JS/**/*"/>              
              <exclude name="**/*.svn"/>
              <exclude name="**/*.git"/>
          </fileset>
      </resources>
Note: All relative paths specified in the descriptor file are relative to the template root folder.

The resources specified in the template descriptor are copied to the following output folder: [WebHelp_OUTPUT_DIR]/oxygen-webhelp/template. The following graphic illustrates the mapping between the template resources and the location where they will be copied to the output folder:

Figure 1: Template Resources Mapping

Edit online

You can also set one or more WebHelp transformation parameters in the descriptor file.
<publishing-template>
    ...    
    <webhelp>
      ...
      <parameters>
        <parameter 
          name="webhelp.show.main.page.toc" 
          value="yes"/>
        <parameter 
          name="webhelp.top.menu.depth" 
          value="3"/>        
        <parameter 
          name="webhelp.fragment.welcome" 
          value="html-fragment/webhelp.fragment.welcome.html" 
          type="filePath"/>        
      </parameters>
    </webhelp>

The following information can be specified in the parameter element:

Parameter name

The name of the parameter. It may be one of the WebHelp Responsive transformation parameters or a DITA-OT HTML-based output parameter.

Note: It is not recommended to specify an input/output parameter in the descriptor file (such as the input Map, DITAVAL file, or temporary directory).
Attention: JVM arguments like -Xmx cannot be specified as a transformation parameter.
Parameter Value
The value of the parameter. It should be a relative path to the template root folder for file paths parameters.
Parameter Type
The type of the parameter: string or filepath. The string value is default.

After creating a publishing template and adding it to the templates gallery, when you select the template in the transformation scenario dialog box in Oxygen XML Editor/Author, the Parameters tab will automatically be updated to include the parameters defined in the descriptor file. These parameters are displayed in italics.

Edit online

The publishing templates support one or more XSLT extension points. They are helpful when you want to change the structure of the HTML pages that are primarily generated from XSLT processing. They can be specified in the descriptor file using the following structure:
<publishing-template>
    ...
    <webhelp>
        ...        
        <xslt>
            <extension 
              id="com.oxygenxml.webhelp.xsl.dita2webhelp"
              file="xsl/customDita2webhelp.xsl"/>
            <extension
              id="com.oxygenxml.webhelp.xsl.createMainPage"
              file="xsl/customMainPage.xsl"/>
        </xslt>
For more information, and a full list of the available extension points, see: XSLT-Import and XSLT-Parameter Extension Points.
Note: You can read the value of a WebHelp transformation parameter from your XSLT extension stylesheets by using the getParameter(param.name) function from the http://www.oxygenxml.com/functions namespace.

Edit online

The HTML pages contain component placeholders that can be used to insert custom HTML fragments (either a well-formed XHTML fragment or a path to a file that contains a well-formed XHTML fragment).

You can specify one or more HTML fragment extension points in the descriptor file using the following structure:
<publishing-template>
    ...    
    <webhelp>
      ...
      <html-fragments>
        <fragment 
          file="html-fragments/webhelp_fragment_welcome.html" 
          placeholder="webhelp.fragment.welcome"/>
        <fragment 
          file="html-fragments/webhelp_fragment_footer.html" 
          placeholder="webhelp.fragment.footer"/>
      </html-fragments>

Some of these placeholders are left empty in the default output configurations, but you can use them to insert custom content.

Each placeholder has an associated parameter value in the transformation. These predefined placeholders are illustrated and described below.

Figure 2: Predefined Placeholders Diagram
HeaderBefore BodyBefore Logo and TitleAfter Logo and TitleBefore Top MenuAfter Top MenuBefore Main Page Search InputWelcome MessageAfter Main Page Search InputBefore Tiles or TOCAfter Tiles or TOCFooterAfter Body
Each of these placeholders can hold either a well-formed XHTML fragment or a path to a file that contains a well-formed XHTML fragment:
1- webhelp.fragment.head
In the generated output it inserts a given XHTML fragment in the <head> element. The value of the parameter can be either a well-formed XHTML fragment or a path to a file that contains a well-formed XHTML fragment.
2- webhelp.fragment.before.body
In the generated output it displays a given XHTML fragment before the page body. The value of the parameter can be either a well-formed XHTML fragment or a path to a file that contains a well-formed XHTML fragment.
3- webhelp.fragment.before.logo_and_title
In the generated output it displays a given XHTML fragment before the logo and title. The value of the parameter can be either a well-formed XHTML fragment or a path to a file that contains a well-formed XHTML fragment.
4- webhelp.fragment.after.logo_and_title
In the generated output it displays a given XHTML fragment after the logo and title. The value of the parameter can be either a well-formed XHTML fragment or a path to a file that contains a well-formed XHTML fragment.
5- webhelp.fragment.before.top_menu
In the generated output it displays a given XHTML fragment before the top menu. The value of the parameter can be either a well-formed XHTML fragment or a path to a file that contains a well-formed XHTML fragment.
6- webhelp.fragment.after.top_menu
In the generated output it displays a given XHTML fragment after the top menu. The value of the parameter can be either a well-formed XHTML fragment or a path to a file that contains a well-formed XHTML fragment.
In the generated output it displays a given XHTML fragment before the search field. The value of the parameter can be either a well-formed XHTML fragment or a path to a file that contains a well-formed XHTML fragment.
8- webhelp.fragment.welcome
In the generated output it displays a given XHTML fragment as a welcome message (or title). The value of the parameter can be either a well-formed XHTML fragment or a path to a file that contains a well-formed XHTML fragment.
In the generated output it displays a given XHTML fragment after the search field. The value of the parameter can be either a well-formed XHTML fragment or a path to a file that contains a well-formed XHTML fragment.
10- webhelp.fragment.before.toc_or_tiles
In the generated output it displays a given XHTML fragment before the table of contents or tiles in the main page. The value of the parameter can be either a well-formed XHTML fragment or a path to a file that contains a well-formed XHTML fragment.
11- webhelp.fragment.after.toc_or_tiles
In the generated output it displays a given XHTML fragment after the table of contents or tiles in the main page. The value of the parameter can be either a well-formed XHTML fragment or a path to a file that contains a well-formed XHTML fragment.
In the generated output it displays a given XHTML fragment as the page footer. The value of the parameter can be either a well-formed XHTML fragment or a path to a file that contains a well-formed XHTML fragment.
13- webhelp.fragment.after.body
In the generated output it displays a given XHTML fragment after the page body. The value of the parameter can be either a well-formed XHTML fragment or a path to a file that contains a well-formed XHTML fragment.

Edit online

You can use the whc:macro layout component to specify a macro value (a variable that will be expanded when the output files are generated).

A macro has the following syntax:
${macro-name}
or
${macro-name(macro-parameter)}

A macro name can accept any alphanumeric characters, as well as the following characters: - (minus), _ (underscore), . (dot), : (colon). The value of a parameter may contain any character except the } (close curly bracket) character.

Implementations

The following macros are supported:
i18n
For localizing a string.
${i18n(string.id)}
param
Returns the value of a transformation parameter.
${param(webhelp.show.main.page.tiles)}
env
Returns the value of an environment variable.
${env(JAVA_HOME)}
system-property
Returns the value of a system property.
${system-property(os.name)}
timestamp
Can be used to format the current date and time. Accepts a string (as a parameter) that determines how the date and time will be formatted (format string or picture string as it is known in the XSLT specification). The format string must comply with the rules of the XSLT format-dateTime function specification.
${timestamp([h1]:[m01] [P] [M01]/[D01]/[Y0001])}
path
Returns the path associated with the specified path ID. The following paths IDs are supported:
  • oxygen-webhelp-output-dir - The path to the output directory. The path is relative to the current HTML file.
  • oxygen-webhelp-assets-dir - The path to the oxygen-webhelp subdirectory from the output directory. The path is relative to the current HTML file.
  • oxygen-webhelp-template-dir - The path to the template directory. The path is relative to the current HTML file.
    ${path(oxygen-webhelp-template-dir)} 
Note: New paths IDs can be added by overriding the wh-macro-custom-path template from com.oxygenxml.webhelp.responsive\xsl\template\macroExpander.xsl:
<!-- Extension template for expanding a custom path macro. -->
<xsl:template name="wh-macro-custom-path">
    <xsl:param name="pathId"/>
    <xsl:value-of select="$pathId"/>
</xsl:template>     
map-xpath
Can be used to execute an XPath expression over the DITA map file from the temporary directory.
Tip: Available in all template layout HTML pages.
${map-xpath(/map/title)}
topic-xpath
Can be used to execute an XPath expression over the current topic.
Tip: Available only in the topic HTML page template (wt_topic.html).
${topic-xpath(string-join(//shortdesc//text(), ' '))}
oxygen-webhelp-build-number
Returns the current WebHelp distribution ID (build number).
${oxygen-webhelp-build-number}

Extensibility

To add new macros, you can add an XSLT extension to overwrite the wh-macro-extension template from the com.oxygenxml.webhelp.responsive\xsl\template\macroExpander.xsl file.
<!-- Extension template for expanding custom macro constructs -->
<xsl:template name="wh-macro-extension">
    <xsl:param name="name"/>
    <xsl:param name="params"/>
    <xsl:param name="contextNode"/>
    <xsl:param name="matchedString"/>
    
    <xsl:choose>
        <xsl:when test="$contextNode instance of attribute()">
            <xsl:value-of select="$matchedString"/>
        </xsl:when>
        <xsl:otherwise>
            <xsl:message>Cannot expand macro: 
                [<xsl:value-of select="$matchedString"/>]</xsl:message>
            <xsl:copy-of select="$contextNode"/>
        </xsl:otherwise>
    </xsl:choose>
</xsl:template>
The wh-macro-extension template has the following parameters:
  • name - The name of the current macro.
  • params - List of parameters of the current macro as string sequence. The current macros parsing mechanism only allows macros with a maximum of one parameter. Consequently, this list will contain at most one element.
  • contextNode - The current element or attribute where the macro was declared.
  • matchedString - The entire value of the matched macro as specified in the HTML template page.

Edit online

The HTML page layout files define the default layout of the generated pages in the output for the built-in template. There are four types of pages (main, search, topic, index) and each type of page is a simple HTML file. Each page type has various components that appear by default and each component has a corresponding element and when that element is included in the HTML file, the corresponding components will appear in the output.
Warning: It is no longer recommended for you to customize these files because if you upgrade to a newer version of Oxygen, those files may no longer produce the desired results and if new components have been added, you won't have access to them.
If you do choose to customize these HTML files, each type of page is defined inside an html-page-layout-files element in the descriptor file.
<publishing-template>
      ...
      <webhelp>
      ...
      <!-- HTML page layout files -->
      <html-page-layout-files>
        <page-layout-file page="main" file="page-templates/wt_index.html"/>
        <page-layout-file page="search" file="page-templates/wt_search.html"/>
        <page-layout-file page="topic" file="page-templates/wt_topic.html"/>
        <page-layout-file page="index-terms" file="page-templates/wt_terms.html"/>
      </html-page-layout-files>

If you do use the html-page-layout-files element, you must specify all four types of pages (main, search, topic, index). When not specified, the files from the DITA-OT-DIR/plugins/com.oxygenxml.webhelp.responsive/oxygen-webhelp/page-templates folder will be used to define the layout of each type of page.

HTML Page Components

Each type of page contains various components that control the layout of that page. The rendering of each component depends on the context where it is placed and its content depends on the transformed DITA map.

Some of the components can be used in all four types of pages, while some are only available for certain pages. For instance, the Publication Title component can be used in all pages, but the Navigation Breadcrumb component can only be used in the Topic Page.

To include a component in the output of a particular type of page, you have to reference a specific element in that particular HTML file. All the elements associated with a component should belong to the http://www.oxygenxml.com/webhelp/components namespace.

Every component can contain custom content or reference another component. To specify where the component content will be located in the output, you can use the whc:component_content element as a descendant of the component element. It can specify the location as before, after, or it can wrap the component content. The following snippet contains an example of each:
<whc:webhelp_search_input class="navbar-form wh_main_page_search"
       role="form" >
       <div class="custom-content-before">Enter search terms here:</div> 
	<div class="custom-wrapper">
	        <whc:component_content/>
	</div>
       <div class="custom-content-after">Results will be displayed in a new window.</div>
</whc:webhelp_search_input>

Main Page

The Main Page is the home page generated in the WebHelp Responsive output. The name of the HTML file that defines this page is wt_index.html and it is located in the following directory: DITA-OT-DIR/plugins/com.oxygenxml.webhelp.responsive/oxygen-webhelp/page-templates.

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 HTML page produced for the home page also consists of various other components, such as a logo, title, menu, search field, or index link.

Figure 3: Examples of Main Page Components for a Tiles Style of Layout
Publication LogoPublication TitleSearch InputMain MenuIndex Terms LinkTopic TilesPrint Link
Figure 4: Examples of Main Page Components for a Tree Style of Layout
Publication LogoPublication TitleSearch InputMain MenuIndex Terms LinkTable of ContentsPrint Link
The following components can be referenced in the Main Page (wt_index.html) file:
Publication Title (webhelp_publication_title)
This component generates the publication title in the output. To generate this component, the webhelp_publication_title element must be specified in the HTML file as in the following example:
<whc:webhelp_publication_title 
     xmlns:whc="http://www.oxygenxml.com/webhelp/components"/>

In the output, you will find an element with the class: wh_publication_title.

This component generates a logo image in the output. To generate this component, the webhelp_logo element must be specified in the HTML file as in the following example:
<whc:webhelp_logo 
     xmlns:whc="http://www.oxygenxml.com/webhelp/components"/>

In addition, you must also specify the path of the logo image in the webhelp.logo.image transformation parameter (in the Parameters tab in the transformation scenario). You can set the webhelp.logo.image.target.url parameter to generate a link to a URL when you click the logo image.

In the output, you will find an element with the class: wh_logo.

Search Input (webhelp_search_input)
This component is used to generate the input widget associated with search function in the output. To generate this component, the webhelp_search_input element must be specified in the HTML file as in the following example:
<whc:webhelp_search_input 
     xmlns:whc="http://www.oxygenxml.com/webhelp/components"/>

In the output, you will find an element with the class: wh_search_input.

Print Link (webhelp_print_link)
This component is used to generate a print icon that opens the print dialog box for your particular browser. To generate this component, the webhelp_print_link element must be specified in the HTML file as in the following example:
<whc:webhelp_print_link 
     xmlns:whc="http://www.oxygenxml.com/webhelp/components"/>

In the output, you will find an element with the class: wh_print_link.

Main Menu (webhelp_top_menu)
This component generates a menu with all the documentation topics. To generate this component, the webhelp_top_menu element must be specified in the HTML file as in the following example:
<whc:webhelp_top_menu 
     xmlns:whc="http://www.oxygenxml.com/webhelp/components"/>

In the output, you will find an element with the class: wh_top_menu.

You can control the maximum level of topics that will be included in the menu using the webhelp.top.menu.depth transformation parameter (in the Parameters tab of the transformation scenario).

For information about customizing the menu, see How to Customize the Menu.

Main Page Topic Tiles (webhelp_tiles)
This component generates the tiles section in the main page. This section will contain a tile for each root topic of the published documentation. Each topic tile has three sections that correspond to the topic title, short description, and image. To generate this component, the webhelp_tiles element must be specified in the HTML file as in the following example:
<whc:webhelp_tiles 
     xmlns:whc="http://www.oxygenxml.com/webhelp/components"/>

In the output, you will find an element with the class: wh_tiles.

If you want to control the HTML structure that is generated for a WebHelp tile you can also specify the template for a tile by using the whc:webhelp_tile component, as in the following example:

<whc:webhelp_tile class="col-md-4">                    
  <!-- Place holder for tile's image -->
  <whc:webhelp_tile_image/>                        
                    
  <div class="wh_tile_text">
    <!-- Place holder for tile's title -->
     <whc:webhelp_tile_title/>
                       
     <!-- Place holder for tile's shordesc -->
     <whc:webhelp_tile_shortdesc/>
  </div>
</whc:webhelp_tile>

For information about customizing the tiles, see How to Configure the Tiles on the WebHelp Responsive Main Page.

Main Page Table of Contents (webhelp_main_page_toc)
This component generates a simplified Table of Contents. It is simplified because it contains only two levels from the documentation hierarchy. To generate this component, the webhelp_main_page_toc element must be specified in the HTML file as in the following example:
<whc:webhelp_main_page_toc 
     xmlns:whc="http://www.oxygenxml.com/webhelp/components"/>

In the output, you will find an element with the class: wh_main_page_toc.

This component can be used to generate a link to the index terms page (indexterms.html). If the published documentation does not contain any index terms, then the link will not be generated. To generate this component, the webhelp_indexterms_link element must be specified in the HTML file as in the following example:
<whc:webhelp_indexterms_link 
     xmlns:whc="http://www.oxygenxml.com/webhelp/components"/>

In the output, you will find an element with the class: wh_indexterms_link. This element will contain a link to the indexterms.html page.

Link to Skins Resources (webhelp_skin_resources)
This component can be used to add a link to resources for the current WebHelp skin (such as the CSS file). To generate this component, the webhelp_skin_resources element must be specified in the HTML file as in the following example:
<whc:webhelp_skin_resources/>

In the output, you will find a link to the skin resources.

Topic Page

The Topic Page is the page generated for each DITA topic in the WebHelp Responsive output. The name of the HTML file that defines this page is wt_topic.html and it is located in the following directory: DITA-OT-DIR/plugins/com.oxygenxml.webhelp.responsive/oxygen-webhelp/page-templates.

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: Examples of Topic Page Components
Publication LogoPublication TitleSearch InputMain MenuIndex Terms LinkExpand/Collapse All SectionsNavigation LinksPrint LinkBreadcrumbPublication Table of ContentsTopic ContentTopic Table of Contents

The following components can be referenced in the Topic Page (wt_topic.html) file:

Publication Title (webhelp_publication_title)
This component generates the publication title in the output. To generate this component, the webhelp_publication_title element must be specified in the HTML file as in the following example:
<whc:webhelp_publication_title 
     xmlns:whc="http://www.oxygenxml.com/webhelp/components"/>

In the output, you will find an element with the class: wh_publication_title.

This component generates a logo image in the output. To generate this component, the webhelp_logo element must be specified in the HTML file as in the following example:
<whc:webhelp_logo 
     xmlns:whc="http://www.oxygenxml.com/webhelp/components"/>

In addition, you must also specify the path of the logo image in the webhelp.logo.image transformation parameter (in the Parameters tab in the transformation scenario). You can set the webhelp.logo.image.target.url parameter to generate a link to a URL when you click the logo image.

In the output, you will find an element with the class: wh_logo.

Search Input (webhelp_search_input)
This component is used to generate the input widget associated with search function in the output. To generate this component, the webhelp_search_input element must be specified in the HTML file as in the following example:
<whc:webhelp_search_input 
     xmlns:whc="http://www.oxygenxml.com/webhelp/components"/>

In the output, you will find an element with the class: wh_search_input.

Topic Breadcrumb (webhelp_breadcrumb)
This component generates a breadcrumb that displays the path of the current topic. To generate this component, the webhelp_breadcrumb element must be specified in the HTML file as in the following example:
<whc:webhelp_breadcrumb 
     xmlns:whc="http://www.oxygenxml.com/webhelp/components"/>

In the output, you will find an element with the class: wh_breadcrumb. This element will contain a list with items that correspond to the topics in the path. The first item in the list has a link to the main page with the home class. The last item in the list corresponds to the current topic and has the active class set.

This component generates navigation links to the next and previous topics. To generate this component, the webhelp_navigation_links element must be specified in the HTML file as in the following example:
<whc:webhelp_navigation_links 
     xmlns:whc="http://www.oxygenxml.com/webhelp/components"/>

In the output, you will find an element with the class: wh_navigation_links. This element will contain the links to the next and previous topics.

Print Link (webhelp_print_link)
This component is used to generate a print icon that opens the print dialog box for your particular browser. To generate this component, the webhelp_print_link element must be specified in the HTML file as in the following example:
<whc:webhelp_print_link 
     xmlns:whc="http://www.oxygenxml.com/webhelp/components"/>

In the output, you will find an element with the class: wh_print_link.

Topic Content (webhelp_topic_content)
This component generates the content of a topic and it represent the content of the HTML files as they are produced by the DITA-OT processor. To generate this component, the webhelp_topic_content element must be specified in the HTML file as in the following example:
<whc:webhelp_topic_content 
     xmlns:whc="http://www.oxygenxml.com/webhelp/components"/>

In the output, you will find an element with the class: wh_topic_content.

Publication TOC (webhelp_publication_toc)
This component generates a mini table of contents for the current topic (on the left side). It will contain links to the children of current topic, its siblings, and all of its ancestors. To generate this component, the webhelp_publication_toc element must be specified in the HTML file as in the following example:
<whc:webhelp_publication_toc 
     xmlns:whc="http://www.oxygenxml.com/webhelp/components"/>

In the output, you will find an element with the class: wh_publication_toc. This element will contain links to the topics that are close to the current topic.

Topic TOC (webhelp_topic_toc)
This component generates a topic table of contents for the current topic (on the right side) with a heading named On this page. It contains links to each section within the current topic and the section corresponding to the current scroll position is highlighted. The topic must contain at least two <section> elements and each <section> must have an @id attribute. To generate this component, the webhelp_topic_toc element must be specified in the HTML file as in the following example:
<whc:webhelp_topic_toc 
     xmlns:whc="http://www.oxygenxml.com/webhelp/components"/>

In the output, you will find an element with the class: wh_topic_toc. This element will contain links to the topics that are close to the current topic.

Expand/Collapse Sections (webhelp_expand_collapse_sections)
This component is used to generate an icon that expands or collapses sections listed in the side table of contents within a topic. To generate this component, the webhelp_expand_collapse_sections element must be specified in the HTML file as in the following example:
<whc:webhelp_expand_collapse_sections 
     xmlns:whc="http://www.oxygenxml.com/webhelp/components"/>

In the output, you will find an element with the class: webhelp_expand_collapse_sections.

Topic Feedback (webhelp_feedback)
This component generates a placeholder for where the comments section will be presented. To generate this component, the webhelp_feedback element must be specified in the HTML file as in the following example:
<whc:webhelp_feedback 
     xmlns:whc="http://www.oxygenxml.com/webhelp/components"/>
Main Menu (webhelp_top_menu)
This component generates a menu with all the documentation topics. To generate this component, the webhelp_top_menu element must be specified in the HTML file as in the following example:
<whc:webhelp_top_menu 
     xmlns:whc="http://www.oxygenxml.com/webhelp/components"/>

In the output, you will find an element with the class: wh_top_menu.

You can control the maximum level of topics that will be included in the menu using the webhelp.top.menu.depth transformation parameter (in the Parameters tab of the transformation scenario).

For information about customizing the menu, see How to Customize the Menu.

This component can be used to generate a link to the index terms page (indexterms.html). If the published documentation does not contain any index terms, then the link will not be generated. To generate this component, the webhelp_indexterms_link element must be specified in the HTML file as in the following example:
<whc:webhelp_indexterms_link 
     xmlns:whc="http://www.oxygenxml.com/webhelp/components"/>

In the output, you will find an element with the class: wh_indexterms_link. This element will contain a link to the indexterms.html page.

For all topics with subtopics (child topics), this component generates a list of links to each child topic. To generate this component, the webhelp_child_links element must be specified in the HTML file as in the following example:
<whc:webhelp_child_links 
     xmlns:whc="http://www.oxygenxml.com/webhelp/components"/>
For all topics that contain related links, this component generates a list of related links that will appear in the output. To generate this component, the webhelp_related_links element must be specified in the HTML file as in the following example:
<whc:webhelp_related_links 
     xmlns:whc="http://www.oxygenxml.com/webhelp/components"/>
Link to Skins Resources (webhelp_skin_resources)
This component can be used to add a link to resources for the current WebHelp skin (such as the CSS file). To generate this component, the webhelp_skin_resources element must be specified in the HTML file as in the following example:
<whc:webhelp_skin_resources/>

In the output, you will find a link to the skin resources.

Search Results Page

The Search Results Page is the page generated that present search results in the WebHelp Responsive output. The name of the HTML file that defines this page is wt_search.html and it is located in the following directory: DITA-OT-DIR/plugins/com.oxygenxml.webhelp.responsive/oxygen-webhelp/page-templates.

The HTML page that is produced consists of a search results component along with various other additional components, such as a title, menu, or index link.

Figure 6: Examples of Search Results Page Components
Publication LogoPublication TitleSearch InputMain MenuIndex Terms LinkSearch ResultsPrint Link

The following components can be referenced in the Search Results Page (wt_search.html) file:

Publication Title (webhelp_publication_title)
This component generates the publication title in the output. To generate this component, the webhelp_publication_title element must be specified in the HTML file as in the following example:
<whc:webhelp_publication_title 
     xmlns:whc="http://www.oxygenxml.com/webhelp/components"/>

In the output, you will find an element with the class: wh_publication_title.

This component generates a logo image in the output. To generate this component, the webhelp_logo element must be specified in the HTML file as in the following example:
<whc:webhelp_logo 
     xmlns:whc="http://www.oxygenxml.com/webhelp/components"/>

In addition, you must also specify the path of the logo image in the webhelp.logo.image transformation parameter (in the Parameters tab in the transformation scenario). You can set the webhelp.logo.image.target.url parameter to generate a link to a URL when you click the logo image.

In the output, you will find an element with the class: wh_logo.

Search Input (webhelp_search_input)
This component is used to generate the input widget associated with search function in the output. To generate this component, the webhelp_search_input element must be specified in the HTML file as in the following example:
<whc:webhelp_search_input 
     xmlns:whc="http://www.oxygenxml.com/webhelp/components"/>

In the output, you will find an element with the class: wh_search_input.

Search Results (webhelp_search_results)
This component is used to generate a placeholder to signal where the search results will be presented in the output. To generate this component, the webhelp_search_results element must be specified in the HTML file as in the following example:
<whc:webhelp_search_results 
     xmlns:whc="http://www.oxygenxml.com/webhelp/components"/>

In the output, you will find an element with the class: wh_search_results.

Print Link (webhelp_print_link)
This component is used to generate a print icon that opens the print dialog box for your particular browser. To generate this component, the webhelp_print_link element must be specified in the HTML file as in the following example:
<whc:webhelp_print_link 
     xmlns:whc="http://www.oxygenxml.com/webhelp/components"/>

In the output, you will find an element with the class: wh_print_link.

Main Menu (webhelp_top_menu)
This component generates a menu with all the documentation topics. To generate this component, the webhelp_top_menu element must be specified in the HTML file as in the following example:
<whc:webhelp_top_menu 
     xmlns:whc="http://www.oxygenxml.com/webhelp/components"/>

In the output, you will find an element with the class: wh_top_menu.

You can control the maximum level of topics that will be included in the menu using the webhelp.top.menu.depth transformation parameter (in the Parameters tab of the transformation scenario).

For information about customizing the menu, see How to Customize the Menu.

This component can be used to generate a link to the index terms page (indexterms.html). If the published documentation does not contain any index terms, then the link will not be generated. To generate this component, the webhelp_indexterms_link element must be specified in the HTML file as in the following example:
<whc:webhelp_indexterms_link 
     xmlns:whc="http://www.oxygenxml.com/webhelp/components"/>

In the output, you will find an element with the class: wh_indexterms_link. This element will contain a link to the indexterms.html page.

Link to Skins Resources (webhelp_skin_resources)
This component can be used to add a link to resources for the current WebHelp skin (such as the CSS file). To generate this component, the webhelp_skin_resources element must be specified in the HTML file as in the following example:
<whc:webhelp_skin_resources/>

In the output, you will find a link to the skin resources.

Index Terms Page

The Index Terms Page is the page generated that presents index terms in the WebHelp Responsive output. The name of the HTML file that defines this page is wt_terms.html and it is located in the following directory: DITA-OT-DIR/plugins/com.oxygenxml.webhelp.responsive/oxygen-webhelp/page-templates.

The HTML page that is produced 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.

Figure 7: Example of Index Terms Page Components
Publication LogoPublication TitleSearch InputMain MenuIndex Terms Link (webhelp_indexterms_link)Print Link

The following components can be referenced in the Index Terms Page (wt_terms.html) file:

Publication Title (webhelp_publication_title)
This component generates the publication title in the output. To generate this component, the webhelp_publication_title element must be specified in the HTML file as in the following example:
<whc:webhelp_publication_title 
     xmlns:whc="http://www.oxygenxml.com/webhelp/components"/>

In the output, you will find an element with the class: wh_publication_title.

This component generates a logo image in the output. To generate this component, the webhelp_logo element must be specified in the HTML file as in the following example:
<whc:webhelp_logo 
     xmlns:whc="http://www.oxygenxml.com/webhelp/components"/>

In addition, you must also specify the path of the logo image in the webhelp.logo.image transformation parameter (in the Parameters tab in the transformation scenario). You can set the webhelp.logo.image.target.url parameter to generate a link to a URL when you click the logo image.

In the output, you will find an element with the class: wh_logo.

Search Input (webhelp_search_input)
This component is used to generate the input widget associated with search function in the output. To generate this component, the webhelp_search_input element must be specified in the HTML file as in the following example:
<whc:webhelp_search_input 
     xmlns:whc="http://www.oxygenxml.com/webhelp/components"/>

In the output, you will find an element with the class: wh_search_input.

Print Link (webhelp_print_link)
This component is used to generate a print icon that opens the print dialog box for your particular browser. To generate this component, the webhelp_print_link element must be specified in the HTML file as in the following example:
<whc:webhelp_print_link 
     xmlns:whc="http://www.oxygenxml.com/webhelp/components"/>

In the output, you will find an element with the class: wh_print_link.

Main Menu (webhelp_top_menu)
This component generates a menu with all the documentation topics. To generate this component, the webhelp_top_menu element must be specified in the HTML file as in the following example:
<whc:webhelp_top_menu 
     xmlns:whc="http://www.oxygenxml.com/webhelp/components"/>

In the output, you will find an element with the class: wh_top_menu.

You can control the maximum level of topics that will be included in the menu using the webhelp.top.menu.depth transformation parameter (in the Parameters tab of the transformation scenario).

For information about customizing the menu, see How to Customize the Menu.

This component can be used to generate a link to the index terms page (indexterms.html). If the published documentation does not contain any index terms, then the link will not be generated. To generate this component, the webhelp_indexterms_link element must be specified in the HTML file as in the following example:
<whc:webhelp_indexterms_link 
     xmlns:whc="http://www.oxygenxml.com/webhelp/components"/>

In the output, you will find an element with the class: wh_indexterms_link. This element will contain a link to the indexterms.html page.

Link to Skins Resources (webhelp_skin_resources)
This component can be used to add a link to resources for the current WebHelp skin (such as the CSS file). To generate this component, the webhelp_skin_resources element must be specified in the HTML file as in the following example:
<whc:webhelp_skin_resources/>

In the output, you will find a link to the skin resources.

Edit online

An Oxygen Publishing Template package can contain both a WebHelp Responsive and PDF customization in the same template package and you can use that same template in both types of transformations. The template descriptor file can define the customization for both types by including both a webhelp and pdf element and some of the resources can be reused. Resources referenced in elements in the webhelp element will only be used for WebHelp transformations, and resources referenced in the elements in the pdf element will only be used in PDF transformations.
<publishing-template>
    <name>Flowers</name>
    <description>Flowers themed light-colored template</description>

    <webhelp>
        <tags>
            <tag>purple</tag>
            <tag>light</tag>
        </tags>
        <preview-image file="flowers-preview.png"/>
        <resources>
            <css file="flowers-wh.css"/>
            <css file="flowers-page-styling.css"/>
        </resources>
        <parameters>
            <parameter name="webhelp.show.main.page.tiles" value="no"/>
            <parameter name="webhelp.show.main.page.toc" value="yes"/>
        </parameters>
    </webhelp>
    <pdf>
        <tags>
            <tag>purple</tag>
            <tag>light</tag>
        </tags>
        <preview-image file="flowers-preview.png"/>
        <resources>
            <css file="flowers-pdf.css"/>
            <css file="flowers-page-styling.css"/>
        </resources>
        <parameters>
            <parameter name="show.changes.and.comments" value="yes"/>"/>
        </parameters>
    <pdf>
</publishing-template>