Webhelp Classic Customizing Header

<oXygen/> general issues.
jojobar
Posts: 13

Webhelp Classic Customizing Header

Wed Nov 02, 2016 9:10 pm

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
Site Admin
Posts: 111

Re: Webhelp Classic Customizing Header

Fri Nov 04, 2016 3:14 pm

Hello,

Please find my answers below:

jojobar wrote: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/18.1/ug-editor/topics/wh-add-custom-html-classic-x-publishing2.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/18.1/ug-editor/tasks/copy_resources.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/18.1/ug-editor/topics/webhelp-customization-css.html

jojobar wrote: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/18.1/ug-editor/tasks/integrate-google-search.html
Alin Balasa
Software Developer
<oXygen/> XML Editor
http://www.oxygenxml.com
jojobar
Posts: 13

Re: Webhelp Classic Customizing Header

Sat Nov 05, 2016 12:31 am

alin wrote: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/18.1/ug-editor/topics/wh-add-custom-html-classic-x-publishing2.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/18.1/ug-editor/tasks/copy_resources.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/18.1/ug-editor/topics/webhelp-customization-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
Site Admin
Posts: 111

Re: Webhelp Classic Customizing Header

Mon Nov 07, 2016 11:22 am

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.
Alin Balasa
Software Developer
<oXygen/> XML Editor
http://www.oxygenxml.com

Return to “Other Issues”

Who is online

Users browsing this forum: Bing [Bot] and 3 guests