CSS Demo :: Greenstone3 Showcase

This collection demonstrates Greenstone's use of Cascading Style Sheets (CSS) for visual formatting in web browsers. On every page, you can change the style-sheet in effect, to modify that page's appearance. This collection contains the same material as the original Greenstone demo collection.

A combination of JavaScript and the overriding of XSL templates is used by the collection to provide the stylesheet switching. As in some other Documented Example Collections, GLI's Format > Format Features > global can be used to define the additionalHeaderContent-collection template. Doing so overrides the existing additionalHeaderContent-collection template, and appends any specified HTML elements to the HTML header. However, for this collection, we have chosen to add these templates to a custom header.xsl file, located in the collection's transform/layouts folder. Editing this file doesn't require reloading the collection in the library, which is needed if you edit collection formats in GLI.

Note, the additionalHeaderContent template is defined in web/interfaces/default/transform/layouts/header.xsl, and it comprises 4 templates: additionalHeaderContent-page, additionalHeaderContent-interface, additionalHeaderContent-site and additionalHeaderContent-collection. These can be overridden at the page, interface, site and collection level, respectively. This allows fine grained tuning of the page headers.

In this case, the additionalHeaderContent-collection specifies the custom collection stylesheet currently active and the JavaScript to facilitate the stylesheet switching when a link is clicked. The create-banner XSL template is also overridden to provide links to the multiple stylesheets within the existing GS3 banner section, and invoke the custom JavaScript when any link is clicked.

  <xsl:template name="additionalHeaderContent-collection"> 
    <xsl:variable name="httpCollection"> 
      <xsl:value-of select="/page/pageResponse/collection/metadataList/metadata[@name='httpPath']"/> 
    </xsl:variable> 
	<link rel="stylesheet" href="{$httpCollection}/style/gs3-style-default-extra.css" type="text/css"  
	   title="GS3 Style" id="custom-style" charset="UTF-8"/> 
	<script src="{$httpCollection}/script/custom-script.js" type="text/javascript"> 
	</script> 
  </xsl:template> 
 
  <xsl:template name="create-banner">   
	<div class="choose_style"> 
		Choose a style: 
		<a href="#" onclick="replaceStyle('gs3-style-default-extra');return false;">Default Greenstone</a>, 
		<a href="#" onclick="replaceStyle('gs3-style-blue');return false;">Blue</a>, 
		<a href="#" onclick="replaceStyle('gs3-style-olive-purple');return false;">OlivePurple</a>,		 
		<a href="#" onclick="replaceStyle('');return false;">None</a> 
		</div> 
    <div id="gs_banner" class="ui-widget-header ui-corner-bottom">	     
      <div id="titlesearchcontainer"> 
	<xsl:call-template name="page-title-area"/>	 
	<xsl:call-template name="quick-search-area"/> 
	<div style="clear:both;"><xsl:text> </xsl:text></div>	 
      </div> 
      <xsl:call-template name="browsing-tabs"/>	 
    </div> 
  </xsl:template>

If you want to download any of these stylesheets for your own collections, here are links to them:

Default Greenstone Extra - builds on top of GS3's default style
Blue - modifies the GS3 default style for a blue colouring
OlivePurple - modifies the GS3 default style for a vivid colouring of vine green and purples
None - clears all CSS styling from the current page (needs reload to get the default GS3 style back)

Using a downloaded stylesheet

To use a stylesheet as the default, place it in greenstone/web/interfaces/default/style and rename it to style.css. This will affect all collections.

To use a stylesheet for a particular collection, place it in greenstone/web/<sitename>/localsite/collect/<collection>/style then specify the stylesheet link in the additionalHeaderContent-collection of GLI's global format statement (Format > Format Features > global) as follows:

<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/stylesheet-name.css" rel="stylesheet" type="text/css"/>
</xsl:template>

View this collection's configuration and other files: