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:
Create a custom chunk.xsl
style
sheet.
Create a custom docbook.css
file
- which controls how the various parts of a document are
rendered.
Create and install auxillary files (bitmaps) referenced by the above two files.
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:
Colors can be applied based upon the original
DocBook type. For example, the
pre.screen
adjusts the color settings
for <pre>
sections of the
resulting HTML documents, but only if
they are given the class of screen
. To
find the class of DocBook output, one needs to review
the raw HTML produced by
DocBook. Hint: Try viewing the source of this page and
search for the string
programlisting
.
The pre.programlisting
defines a
bitmap to be used for the background. The reference to the
bitmap is relative to the location of the
docbook.css
file. Hence, the
developer needs to be careful when adding bitmaps. It
involves not only creating the actual bitmap, but also
updating the make rules such that it will be installed in
the proper location.