Tweaking the HTML Output

It took a long time to figure this out, but we finally managed to adjust the output of the HTML pages generated when compiling the documentation. In order to do this, we needed to:

In order to tweak the HTML produced by our DocBook source files, we needed to create a custom XSL style sheet. This custom file includes the normal DocBook formatting rules, and then adjusts a few settings to our liking (we were particularily interested in the inclusion of a custom CSS file). The docs/chunk.xsl is built from code within the docs/configure shell script. If you want to make permanent changes, you will need to modify docs/configure. The following shows the contents of docs/chunk.xsl at the time this document was created:

<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version='1.0'>

<!-- 

  WARNING: This file was automatically genereted at the time of
  configuration. Do not edit directly! Edit the file docs/configure
  instead!

  This style sheet is used to tweak the docbook output. More
  information can be found at:

    http://docbook.sourceforge.net/release/xsl/current/doc/html/index.html

  Also, try searching google.com with the following in double quotes:

    Customizing DocBook XSL stylesheets

  To tweak colors, brush up on CSS, and have a crack at the file: docbook.css

  -->

  <xsl:import href="file:///usr/local/src/docbook-xsl/docbook-xsl-1.73.0/xhtml/chunk.xsl"/>

  <!-- Indicate we will be including our own custom style sheet -->

  <xsl:param name="html.stylesheet">../docbook.css</xsl:param>

  <!-- Turn off rules below/above header/footer - we'll use CSS borders -->

  <xsl:param name="header.rule" select="0"></xsl:param>
  <xsl:param name="footer.rule" select="0"></xsl:param>

  <!-- Turn off image scaling when generating HTML output -->

  <xsl:param name="make.graphic.viewport" select="1"></xsl:param>
  <xsl:param name="ignore.image.scaling" select="1"></xsl:param>

  <!-- Make external links stay within window (don't let them take
  over entire frame) -->

  <xsl:param name="ulink.target" select="'_self'"></xsl:param>

  <!-- Allow the use of role attribute to override class in <entry>,
       <para>, <emphasis> and <phrase> objects This allows us to
       customize the CSS attributes in HTML output -->

  <xsl:param name="entry.propogates.style" select="1" />
  <xsl:param name="emphasis.propogates.style" select="1" />
  <xsl:param name="para.propogates.style" select="1" />
  <xsl:param name="phrase.propogates.style" select="1" />

  <!-- Spend extra CPU time to try and produce valid and pretty HTML -->

  <xsl:param name="html.cleanup" select="1" />
  <xsl:param name="make.valid.html" select="1" />

  <!-- callout customizations -->

  <xsl:param name="callout.graphics" select="'1'" />
  <xsl:param name="callouts.extension" select="'1'" />
  <xsl:param name="callout.graphics.path" select="'../images/callouts/'" />

  <!-- Try to force meta tag to UTF-8 charset -->
  <xsl:template name="user.head.content">
     <meta xmlns="http://www.w3.org/1999/xhtml" http-equiv="Content-Type"
                            content="text/html; charset=UTF-8" />
  </xsl:template>

</xsl:stylesheet>


There are many "dials" that can be adjusted in the docs/chunk.xsl file. To learn more about these various settings, read the DocBook HTML Parameter Reference. Also, you may want to try searching Google for Customizing DocBook XSL stylesheets.

If you examine the docs/chunk.xsl, you'll notice that it specifies a custom html.stylesheet. This CSS file is found at docs/docbook.css and controls the colors, fonts and formatting of the HTML pages. It currently has the form:

/* $Id: docbook.css,v 1.18 2008/06/18 17:29:31 rwhalb Exp $

   CSS formats for docbook generation
*/

/* Adjust docbook <note></note> areas */

div.note span.important {
  color: black;
  background-color : red;
  font-weight: bold;
  font-size: 12pt;
}

/* Adjust docbook <table></table> areas */

div.table th {
  background: #000030;
  color: white;
}

div.table td {
  background: #ddddff;
  color: black;
}

div.table td.even {
  color: black;
  background-color : white;
}

div.table td.odd {
  color: black;
  background-color : #ddddff;
}

div.table td.total {
  color: black;
  font-weight: bold;
  font-size: 12pt;
  background-color : #FFFF66;
}

/* <note></note> <warning></warning> and <error></error> sections */

div.note {
  background-color : #eeffff;
}

div.caution {
  background-color : #fcfdab;
}

div.warning {
  background-color : #ffffaa;
}

div.error {
  background-color : #ffeeee;
}

/* Adjustments to docbook <screen></screen> areas */

pre.screen {
  color: #33FF33;
  background-color : black;
  border-style: solid;
  border-width: 4px;
  border-color: darkgray;

  margin: 24pt;
  overflow: auto;

/*  height: 25%; */
}

pre.screen b {
  color: yellow;
}

.userinput {
  color: yellow;
}

/* Adjust docbook <programlisting></programlisting> areas */

pre.programlisting {
  border-style: solid;
  border-width: 4px;
  border-color: green;
  background: url(../images/computer_paper.png);

  margin: 24pt;
  overflow: auto;

/*  height: 25%; */
}

/* Adjust docbook <command></command> areas */
.command {
  font-weight : bold;
}

/* Adjust the header/footer regions */

div.navheader table {
  color: #f7f0d7;
  background-color : #000030;
  padding: 5px;
  margin-top: 10px;
  width: 100%;
  border: 2pt solid #a0a0d0;
  font-size: 8pt;
}

div.navheader table tr td a {
  color: white;
  background-color: inherit;
}

div.navheader table tr td a :visited {
  color: white;
  background-color: inherit;
}

div.navfooter table{
  color: #f7f0d7;
  background-color : #000030;
  padding: 5px;
  margin-top: 10px;
  width: 100%;
  border: 2pt solid #a0a0d0;
  font-size: 8pt;
}

div.navfooter table tr td a {
  color: white;
  background-color: inherit;
}

div.navfooter table tr td a :visited {
  color: white;
  background-color: inherit;
}

/* <acronym> */

.acronym {
  font-weight: bold;
}

/* <application> */

.application {
  font-weight: bold;
}

/* <guibutton> look similar to NST WUI buttons */

.guibutton {
  font-family: sans-serif;
  font-weight: bold;
  font-size: 75%;
  color: #AAAA11;
  background-color: #003366;
  padding-left: 4pt;
  padding-right: 4pt;
  border-style: outset;
  border-left-width: medium;
  border-left-color: #253C62;
  border-top-width: medium;
  border-top-color: #658CB2;
  border-right-width: medium;
  border-right-color: #000020;
  border-bottom-width: medium;
  border-bottom-color: #003366;
}

/* Inprotect components (use <emphasis role="CLASS">TEXT</emphasis>) */

.inprotectlabel {
  font-family: Verdana;
  font-size: 10pt;
  color: #666666;
  background-color: #ffffff;
}

.inprotectnavlink {
 color: #808080;
 background-color: inherit;
 text-decoration: none;
 font-family: Arial;
 font-size: 10pt;
 font-weight: bold;
}

.inprotectlink {
 font-family: Verdana;
 font-size: 10pt;
 color: #6797BF;
 background-color: inherit;
}

.inprotectinput {
  font-family: Verdana;
  font-size: 10pt;
  font-weight: bold;
  color: #666666;
  background-color: #ffffff;
}

.inprotectbutton {
  font-family: Verdana;
  font-size: 10pt;
  font-weight: bold;
  color: #666666;
  background-color: #f6f4f1;
  padding-left: 4pt;
  padding-right: 4pt;
  border-style: outset;
  border-left-width: 2px;
  border-top-width: 2px;
  border-right-width: 2px;
  border-bottom-width: 2px;
/*
  border-left-color: #253C62;
  border-top-color: #658CB2;
  border-right-color: #000020;
  border-bottom-color: #003366;
*/
}

There are several things that should be noted in the docs/docbook.css file: