Adding buttons to webhelp classic header

<oXygen/> general issues.
kmank
Posts: 79

Adding buttons to webhelp classic header

Tue Jan 17, 2017 8:24 pm

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

Re: Adding buttons to webhelp classic header

Thu Jan 19, 2017 12:51 pm

Hello,


kmank wrote: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/18.1/ug-editor/topics/wh-add-custom-html-classic-x-publishing2.html

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

Re: Adding buttons to webhelp classic header

Thu Mar 16, 2017 5:34 pm

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

Return to “Other Issues”

Who is online

Users browsing this forum: No registered users and 2 guests