name=Cascading Style Sheets
Demo collection dls.Organization=Organizations dls.Subject=Subjects index_text=Text index_document=Book index_section=Chapter dls.Title,Title=Titles dls.Keyword=How to depositormetadata={"name":"dls.Title","label":"Title","tooltip":"dls.Title: The title of this resource.","type":"text"}, {"name":"dls.Organization","label":"Organization","tooltip":"dls.Organization: The organization responsible for producing this resource.","type":"text"}, {"name":"dls.Subject","label":"Subject","tooltip":"dls.Subject: The subject of this resource.","type":"text"}, {"name":"dls.Keyword","label":"Keyword","tooltip":"dls.Keyword: A more specific indication of what the resource can be used for.","type":"text"}, {"name":"dls.Language","label":"Language","tooltip":"dls.Language: The language of this resource.","type":"text"} shortDescription=

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.

description1=

A combination of JavaScript and the overriding of GS3 XSL templates in Greenstone 3's global format statement 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 template. Doing so overrides the existing additionalHeaderContent template, and appends any specified HTML elements to the HTML header.

description2=

In this case, the additionalHeaderContent 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 in the global format statement 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. \n\ 

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

description3=

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

\n\

description4=

Using a downloaded stylesheet \n\

\n\