Greenstone tutorial exercise
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
- Go to the jQuery UI ThemeRoller webpage (http://jqueryui.com/themeroller/). Change the Theme to the following values:
| Header/Toolbar | Background color | #141a38 |
| Texture | highlight_soft |
| 45% |
| Border | #ffffff |
| Text | #ffffff |
| Icon | #ffffff |
| Content | Background color | #ffffff |
| Texture | flat |
| 75% |
| Border | #ffffff |
| Text | #222222 |
| Icon | #222222 |
| Clickable: default state | Background color | #e9c416 |
| Texture | glass |
| 55% |
| Border | #ffffff |
| Text | #555555 |
| Icon | #888888 |
| Clickable: hover state | Background Color | #e9d47b |
| Texture | glass |
| 75% |
| Border | #ffffff |
| Text | #212121 |
| Icon | #454545 |
| Clickable: active state | Background Color | #ffffff |
| Texture | glass |
| 65% |
| Border | #ffffff |
| Text | #212121 |
| Icon | #454545 |
- Click the Download theme button. Select "1.13.2 (Stable, for jQuery1.8+)". Under Components uncheck Toggle All, which will uncheck all of the boxes. Under UI Core check jQuery 1.8+ Support and Keycode, 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 → CollectionTheme2019.zip. After extracting, in the following instructions, work with the folder "CollectionTheme" inside any CollectionTheme2019 folder.
- 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 CollectionTheme2019.zip.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
- Open the Greenstone Librarian Interface (from the Windows Start menu) and open the backdrop collection (use the File menu).
- 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.
- Click Preview Collection to see the backdrop collection with the new, custom theme.