WebHelp Responsive: Place index in TOC (no "book" icon anymore)

[Anonymous1]

Hi,

the last chapter of our PDFs is always the index. Now with WebHelp, the index is not located in the TOC, but can be accessed via clicking the book icon.

Is there a way to handle the index like any ditamap and place it in the TOC?

[radu_pisoi]

Hi,

Could you give us more details about your requirements?

Do you want to customize the 'Webhelp Responsive' or 'Webhelp Classic' output? See http://oxygenxml.com/doc/versions/18.0/ ... utput.html.

If you are customizing the Webhelp Responsive output, do you want to move the Index button as the last tile in the main page?
http://oxygenxml.com/doc/versions/18.0/ ... plate.html

Or, do you want to move the Index button as the last item in the side TOC for each topic HTML page?
http://oxygenxml.com/doc/versions/18.0/ ... plate.html

[Anonymous1]

Hi Radu,

thanks for the links.

We are using the WebHelp Responsive output. My intention is to get rid of the Index Terms Links button (with the book icon). Instead, I want to have the link to the Index page in the table of contents menu. Like we do in our PDFs.

[radu_pisoi]

Hi,

I'm assuming you want to customize the HTML pages produced for each topic and you are using the DITA-OT 2.x which is the default DITA-OT framework starting with oXygen 18.

The Webhelp Responsive output is generated based on a templates mechanism, see
http://oxygenxml.com/doc/versions/18.0/ ... anism.html. So, you can simply modify the template to change the Webhelp output.

A procedure to move the Index terms component below the side TOC is:

1. Open the '{oXygenInstallDir}/frameworks/dita/DITA-OT2.x/plugins/com.oxygenxml.webhelp/templates/dita/bootstrap/header.xml' and delete the

Code: Select all

<whc:webhelp_indexterms_link/>

element. This is the component used to generate the Index button.

2. Open the'{oXygenInstallDir}/frameworks/dita/DITA-OT2.x/plugins/com.oxygenxml.webhelp/templates/dita/bootstrap/wt_topic.html' and replace the

Code: Select all

<whc:webhelp_side_toc/>

element with:

Code: Select all

<whc:webhelp_side_toc>

   <whc:component_content/>

     <whc:webhelp_indexterms_link/>

 </whc:webhelp_side_toc>

This will generate the Index button below the side TOC component.

3. You need a CSS customization, to replace the 'book' icon displayed by default with a 'Index' label. A sample CSS customization is:

Code: Select all

.wh_indexterms_link {

    float: none; 

}



/* Hide the before pseudo-element used to display the book icon */

.wh_indexterms_link a:before {

    display: none;

}



.wh_indexterms_link a span {

    display: inline-block;

    padding-left: 1em;

}

4. To set a customization CSS please follow the 'Customize WebHelp Output with a Custom CSS' procedure described in our documentation
http://oxygenxml.com/doc/versions/18.0/ ... ation.html

[Anonymous1]

That's exactly what I wanted. Thank you for the great description.