Webhelp Classic Customizing Header

[jojobar]

I would like to do the following customization:

1. I would like to put some icons on the header of the webhelp (classic) so that user can download pdf and chm version of the help files.

2. Also, I would like to replace the search with my own search (for example google custom search)

Can someone give me direction where I should start from and which file(s) I can customize to do this?

[alin]

Hello,

Please find my answers below:

1. I would like to put some icons on the header of the webhelp (classic) so that user can download pdf and chm version of the help files.

You can achieve this by contributing an XHTML fragment to the transformation scenario. This fragment will be inserted in the HTML files generated by the WebHelp transformation.

The XHTML fragment should contain the links to the PDF and CHM files. For example:

Code: Select all

<div class="links">

    <div class="pdf-link">

        <a href="${oxygen-webhelp-output-dir}/pdf/flowers.pdf">

            <img src="${oxygen-webhelp-output-dir}/pdf/pdf-icon.png"/>

        </a>

    </div>

    <div class="chm-link">

        <a href="${oxygen-webhelp-output-dir}/chm/flowers.chm">

            <img src="${oxygen-webhelp-output-dir}/chm/chm-icon.png"/>

        </a>

    </div>

</div>

Note that the links use the "${oxygen-webhelp-output-dir}" macro in order to specify the paths relative to the WebHelp output directory.

You can find the procedure of including custom HTML content in your WebHelp output files at:
https://www.oxygenxml.com/doc/versions/ ... hing2.html

The PDF and CHM files and the icons for the links should be copied to the WebHelp output directory. The steps to do this can be found at:
https://www.oxygenxml.com/doc/versions/ ... urces.html

In my example the additional resources were placed in a folder named "docs" as below. The path of this folder should be configured in the transformation scenario as described in the above procedure.

Code: Select all

docs

  -- pdf

    -- flowers.pdf

    -- pdf-icon.png

  -- chm

    -- flowers.chm

    -- chm-icon.png  

You can also apply CSS styles on the generated links by contributing a custom CSS file to the WebHelp transformation.
For example:

Code: Select all

.pdf-link {

    /* Add your styles here. */



}

This procedure can be found at: https://www.oxygenxml.com/doc/versions/ ... n-css.html

2. Also, I would like to replace the search with my own search (for example google custom search)

You can read about this in our User Manual: https://www.oxygenxml.com/doc/versions/ ... earch.html

[jojobar]

Hello,

The XHTML fragment should contain the links to the PDF and CHM files. For example:

Code: Select all

<div class="links">

    <div class="pdf-link">

        <a href="${oxygen-webhelp-output-dir}/pdf/flowers.pdf">

            <img src="${oxygen-webhelp-output-dir}/pdf/pdf-icon.png"/>

        </a>

    </div>

    <div class="chm-link">

        <a href="${oxygen-webhelp-output-dir}/chm/flowers.chm">

            <img src="${oxygen-webhelp-output-dir}/chm/chm-icon.png"/>

        </a>

    </div>

</div>

Note that the links use the "${oxygen-webhelp-output-dir}" macro in order to specify the paths relative to the WebHelp output directory.

You can find the procedure of including custom HTML content in your WebHelp output files at:
https://www.oxygenxml.com/doc/versions/ ... hing2.html

The PDF and CHM files and the icons for the links should be copied to the WebHelp output directory. The steps to do this can be found at:
https://www.oxygenxml.com/doc/versions/ ... urces.html

In my example the additional resources were placed in a folder named "docs" as below. The path of this folder should be configured in the transformation scenario as described in the above procedure.

Code: Select all

docs

  -- pdf

    -- flowers.pdf

    -- pdf-icon.png

  -- chm

    -- flowers.chm

    -- chm-icon.png  

You can also apply CSS styles on the generated links by contributing a custom CSS file to the WebHelp transformation.
For example:

Code: Select all

.pdf-link {

    /* Add your styles here. */



}

This procedure can be found at: https://www.oxygenxml.com/doc/versions/ ... n-css.html

Well I tried this and created the file you suggested after reading the link suggested above.

1. I went to the parameters tab of the webhelp classic transformation and could not find webhelp.body.script and created a new property with this name.

2. Then I copied your code to a file and specified the file location there. After running the transformation the file content could not be found in the output.

3. I then changed the location to a url sith "file://" syntax still no joy.

[alin]

Hello,

First of all, the procedure described in my previous post is valid for oXygen / WebHelp Plugin 18.1.

1.

... could not find webhelp.body.script and created a new property with this name.

This means you have an older version of oXygen.

2 & 3. Indeed, the value for this parameter should be an URL. There is an error in our User Manual and will be fixed shortly.