Custom stylesheet demo collection


This demonstration collection contains the same material as the original Greenstone demo collection, but its appearance has been altered slightly using a custom stylesheet.

Greenstone 3 uses default stylesheets, which can be overridden for all collections in a site or for any particular collection. This documented example collection covers the last case.

How the collection works

The global format statement contains a link to the collection's custom stylesheet, which is located inside the collection:

<xsl:template name="additionalHeaderContent"> 
<xsl:variable name="httpCollection"> 
<xsl:value-of select="/page/pageResponse/collection/metadataList/metadata[@name='httpPath']"/> 
</xsl:variable> 
<link href="{$httpCollection}/style/style.css" rel="stylesheet" type="text/css"/> 
</xsl:template> 

Next, a folder named style is created within the collection and a new text file, called custom-style.css, is created within that folder. The css suffix indicates it's a Cascading Style Sheet. CSS files define the look of web pages such as the colours, borders, fonts, heading styles and more. CSS files are just text files, and can thus be edited with any text editor.

The default Greenstone CSS style sheets define certain styles for all collections, that are overridden for the collection by defining CSS rules within its new custom stylesheet. It is by linking the CSS file in the Greenstone collection's global format statement as above, that the general Greenstone CSS styling rules get overridden at the collection level.

You can quickly learn how to write CSS at W3schools and other online sites.