Adding buttons to webhelp classic header

Oxygen general issues.
kmank
Posts: 118
Joined: Mon Apr 19, 2010 5:33 pm

Adding buttons to webhelp classic header

Post by 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
Site Admin
Posts: 268
Joined: Thu Dec 24, 2009 11:21 am

Re: Adding buttons to webhelp classic header

Post by alin »

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/ ... hing2.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: 118
Joined: Mon Apr 19, 2010 5:33 pm

Re: Adding buttons to webhelp classic header

Post by kmank »

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