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.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 → 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.