Greenstone 3 Themes

The default Greenstone3 interface is built on JQuery themes. This makes it very easy to change the colors of your Greenstone libraries and collections, as well as other select parts of the style (like corner roundness). This page discusses how to create your own themes, and how to change the theme for either the whole library or an individual collection.

Greenstone3 comes with four pre-made themes, which are located in Greenstone3 → web → interfaces → default → style → themes:

• main
• alt_theme_1
• alt_theme_2
• alt_theme_3

In addition, jQuery has about two dozen pre-made themes, which Google makes accessible over their Ajax Libraries API.

It is also easy to create your own theme. Simply visit JQuery's ThemeRoller website, and change the settings on the "Roll your own" tab on the left-hand side of the page.

When you have finished customizing your theme, press the Download Theme button. To use the theme with the default interface, you can deselect all components except the Core component of the UI Core section. At the bottom of the page, change the Theme Folder Name (or keep the default custom-theme), and press Download, which will download a zip file. Unzip this file, and in the css folder, you will find a folder named custom-theme (or whatever unique name you provided. Copy this entire folder into:

• Greenstone3 → web → interfaces → default → style → themes for a library-wide style
• Greenstone3 → web → sites → localsite → collect → <collection-name> → style for a collection-specific theme

See below to select this to be the new theme for either a collection or the whole library.

To change the library's theme to a pre-made theme, go to any page in your library and:

• Click the Login button.
• Log in as an administrator (admin's default password is admin; change this immediately if you have not already).
• Go to the Preferences page.
• Select a new Visual theme from the drop-down menu (this option will only appear if you are logged in as an administrator).
• Click the Set Preferences button.

If you have created a new theme (and placed it in the interface's style/themes folder), you need to add it to this drop-down list before you can select it. To do this:

• Open the file Greenstone3 → web → interfaces → default → transform → pages → pref.xsl.
• Find this section:

additionalThemes: [
	{title:"Greenstone Default", name:"custom-theme0", icon:"theme_90_greenstone.png", url:"interfaces/" + gs.xsltParams.interface_name + "/style/themes/main/jquery-ui-1.8.16.custom.css"},
	{title:"Greenstone Custom 1", name:"custom-theme1", icon:"theme_90_start_menu.png", url:"interfaces/" + gs.xsltParams.interface_name + "/style/themes/alt_theme_1/jquery-ui-1.8.16.custom.css"},
	{title:"Greenstone Custom 2", name:"custom-theme2", icon:"theme_90_mint_choco.png", url:"interfaces/" + gs.xsltParams.interface_name + "/style/themes/alt_theme_2/jquery-ui-1.8.16.custom.css"},
	{title:"Greenstone Custom 3", name:"custom-theme3", icon:"theme_90_trontastic.png", url:"interfaces/" + gs.xsltParams.interface_name + "/style/themes/alt_theme_3/jquery-ui-1.8.16.custom.css"}
]

and add an entry for your new theme (don't forget to add the comma at the end of the second-to-last line!):

additionalThemes: [
	{title:"Greenstone Default", name:"custom-theme0", icon:"theme_90_greenstone.png", url:"interfaces/" + gs.xsltParams.interface_name + "/style/themes/main/jquery-ui-1.8.16.custom.css"},
	{title:"Greenstone Custom 1", name:"custom-theme1", icon:"theme_90_start_menu.png", url:"interfaces/" + gs.xsltParams.interface_name + "/style/themes/alt_theme_1/jquery-ui-1.8.16.custom.css"},
	{title:"Greenstone Custom 2", name:"custom-theme2", icon:"theme_90_mint_choco.png", url:"interfaces/" + gs.xsltParams.interface_name + "/style/themes/alt_theme_2/jquery-ui-1.8.16.custom.css"},
	{title:"Greenstone Custom 3", name:"custom-theme3", icon:"theme_90_trontastic.png", url:"interfaces/" + gs.xsltParams.interface_name + "/style/themes/alt_theme_3/jquery-ui-1.8.16.custom.css"},
	{title:"<name to appear in drop-down menu>", name:"<unique name>", url:"interfaces/" + gs.xsltParams.interface_name + "/style/themes/<theme-folder-name>/<name of CSS file>"}
]

Now, if you follow the steps above (log in, go to the preferences page, etc.), your created theme will appear in the drop-down menu to be selected. (It will not have a calendar icon. The tutorial Customization: Themes provides a walkthrough for all aspects of changing your library's theme, including creating and adding the calendar icon.)

If you have created a new theme and placed it in the collection's style folder, you can use this theme for the collection by performing the following:

• Open the collection in the GLI.
• In the Format Features section of the Format panel, select the global feature and add the following to the end:

<!-- Variable for http path to this collection-->
  <xsl:variable name="httpCollection">
    <xsl:value-of select="/page/pageResponse/collection/metadataList/metadata[@name='httpPath']"/>
  </xsl:variable>
 
<!--Template adding stylesheet to html header-->
  <xsl:template name="additionalHeaderContent-collection">
    <link href="{$httpCollection}/style/<theme-folder-name>/<CSS file name>" rel="stylesheet" type="text/css"/>
  </xsl:template>

(replacing <theme-folder-name> and <CSS file name> with the appropriate folder and file names, respectively).

If the theme you would like to use is in the interface's themes folder, you would instead use:

<!--Template adding stylesheet to html header-->
  <xsl:template name="additionalHeaderContent-collection">
    <link href="interfaces/{$interface_name}/style/themes/<theme-folder-name>/<CSS file name>" rel="stylesheet" type="text/css"/>
  </xsl:template>

And, finally, if you would like to use one of jQuery's premade themes, reference Google's Ajax API instead. For example:

<!--Template adding stylesheet to html header-->
  <xsl:template name="additionalHeaderContent-collection">
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/start/jquery-ui.min.css" rel="stylesheet" type="text/css"/>
  </xsl:template>

Finally, if you would like the theme to change only on a specific page of a collection, instead of adding the code above to the global feature, add it to the applicable page's feature (e.g. the search feature for all search pages, CL1 for the first browsing classifier page, etc.).

The tutorial Collection-specific themes walks through the entire process of changing an individual collection's theme—from creating a theme on JQuery's website to adding the additionalHeaderContent template.

• Greenstone 3 Skins++ Technical Documentation Maxime Roüast

The following tutorials involve using themes:

• Library-wide themes: Customization: Themes
• Single-collection themes: Collection-specific themes