User Tools

Site Tools


en:user:themes
This version is outdated by a newer approved version.DiffThis version (2014/04/13 23:52) is a draft.
Approvals: 0/1

This is an old revision of the document!


<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 JQuery's ThemeRoller website, and change the settings on the "Roll your own" tab on the left-hand side of the page.

ThemeRoller Options
SectionHTML classGreenstone 3 usage
Font Settingsui-widgetNot 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/Toolbarui-widget-headerThis sets the appearance of the large, main banner and the footer
Contentui-widget-contentSets the appearance for the main area of the page, where the content (e.g. a list of documents) is displayed
Clickable: default stateui-state-defaultSets 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 stateui-state-hoverThis sets the appearance for the Login, Help, and Preferences buttons when the mouse hovers over them
Clickable: active stateui-state-activeThis sets the appearance of the selected browse tab
Highlightui-state-highlightNot used in Greenstone's default interface
Errorui-state-errorUsed for error messages on the authentication and login pages
Modal screen for overlaysui-widge-overlayNot used in Greenstone's default interface
Drop Shadowsui-widget-shadowNot 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 collection or the 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:
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.)

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:
<!-- 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>

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

Additional Resources

The following tutorials involve using themes:

</TAB> </TABAREA>

en/user/themes.1397433133.txt.gz · Last modified: 2018/07/31 00:56 (external edit)