Adding buttons to webhelp classic header

[kmank]

I am need of adding a button next to the oldframes and printlink button (top right in the framesLink div).
I understand that images can be utilized as Base64 in the CSS skin, and I have created a class in webhelp_topic.css.
Can anyone provide some pointers on the files involved in working with these?

[alin]

Hello,

I am need of adding a button next to the oldframes and printlink button (top right in the framesLink div).

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 JavaScript code that inserts the button in the desired location.

Code: Select all

      <script type="text/javascript">

          <!--

              $( document ).ready(function() {

                    $('.framesLink').prepend('<button onclick="myFunction()" class="toolbar-btn">Btn</button>');

                  }

              );

    

              function myFunction() {

                  // Add your code here

    

              }

          //-->

      </script>

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

I understand that images can be utilized as Base64 in the CSS skin, and I have created a class in webhelp_topic.css.

First of all, it would be better to keep your JS and/or CSS customizations in separate files, outside the Oxygen installation directory and refer them using the available parameters.
Doing so, the built-in WebHelp files are not modified and it will be easier to update the WebHelp plugin to the latest version in the future.

You can apply CSS styles on the generated button by contributing a custom CSS file to the WebHelp transformation.

For example:

Code: Select all

.toolbar-btn {

    /* Add your styles here. */



}

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

[kmank]

Worked beautifully, Alin - thank you. It appears I need to learn more about javascript in the DOM.