Customizing Responsive WebHelp

[gwhite]

Hi,

I'm trying to customize Responsive WebHelp to make a minor modification in the output's appearance: The publication title is too high compared to my company logo. The logo is perhaps a bit large, and so the publication title needs to have padding on the top of approximately 12px. I used to do this in the old WebHelp Skin Builder, but I don't see a similar capability in responsive WebHelp. How do I accomplish this now?

Gary

[bogdan_cercelaru]

Hello,

Unfortunately the WebHelp Skin Builder does not support the WebHelp Responsive yet. To customize the WebHelp Responsive output, by adding padding on the top of the publication title, you should use a custom CSS file with the following CSS rule:

Code: Select all

.wh_publication_title {

    padding-top: 12px;

}

To use a custom CSS, please follow the steps below:
- Edit the WebHelp transformation scenario and open the Parameters tab.
- Set the args.css parameter to the path of your custom CSS file.
- Set the args.copycss parameter to yes to automatically copy your custom CSS in the output folder when the transformation scenario is processed.

Regards,
Bogdan

[gwhite]

Can you tell me what css file to use as the starting point -- to customize? Where is it located?

Gary

[bogdan_cercelaru]

Hello,

Depending on your choosed template, you can start from the skin.css file from the ${DITA_OT_DIR}/plugins/com.oxygenxml.webhelp/templates/dita/bootstrap/variants/tiles/$template_name} or ${DITA_OT_DIR}/plugins/com.oxygenxml.webhelp/templates/dita/bootstrap/variants/tree/$template_name} directory.

Regards,
Bogdan

[gwhite]

Everything works, except that padding-top is not the correct css setting. Changing padding-top simply adds padding above both logo and publication title. What I need is the setting that bumps publication title down in comparison to the logo, so that they are more or less aligned at the bottom edge. Could another setting affect this?

Gary

[gwhite]

Never mind, got it! This works:

vertical-align: bottom;

Thanks for your help!

Gary