Greenstone tutorial exercise

Back to wiki
Back to index
Prerequisite: Customization: Themes
Sample files:
Devised for Greenstone version: 3.05
Modified for Greenstone version: 3.10

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 ( Change the Theme to the following values:

    Header/ToolbarBackground color#141a38
    ContentBackground color#ffffff
    Clickable: default stateBackground color#e9c416
    Clickable: hover stateBackground Color#e9d47b
    Clickable: active stateBackground Color#ffffff

  1. Click the Download theme button. Select "1.11.4 (Legacy, for jQuery1.6+)". 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.

    Once again, if you're unable to download the theme you've created, then we have also prepared a zip file containing the CollectionTheme. Get it from sample_files → downloads → After extracting, in the following instructions work with the folder "CollectionTheme" inside any CollectionTheme2019 folder.

  1. Go to the folder where the zip file was downloaded, and unzip the folder: on Windows, right-click, select Extract All.... If you downloaded the zip file from JQuery's ThemeRoller site, at this stage you may need to remove the folder name jquery-ui-1.11.4.custom from the end of the suggested zip extraction path and then click Extract. The extracted folder will then be called jquery-ui-1.11.1.custom, or something similar. Rename it to CollectionTheme. A rename will not be necessary if you are using the

    The extracted folder 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']"/>
    <link href="{$httpCollection}/style/CollectionTheme/jquery-ui.theme.css" rel="stylesheet" type="text/css" />

    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-2019 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.”