Changing CSS generation

The set of parameters starting with "style." can be used to change the CSS stylesheet attached and the amount of markup created in the output.

Changing the stylesheet

There are two ways to define which CSS stylesheet should be attached to the output created: either by referring to a file processed by XWeb or by pointing to a URL directly. Two parameters control this: stylesheet.url and stylesheet.id. If the first parameter is used, the second one will always be ignored. You can use the first one like this:

  <xsl stylesheet="layout/generic.xsl" navigationElement="html">
    <parameter name="stylesheet.url" value="http://somewhere.com/aNiceStylesheet.css"/>
  </xsl>

Here the stylesheet will be loaded from the url given as value. This way you can reuse stylesheets existing on the web, maybe you want to use the same stylesheet on different sites and refer to one central version or you want to reuse a CSS file someone else wrote.

If you want to keep the stylesheet with your XWeb project, it is more useful to tell XWeb to care about the stylesheet itself. This can be done by using the approach shown in the css section by putting the stylesheet into the structure as file with the appropriate id. If you want to use different stylesheets for different parts of your site you can do this by using different ids for them and giving different values stylesheet.id for different documents. You have to use multiple <documentStyles> like this:

  <?xml version="1.0" encoding="UTF-8"?>
  <website baseURL="http://my.domain.org" sourceDir="content" targetDir="output">
    <structure>
      <section name="A Section" sourceDir="section" targetDir="section">
        <entry name="Blue" sourceFile="input.xhtml" 
                          targetFile="blue.html" type="blue"/>
        <entry name="Red" sourceFile="input.xhtml"
                          targetFile="red.html" type="red"/>
      </section>
      <file sourceFile="blue.css" targetFile="blue" type="copy" id="blueStyle"/>
      <file sourceFile="red.css" targetFile="red" type="copy" id="redStyle"/>
    </structure>
    <layout>
      <documentStyle type="blue">
        <xsl stylesheet="layout/generic.xsl" navigationElement="html">
          <parameter name="stylesheet.id" value="blueStyle"/>
        </xsl>
      </documentStyle>
      <documentStyle type="red">
        <xsl stylesheet="layout/generic.xsl" navigationElement="html">
          <parameter name="stylesheet.id" value="redStyle"/>
        </xsl>
      </documentStyle>
      <documentStyle type="copy">
        <copy/>
      </documentStyle>
    </layout>
  </website>

Here the same input file is rendered using two differnet stylesheet, therby producing a different look. This could be used for comparing the stylesheets or you can use it with different input files to use different colors, e.g. in different sections.

Adding additional markup

Two parameters can be used to add CSS markup into the output: style.markup.firstLetter and style.markup.linkTypes. If the first one is set to "on" XWeb will create a span with the CSS class "firstLetter" around the first letter of each paragraph. This can be used to change the formatting of the first letter like done for this manual. There is a CSS pseudo-class called "first-letter" doing the same but this is not supported by all browsers and it breaks the layout in Internet Explorer 5.x if a paragraph has only one line (it seems most test suites miss this problem).

If you set style.markup.linkTypes to "on" all links will get a CSS class attached that reflects the protocol used. For example if the url given is "http://xweb.sf.net" then the class attached will be "httpLink". If the link does not use a protocol the class attached will be "localLink". Not using a protocol means a link like <a href="otherFile.html">, the internal links resolved by XWeb (see the description on the features page are marked with the class "xwebLink"). If the link element has already a class nothing will be changed.