Webhelp responsive template - customize header

davdup
Posts: 14
Joined: Wed May 29, 2019 5:43 pm

Webhelp responsive template - customize header

Post by davdup » Thu Jun 06, 2019 10:41 am

Hi again,
I would like to do a simple customisation to the Webhelp Responsive template, but I'm struggling to locate the right resources (XSL files, xml templates...?).
I would like to replace the publication title link on the top left corner by an image, without text. (Home icon basically)... I've tried with CSS, where I manage to place an image in the right position, and push the text out of sight, but the link is not working on the image... Had a look on the XSL transformation too (inspired by this page: https://www.oxygenxml.com/doc/versions/ ... mport.html), but I cannot find what to modify in order to customize this part of the header (in the header.xml template)

Code: Select all

<whc:webhelp_publication_title/>
Any help would be greatly appreciated!
Thanks

David

tonra
Posts: 4
Joined: Wed Jun 05, 2019 10:39 am
Location: Weimar, Germany

Re: Webhelp responsive template - customize header

Post by tonra » Thu Jun 06, 2019 11:22 am

Hi David,

That's quite simple.
Just place the

Code: Select all

<whc:webhelp_logo/>
element within

Code: Select all

<div class="wh_logo_and_publication_title">
(in header.xml).
Set the parameter

Code: Select all

<parameter name="webhelp.logo.image" value="[color=#BF0000]YOUR FILEPATH[/color]"/>
(in your Template Descriptor File, *.opt).

Alternatively, you can also add your link + image to

Code: Select all

<div class="wh_logo_and_publication_title">
manually.
In order to remove the Publication Title just comment out or remove the

Code: Select all

<whc:webhelp_publication_title/>
element.

I hope this helps you.

Best regards,
Anton

davdup
Posts: 14
Joined: Wed May 29, 2019 5:43 pm

Re: Webhelp responsive template - customize header

Post by davdup » Thu Jun 06, 2019 5:46 pm

Hi Anton!
Thanks for your reply, but I still have a problem with these solutions...
I already tried the first one by setting the parameters in the DITA transformation "parameters" tab, using also webhelp.logo.image.alt and webhelp.logo.image.target.url, but the problem is that it always points the same target that you define here (in my case: index.html), no matter where you are in the WebHelp hierarchy. So this works when you are at the root folder, but is broken as soon as you navigate in a subfolder (topic, task, whatever...).
The problem is the same if I change include my HTML block directly in the header.xml template, as long as I define the link target in a "static" way. the target should be different depending on where the page is located in the folder architecture...
Any idea on how to solve this?
Best regards

David

tonra
Posts: 4
Joined: Wed Jun 05, 2019 10:39 am
Location: Weimar, Germany

Re: Webhelp responsive template - customize header

Post by tonra » Fri Jun 07, 2019 9:13 am

Hi David,

Okay, this can be achieved with the help of a WebHelp macro. You can use

Code: Select all

${path(oxygen-webhelp-output-dir)}/index.html
as your href attribute value to make the link to your index page work from every subpage.
For more information on WebHelp macros (they are very helpful!), see https://www.oxygenxml.com/doc/versions/ ... gment_file.

Does this solve your problem?

Best regards,
Anton

davdup
Posts: 14
Joined: Wed May 29, 2019 5:43 pm

Re: Webhelp responsive template - customize header

Post by davdup » Tue Jun 11, 2019 11:15 am

That's perfect! Exactly what I needed, and as you mention, this opens lots of customization possibilities!
Thanks

David

Post Reply