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.


  1. Hi, Kasun,

    Thanks for all your work on these transformations.

    I just encountered something very odd. I followed the instructions in this article and changed north__minSize to 44 from 99, and set leftnavigation's top value appropriately in the CSS. Everything looks like I expect when opening the file from the local file system in a browser. But when I put the files on a web server and look at them from there, the header is big again. The leftnavigation box sticks up about halfway into it.

    Looking at the element settings using Chrome's Developer Tools shows me that in the page when opened from the local drive that the div with the ID of header has height: 42px written directly into the tag, obviously from the JavaScript. When opened from the web server, it has height: 97px.

    Any idea what might be going on here? Why would that differ?


    1. Oddly enough, it all looks fine if I look at it with Firefox, Safari, and Opera...