Customizing Responsive WebHelp

gwhite
Posts: 70
Joined: Fri Jul 27, 2012 1:46 am

Customizing Responsive WebHelp

Post by gwhite » Tue Jul 12, 2016 2:01 am

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
Posts: 213
Joined: Tue Jul 01, 2014 11:48 am

Re: Customizing Responsive WebHelp

Post by bogdan_cercelaru » Tue Jul 12, 2016 2:53 pm

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
Bogdan Cercelaru
<oXygen/> XML Editor, Schema Editor and XSLT Editor/Debugger
http://www.oxygenxml.com

gwhite
Posts: 70
Joined: Fri Jul 27, 2012 1:46 am

Re: Customizing Responsive WebHelp

Post by gwhite » Tue Jul 12, 2016 5:45 pm

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

Gary

bogdan_cercelaru
Posts: 213
Joined: Tue Jul 01, 2014 11:48 am

Re: Customizing Responsive WebHelp

Post by bogdan_cercelaru » Wed Jul 13, 2016 4:30 pm

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
Bogdan Cercelaru
<oXygen/> XML Editor, Schema Editor and XSLT Editor/Debugger
http://www.oxygenxml.com

gwhite
Posts: 70
Joined: Fri Jul 27, 2012 1:46 am

Re: Customizing Responsive WebHelp

Post by gwhite » Wed Jul 13, 2016 10:42 pm

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
Posts: 70
Joined: Fri Jul 27, 2012 1:46 am

Re: Customizing Responsive WebHelp

Post by gwhite » Wed Jul 13, 2016 10:59 pm

Never mind, got it! This works:

vertical-align: bottom;

Thanks for your help!

Gary

Post Reply