Since your output is HTML pages, one of the best tools for controlling the formatting of your web pages is with a Cascading Style Sheet (CSS). You may be familiar with the DocBook stylesheet parameter html.stylesheet that can be used to specify a CSS stylesheet name. You can use that parameter with Website, but it has the disadvantage that the address of the stylesheet is fixed. That means you must either specify an absolute path, or you must copy the stylesheet file to each directory that gets HTML webpages.

The recommended approach in Website is to add a style element to your layout.xml file. Then you only need one copy of the stylesheet file for all HTML output. For example, place this element before the toc section:

<style src="mystyle.css" type="text/css"/>
<toc>
  <tocentry ...>

In each generated HTML webpage, the Website stylesheet will compute a relative path to the stylesheet location specified in the src attribute, based on which directory the HTML output file is located. That way you can just copy your stylesheet file to one location and all the files can use it. The value in src is figured relative to the output-root parameter. In this example, if you set output-root="html", then you should copy the stylesheet file to html/mystyle.css.

You can specify several configuration parameters in your website source files using config elements. Each config element is empty and takes a param and value attribute. For example:

<config  param="navtocwidth"  value="220"/>

The param attribute specifies the name of the parameter, and the value attribute specifies its value.

If you place a config element in your layout.xml file outside the toc element , then the parameter applies to all your webpages. If you place the config element as a child of webpage in one of your Webpage XML files, then it overrides the global value and applies only to that page. If neither are set, then the stylesheet provides a default stylesheet parameter value for some configuration features, as noted in the table below. The default value can be overridden on the processor command line like other stylesheet parameters.

You can also use the usual methods of stylesheet customization to customize your web pages. Use this method when you want to change how elements are processed or where they are placed on the pages. You can also use a customization layer to record a set of stylesheet parameters so you don't have to enter them on the command line, alter attribute-sets, and fill in placeholder templates used by the stylesheets.

There are many stylesheet parameters that are specific to Website. See the Website file xsl/param.xsl for a complete description of the stylesheet parameters. You can also set any stock DocBook stylesheet parameters if they apply to your output.

To start a customization layer for Website, you import the website stylesheet you want to customize rather than the original DocBook stylesheet. The Website stylesheet will then import the parts of DocBook that it needs. See Table 29.1, “Website stylesheets” for the list of stylesheets you can import. Then you add any parameter settings and templates that you want to customize. Here is a short example.

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

<xsl:import href="chunk-tabular.xsl"/> 

<!-- Website stylesheet parameters -->
<xsl:param name="footer.hr" select="0"/>
<xsl:param name="feedback.link.text">Send us feedback</xsl:param>
<xsl:param name="textbgcolor">#C8C8C8</xsl:param>

<!-- DocBook stylesheet parameters -->
<xsl:param name="admon.graphics" select="1"/>

<!-- Template customizations go here -->

</xsl:stylesheet>  

If you use more than one of the Website stylesheets, you will probably want similar customizations in each. You will need a separate customization file for each stylesheet, because xsl:import will not take a parameter value to select the stylesheet. To avoid duplicating your customizations, put them in a separate stylesheet module and use xsl:include to include that file in all of your customization layers.

This table provides starting points for how to customize various features of website. Keep in mind that when customizing attribute-sets that your customized attribute-set will be merged with the existing one. You only need to provide new attributes or overriding attribute values.

<xsl:attribute-set name="table.properties">
  <xsl:attribute name="border">1</xsl:attribute>
  <xsl:attribute name="cellpadding">4</xsl:attribute>
</xsl:attribute-set>

<xsl:attribute-set 
   name="table.navigation.cell.properties">
  <xsl:attribute name="background">myimage.gif
  </xsl:attribute>
</xsl:attribute-set>

<xsl:attribute-set name="table.body.cell.properties">
  <xsl:attribute name="background">myimage.gif
  </xsl:attribute>
</xsl:attribute-set>

<xsl:template name="body.attributes">
  <xsl:attribute name="bgcolor">blue</xsl:attribute>
  <xsl:attribute name="text">white</xsl:attribute>
  <xsl:attribute name="link">#0000FF</xsl:attribute>
  <xsl:attribute name="vlink">#840084</xsl:attribute>
  <xsl:attribute name="alink">#0000FF</xsl:attribute>
</xsl:template>

<xsl:template name="allpages.banner">
  <img src="myimages.gif"><br/>
</xsl:template>

<xsl:template name="home.navhead">
  <B><xsl:text>My own left header text</xsl:text></B>
</xsl:template>

<xsl:template name="home.navhead.upperright">
  <B><xsl:text>My own right header text</xsl:text></B>
</xsl:template>

<xsl:template name="home.navhead.upperright">
  <hr size="8"/>
</xsl:template>

<xsl:template name="hspacer">
  <td bgcolor="#333333" width="12"/>
</xsl:template>

<xsl:param name="max.toc.width">5</xsl:param>

<xsl:param name="header.hr">0</xsl:param>

<xsl:param name="footer.hr">0</xsl:param>

<xsl:param name="banner.before.navigation">0</xsl:param>

<xsl:param name="sequential.links">1</xsl:param>