Customize Webhelp Header

[catherine]

Hi,
Is there any way that I can add my customized HTML fragment that contains my desired navigation menus, the customized css file for webhelp header in Oxygen Editor? In this way, I can have my customized webhelp header in each topics.

If it is not possible to customize the whole webhelp header, is there any way to change the navigation menus in Oxygen Editor?
I don't want to show the default generated top-menus, so I set the value

Code: Select all

webhelp.show.top.menu

to

Code: Select all

no

.

The question is, how to add my customized navigation menus on the webhelp header?

Will appreciate for your response.

[Costin]

Hi Catherine,

Is there any way that I can add my customized HTML fragment that contains my desired navigation menus, the customized css file for webhelp header in Oxygen Editor? In this way, I can have my customized webhelp header in each topics.

In case you need the entire header of the WebHelp Responsive output to be replaced by your own, there is a parameter in the DITA Map WebHelp Responsive transformation scenario that you could use for this purpose.
Just duplicate and edit the scenario and, in the "Parameters" tab look for the "webhelp.fragment.before.body" parameter. It is used to add XHTML content just before the WebHelp Responsive page body.
As the parameter value, you should pass a well-formed XHTML fragment or the path to an XHTML file.

As the XHTML fragment, you could insert your custom header. Of course, for the header to look as you need, you should make sure to also include any additional styling or java scripts used to define the menu style and functionality.

I addition, there are other parameters like the one I mentioned above, to change only specific elements from the header or other parts of the output and these parameters are described in THIS PAGE from the User-Guide.

Also, to have a clear view of the elements from the WebHelp Responsive output layout, you could take a look at THIS PAGE.

I hope this helps and let me know if you need additional information.

Regards,
Costin

[catherine]

Hi, Costin
Thanks for your reply.
I add a sentence in my fragment XHMTL to use my css file, like the following:

Code: Select all

  <link rel="stylesheet" href="nav.css" type="text/css" > 

When I open the XHTML file, the webhelp header displays.
But when I set the parameter

Code: Select all

webhelp.fragment.before.body

to my XHTML file, and
set

Code: Select all

args.css

to my css file, also I set

Code: Select all

args.copycss

to yes.

The webhelp header didn't display at all. The webhelp page dispaly the file path of my XHTML file.

I manaully copied my XHTML file content to the index.html file, and then open the index page, the webhelp header displays!
May I know what is wrong with my issue?
What should I do?

[Costin]

Hi, Catherine!

The webhelp header didn't display at all. The webhelp page dispaly the file path of my XHTML file.

Usually, this occurs if the XHTML file referred is not well-formed. Therefore, the first thing you should do is check the XHTML file for well-formedness to make sure you refer a well-formed fragment.
To do that, just open the XHTML file in oXygen, then in the oXygen menu go to Document > Validate > Check Well-Formedness.
In case it is not, correct the XHTML bringing it to a well-formed form, then save it and retry using it as a value for the "webhelp.fragment.before.body" parameter.

Please make sure you provide an absolute path as value, pointing to the local XHTML file.

Regarding the line you added in order to use a custom .css file

Code: Select all

<link rel="stylesheet" href="nav.css" type="text/css">

, please note that you should use a macro before the nav.css in the "href" attribute.
In order to have a better idea on how you could use macros, check for well-formedness and how to insert HTML content in your WebHelp Responsive output, please take a look at THIS PAGE from our User-Guide.
Specifically, in the example from the above mentioned page, we use "href="${oxygen-webhelp-output-dir}/css/test.css""

Regards,
Costin

[catherine]

Thanks, Costin!
It works perfect for me now!