Page 1 of 1

Webhelp responsive template - customize header

Posted: Thu Jun 06, 2019 10:41 am
by davdup
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

Re: Webhelp responsive template - customize header

Posted: Thu Jun 06, 2019 11:22 am
by tonra
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

Re: Webhelp responsive template - customize header

Posted: Thu Jun 06, 2019 5:46 pm
by davdup
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

Re: Webhelp responsive template - customize header

Posted: Fri Jun 07, 2019 9:13 am
by tonra
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

Re: Webhelp responsive template - customize header

Posted: Tue Jun 11, 2019 11:15 am
by davdup
That's perfect! Exactly what I needed, and as you mention, this opens lots of customization possibilities!
Thanks

David

Re: Webhelp responsive template - customize header

Posted: Tue Nov 03, 2020 5:29 am
by urbanrobots
Hello~ I have a similar question. Is there an extension point for overriding the whc:webhelp_publication_title template in the commonComponentExpander.xsl file? I don't want to edit the file directly but want to override just this template so that we can use ditamap metadata instead of the maptitle for the publication title.

Thanks!

Re: Webhelp responsive template - customize header

Posted: Tue Nov 03, 2020 1:47 pm
by Costin
Hi urbanrobots,

If you need override the templates from the "commonComponentExpander.xsl" file, you should register your own XSL on all of the four extension points enumerated below:
com.oxygenxml.webhelp.xsl.dita2webhelp, com.oxygenxml.webhelp.xsl.createMainPage, com.oxygenxml.webhelp.xsl.createSearchPage and com.oxygenxml.webhelp.xsl.createIndextermsPage.

You can see details on the XSLT Extension Points in the WebHelp Responsive XSLT-Import and XSLT-Parameter Extension Points section from the WebHelp Responsive User-Guide.

Also, you can find an example of using XSLT extension points from a publishing template in this section.

Regards,
Costin

Re: Webhelp responsive template - customize header

Posted: Wed Nov 04, 2020 1:42 am
by urbanrobots
Thank you, Corin! That's just what I needed.