Greenstone tutorial exercise
Customization: Themes
This exercise looks at changing the appearance of your entire Greenstone Library using Themes created with jQuery ThemeRoller. First, we will look at how to use premade themes. Then, we will make a custom theme using ThemeRoller.
Using Greenstone Visual Themes
- Enter your Greenstone Library. ( Go to Start → All Programs → Greenstone-3.11 → Greenstone3 Server and click Enter Library.)
- In order to make changes to the library's theme, you must be logged in as an administrator. Click Login in the top right-hand corner. The default login is:
Username: admin
Password: admin
Click Login. It is advisable to change the default password, if you haven't already. To do this, click the admin button in the top right-hand corner, and select Account Settings. Click Change Password. Enter the Old password (admin); then enter a new password in the New password and Retype password text boxes. Click Submit and the password will be changed. Click on the My Greenstone Library link at the top left to go back to the home page. There you'll find a link to the Administration Page further down (you may need to scroll down if there are many collections). Click on it and you'll be taken to the Administration Page, where you can view a list of the current users.
- Go to Preferences. Now that we are signed in as an administrator, we can see the Visual theme: option, where we can quickly change the theme of our collections. These themes were created using JQuery UI’s ThemeRoller (http://jqueryui.com/themeroller/). The first three options (Greenstone Default and Greenstone Custom 1 and 2) are included as part of the Greenstone 3 installation. The remaining themes are retrieved from the web via the jQuery UI API.Select Theme: Greenstone Custom 2 from the drop-down menu, and click Set preferences. Now, all of the collections in your Greenstone library should have the Greenstone Custom 2 theme.Return to the library homepage (click My Greenstone Library in the upper left-hand corner) and explore several of your collections. They should all display the new theme.
Creating a custom theme using ThemeRoller (advanced)
- Go to the jQuery UI ThemeRoller webpage (http://jqueryui.com/themeroller/). The Roll Your Own menu of the ThemeRoller bar on the left can be used to design a custom theme. As changes are made in this menu, the corresponding items on the right reflect these changes. The most important sections for Greenstone customization are:
| Section | HTML class | Greenstone 3 usage |
| 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 and browse tabs when the mouse hovers over them |
| Clickable: active state | ui-state-active | This sets the appearance of the selected browse tab |
ThemeRoller will not affect some aspects of your Greenstone library's appearance, e.g. the actual design layout, the background color, the font, the search button.
- Change the Theme to the following values:
| Header/Toolbar | Background color | #a23336 |
| Texture | glass |
| 50% |
| Border | #000000 |
| Text | #000000 |
| Icon | #000000 |
| Content | Background color | #000000 |
| Texture | inset-soft |
| 25% |
| Border | #000000 |
| Text | #c2bcbc |
| Icon | #c2bcbc |
| Clickable: default state | Background color | #7e7676 |
| Texture | glass |
| 55% |
| Border | #000000 |
| Text | #ffffff |
| Icon | #ffffff |
| Clickable: hover state | Background Color | #303030 |
| Texture | glass |
| 75% |
| Border | #000000 |
| Text | #ffffff |
| Icon | #ffffff |
| Clickable: active state | Background Color | #000000 |
| Texture | glass |
| 65% |
| Border | #000000 |
| Text | #ffffff |
| Icon | #ffffff |
- Click the Download theme button. Select "1.13.2 (Stable, for jQuery1.8+)". Under Components uncheck Toggle All, which will uncheck all of the boxes. Under UI Core check jQuery 1.8+ Support and Keycode, 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 TutorialTheme.) Leave CSS Scope blank. Click Download. In the pop-up window, select Save File and click OK to download the zip file.If you're unable to download the theme you've created, then we have prepared a zip file in advance containing the same ThemeRoller theme: sample_files → downloads → TutorialTheme2019.zip. After extracting, in the following instructions, work with the folder "TutorialTheme" inside any TutorialTheme2019 folder.
- Go to the folder where the zip file was downloaded, and unzip the folder. On Windows, unzip as follows: right-click and select Extract All... Remove the folder name "jquery-ui-1.11.4.custom" from the end of the suggested zip extraction path. (For example, if it suggests C:\Users\me\Downloads\jquery-ui-1.11.4.custom, then change it to C:\Users\me\Downloads\.) Then click Extract.The extracted folder will be called jquery-ui-1.11.1.custom, or something similar. Rename it to TutorialTheme. It should contain css files, an index.html file, a couple of js files and 2 subfolders (called images and external). We largely only need the folder's structure, the css files (particularly jquery-ui.theme.min.css) and the images subfolder, but it's easiest just to copy the entire folder into Greenstone3 → web → interfaces → default → style → themes.
- Go to Greenstone3 → web → interfaces → default → transform → pages and open pref.xsl in a text editor. Find the following section and add in the highlighted text, which can be copied from gs3-theme.tweak.txt). Take note of the initial comma.
<xsl:text disable-output-escaping="yes">
$(document).ready(function(){
$("#switcher").themeswitcher({
imgpath: "interfaces/" + gs.xsltParams.interface_name + "/style/images/",
additionalThemes: [
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:"Tutorial Theme", name:"TutorialTheme", icon:"TutorialTheme.png", url:"interfaces/" + gs.xsltParams.interface_name + "/style/themes/TutorialTheme/jquery-ui.theme.min.css"}
]
});
});
</xsl:text>
Save and close pref.xsl.
- Return to the Library homepage. If not still logged in, login again. Go to the Preferences page and click on the drop-down menu for Visual theme:. (If the Visual theme: option has disappeared, ensure that you copied the highlighted section in its entirety into the correct place in pref.xsl, and check especially that you did not miss the initial comma.) The fifth item in the list should now be "Tutorial Theme". It will not have a calendar icon like the other themes, because the image referenced in the above statement - TutorialTheme.png - does not exist. We'll create an icon to match the theme below. For now, select Tutorial Theme, and click Set preferences. All of your Greenstone collections will be in this new, custom theme.
The Visual theme: drop-down menu in Preferences includes an image for each theme, along with the theme title. If no image is available, only the title is displayed. If you would like to include an image for your custom theme similar to those visible for the other theme options, follow the instructions below.
- Return to the TutorialTheme folder (in Greenstone3 → web → interfaces → default → style → themes). Open index.html in a web browser. Scroll down so that the Datepicker calendar is completely visible on your screen. Take a screenshot: either by using your browser's screenshot feature, first selecting the outline of the Datepicker image, or else use your PC's ability to take the screen shot. (On Windows, you can do this by pressing the print screen - PrtScn - button.)
- Open a picture editor (like Paint) and Paste. Select and crop the image around the calendar under Datepicker. Resize the image to 90px by 80 px. (In Paint, click Resize. Under Resize, choose Pixels. Unselect Maintain aspect ratio. Still under Resize - not the Skew section - change Horizontal to 90 and Vertical to 80 and click <OK>.) Save the image in Greenstone3 → web → interfaces → default → style → images as TutorialTheme.png.
- Return to the Preferences page, and the Tutorial Theme in the Visual theme: drop-down menu will now have a corresponding calendar icon.