Adding graphical buttons

The generic stylesheet supports images as buttons. Six types of buttons are distinguished, three for sections and three for the entries. Both groups have the same subtypes:

Normal buttons

The normal buttons are always used for inactive sections/entries, unless other buttons are given they will be used for all sections/entries. If the normal buttons are not given, text will be used -- even if other buttons would be available.

Active buttons

If active buttons are given they will be used instead of the normal buttons for the active sections/entries. They will be used for mouse-over effects unless separate buttons are given for mouse-over effects or JavaScript has been turned off.

Mouse-over buttons

These buttons will be used for the mouse-over effects if they are given. Usually it is a good idea to just use the active buttons for this (i.e. not to give these extra buttons), but sometimes not ;-)

There is no mouse-over for the active entries since they are not linked. The buttons are identified by their type names, i.e. the stylesheet tries to find buttons for the sections/entries by looking for the following image types attached to them:

• normalEntryButton
• activeEntryButton
• mouseOverEntryButton
• normalSectionButton
• activeSectionButton
• mouseOverSectionButton

More exact: the stylesheet looks for images where the types start with these names. This can be useful if you want different buttons for different sections/entries, e.g. you can create two sets of buttons to encode two different sections in colors by using one set of names like "normalEntryButtonDarkBlue" and another set with names like "normalEntryButtonLightBlue" -- both will be recognized by the stylesheet.

Here is a complete example rendering two different sets of buttons for two different sections:

  <?xml version="1.0" encoding="UTF-8"?>
    <website baseURL="http://my.domain.org" sourceDir="content" targetDir="output">
    <structure>
      <section name="Users" sourceDir="users" targetDir="users" type="users">
        <entry name="Welcome" sourceFile="welcome.xhtml" 
                          targetFile="../index.html" type="xhtml-users"/>
        <entry name="Features" sourceFile="features.xhtml"
                          targetFile="features.html" type="xhtml-users"/>
        <entry name="Download" sourceFile="download.xhtml" 
                          targetFile="download.html" type="xhtml-users"/>
      </section>
      <section name="Developers" sourceDir="dev" targetDir="dev" type="dev">
        <entry name="CVS Access" sourceFile="cvs.xhtml" 
                          targetFile="cvs.html" type="xhtml-dev"/>
        <entry name="Mailing Lists" sourceFile="lists.xhtml" 
                          targetFile="lists.html" type="xhtml-dev"/>
      </section>
      <file sourceFile="userStyle.css" targetFile="userStyle.css"
                          type="copy" id="userStyle"/>
      <file sourceFile="devStyle.css" targetFile="devStyle.css"
                          type="copy" id="devStyle"/>
    </structure>
    <layout>
      <sectionStyle type="users">
        <image type="normalSectionButtonUsers"/>
        <image type="activeSectionButtonUsers"/>
      <sectionStyle/>
      <sectionStyle type="dev">
        <image type="normalSectionButtonDev"/>
        <image type="activeSectionButtonDev"/>
      <sectionStyle/>
      <documentStyle type="xhtml-users">
        <xsl stylesheet="layout/generic.xsl" navigationElement="html">
          <parameter name="stylesheet.id" value="userStyle"/>
        </xsl>
        <image type="normalEntryButtonUsers"/>
        <image type="activeEntryButtonUsers"/>
      </documentStyle>
      <documentStyle type="xhtml-dev">
        <xsl stylesheet="layout/generic.xsl" navigationElement="html">
          <parameter name="stylesheet.id" value="devStyle"/>
        </xsl>
        <image type="normalEntryButtonDev"/>
        <image type="activeEntryButtonDev"/>
      </documentStyle>
      <!-- rendering information for eight buttons goes here:
           normal/active * entry/section * users/dev -->
    </layout>
  </website>

You can now create different looks for the two sections by adding slightly different buttons for the section and using a separate CSS stylesheet for each.