How to use a customized webhelp header

Post here questions and problems related to editing and publishing DITA content.
catherine
Posts: 158
Joined: Fri Nov 10, 2017 8:16 am

How to use a customized webhelp header

Post by catherine »

Hi, I want to customize the webhlep header and menus, submenus.
I wish to have the same web header with our website.
I have created a header css that is in the smae style with our website, and tested it with the oxygen webhelp index.html, it worked.
But, for the topic pages, the header didn't change.

Now, my problem is, how to use my css file as a template or global web header for my webhelp.

or, anyway to change the global web header?
cosmin_andrei
Posts: 138
Joined: Mon Jun 12, 2017 10:50 am

Re: How to use a customized webhelp header

Post by cosmin_andrei »

Hi Catherine,

Thank you for contacting us.

To investigate what happens, we need some more details regarding this:

- What version of Oxygen are you using?
- How do you initiate the transformation: from Oxygen (via a transformation scenario) or from the command line?
Regards,
Cosmin
--
Cosmin Andrei
oXygen XML Editor and Author Support
catherine
Posts: 158
Joined: Fri Nov 10, 2017 8:16 am

Re: How to use a customized webhelp header

Post by catherine »

Hi, cosmin,
Thanks for your reply. I'm using Oxygen v18.
What I did was just editing the index.html file directly. I didn't change the transformation values and generate from Oxygen.
That is my question, how to change a webhelp header gobally using Oxygen.
I want to change the whole header, including the css styles the naviagtions, the logo and generate a webhelp using my customized html file and css file. Is it possible to achieve it?

By the way, I followed the instructions in following discussion, but didn't work for me: post40351.html?hilit=customize%20header#p40351

1. I create a html file like the following:

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>
2. I set the webhelp transformation value webhelp.fragment.after.top_menu to the customized html file. But the icon/image dispaly after the the header logo, NOT after top menu.
3. I also tested with the value webhelp.fragment.after.logo_and_title, and webhelp.fragment.before.logo_and_title, it also didn't as expected. The icon/image doesn't display on the desired location.
Post Reply