Greenstone tutorial exercise

Back to wiki
Back to index
Prerequisite: Customization: Themes
Sample files: custom.zip
Devised for Greenstone version: 3.05
Modified for Greenstone version: 3.06

Collection-Specific Themes

The Visual theme menu on the Preferences page sets the theme for the entire Greenstone library. This tutorial explains how to use themes on a collection level, by changing the theme of the backdrop collection.

Creating a custom theme

  1. Go to the jQuery UI ThemeRoller webpage (http://jqueryui.com/themeroller/). Change the Theme to the following values:

    Header/ToolbarBackground color#141a38
    Texturehighlight_soft
    45%
    Border#ffffff
    Text#ffffff
    Icon#ffffff
    ContentBackground color#ffffff
    Textureflat
    75%
    Border#ffffff
    Text#222222
    Icon#222222
    Clickable: default stateBackground color#e9c416
    Textureglass
    55%
    Border#ffffff
    Text#555555
    Icon#888888
    Clickable: hover stateBackground Color#e9d47b
    Textureglass
    75%
    Border#ffffff
    Text#212121
    Icon#454545
    Clickable: active stateBackground Color#ffffff
    Textureglass
    65%
    Border#ffffff
    Text#212121
    Icon#454545

  1. Click the Download theme button. Ensure the Stable version of jQuery is selected. Under Components uncheck Toggle All, which will uncheck all of the boxes. Under UI Core check Core, and under Widgets check Datepicker. At the bottom of the page, under Theme, Custom Theme should be selected. (If there's an option to provide a Theme Folder Name, enter CollectionTheme.) Leave CSS Scope blank. Click Download. In the pop-up window, select Save File and click OK to download the zip file.

  1. Go to the folder where the zip file was downloaded, and unzip the folder (on Windows, right-click, select Extract All... and click Extract).

    The extracted folder will be called jquery-ui-1.11.1.custom, or something similar. Rename it to CollectionTheme. It should contain css files, an index.html file, a couple of js files and 2 subfolders (called images and external). Copy the entire folder into Greenstone3 → web → sites → localsite → collect → backdrop → style.

Setting a collection's theme

  1. Open the Greenstone Librarian Interface (from the Windows Start menu) and open the backdrop collection (use the File menu).

  1. In the Format panel, select Format Features. Add the following template to the bottom of the global format features (this can be copied from gs3-collect-theme.txt):

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

    You could also make it refer to jquery-ui.theme.min.css instead, which is another version of the same css style file, one with a reduced file size.

  1. Click Preview Collection to see the backdrop collection with the new, custom theme.


Copyright © 2005-2012 by the New Zealand Digital Library Project at the University of Waikato, New Zealand
Permission is granted to copy, distribute and/or modify this document under the terms of the GNU Free Documentation License, Version 1.2 or any later version published by the Free Software Foundation; with no Invariant Sections, no Front-Cover Texts, and no Back-Cover Texts. A copy of the license is included in the section entitled “GNU Free Documentation License.”