Monday, April 29, 2013

Customize the height of header div of Docbook Webhelp in Docbook 1.78.1


Recently, I've been getting some queries on how to change the height of the docbook webhelp html output. This has been straight forward in the previous releases where, where you just change the CSS height property of #header, #content, and #leftnavigation. But starting from Docbook xsl release of 1.78.0, you need to do an additional change to get it working because of the introduction of left panel resize handler.

The left panel resize handler is a feature introduced with 1.78.0 to let the users resize it as they wish in case the contents of left navigation panel is not completely visible. {webhelp-dir}/template/common/splitterInit.js .  There, we divide the webhelp output in to main three sections. the 

  • North pane - #header
  • West pane - #sidebar
  • Center pane - #content

Then, it gives you the ability to add resize handler to the edges of these three panes. In the case of webhelp, we have suppressed the ability of users to resize the north pane, and kept only the left pane resizable. I believe the reasons are obvious. So, that's a little intro about the resize handler. 

Now, if you want to customize the header, first you need to few modifications to this file. Here, I'm explaining how to change the height of the #header.

  • First, open {webhelp-dir}/template/common/splitterInit.js
  • Look for the attribute north__minSize in that file. Currently, it has the value 99 which is in pixels. This values over-rides the #height css property in positioning.css. So, change this value to a height you like. 
  • Change the the height of #content, and #leftnavigation appropriately.
You might want to replace the header-bg.png with a wider image too.