Greenstone Wiki

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.
<TABAREA tabs="Greenstone3">
<TAB>
====== 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.


===== Pre-made themes =====
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. 

===== Creating your own theme =====
It is also easy to create your own theme. 
Simply visit [[http://jqueryui.com/themeroller/|JQuery's ThemeRoller website]], and change
the settings on the "Roll your own" tab on the left-hand side of the page. 

^ThemeRoller Options^^^
^Section^HTML class^Greenstone 3 usage^
|Font Settings|ui-widget|Not used by Greenstone's default interface; the easiest way to modify font settings, is by changing the CSS|
|**Corner Radius**| ui-corner-all, ui-corner-top, ui-corner-left, ui-corner-tl, ui-corner-bottom, ui-corner-br etc.  | Used to round the corners of various elements, like the buttons and tabs |
|**Header/Toolbar**|ui-widget-header|This sets the appearance of the large, main banner and the footer|
|**Content**|ui-widget-content|Sets the appearance for the main area of the page, where the content (e.g. a list of documents) is displayed|
|**Clickable: default state**|ui-state-default|Sets the appearance for the small bar along the top, most buttons (Login, Help, Preferences, Test Search, Form Search, Advanced Search), and all unselected browse tabs|
|**Clickable: hover state**|ui-state-hover|This sets the appearance for the Login, Help, and Preferences buttons when the mouse hovers over them|
|**Clickable: active state**|ui-state-active|This sets the appearance of the selected browse tab|
|Highlight|ui-state-highlight|Not used in Greenstone's default interface|
|**Error**|ui-state-error|Used for error messages on the authentication and login pages|
|Modal screen for overlays|ui-widge-overlay|Not used in Greenstone's default interface|
|Drop Shadows|ui-widget-shadow|Not used in Greenstone's default interface|
|//Bolded sections have a direct effect on the default interface's style//|||

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 [[#Changing a collection's theme|collection]] or the [[#Changing the library's theme|whole library]].

===== Changing the library's theme =====
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:
<code js>
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"}
]
</code>
\\
and add an entry for your new theme (don't forget to add the comma at the end of the second-to-last line!):

<code js>
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>"}
]
</code>
\\
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 **[[http://wiki.greenstone.org/wiki/gsdoc/tutorial/gs3-current/en/using_themes.htm|Customization: Themes]]** 
provides a walkthrough for all aspects of changing your library's theme, including creating and adding the calendar icon.)

===== Changing a collection's theme =====

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:

<code xml>
<!-- 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">
    <link href="{$httpCollection}/style/<theme-folder-name>/<CSS file name>" rel="stylesheet" type="text/css"/>
  </xsl:template>
</code>

//(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:

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


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

<code xml>
<!--Template adding stylesheet to html header-->
  <xsl:template name="additionalHeaderContent">
    <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>
</code>

\\
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 
**[[http://wiki.greenstone.org/wiki/gsdoc/tutorial/gs3-current/en/collection_themes.htm|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.

===== Additional Resources =====
  * [[http://wiki.greenstone.org/wiki/images/a/ac/Skins_Tech_Doc.pdf|Greenstone 3 Skins++ Technical Documentation]] //Maxime Roüast//
The following tutorials involve using themes:
  * **Library-wide themes**: [[http://wiki.greenstone.org/wiki/gsdoc/tutorial/gs3-current/en/using_themes.htm|Customization: Themes]]
  * **Single-collection themes**: [[http://wiki.greenstone.org/wiki/gsdoc/tutorial/gs3-current/en/collection_themes.htm|Collection-specific themes]]
</TAB>
</TABAREA>