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