- Timestamp:
- 2019-03-13T21:14:15+13:00 (5 years ago)
- File:
-
- 1 edited
Legend:
- Unmodified
- Added
- Removed
-
documentation/trunk/tutorials/xml-source/tutorial_en.xml
r32898 r32899 2424 2424 </NumberedItem> 2425 2425 <NumberedItem> 2426 <Text id="0425">In the <AutoText key="glidict::GUI.Design"/> panel, select the <AutoText key="glidict::CDM.GUI.Plugins"/> section, then select the <AutoText text=" pluginHTMLPlugin"/> line and click <AutoText key="glidict::CDM.PlugInManager.Configure" type="button"/>. A popup window appears. Locate the <AutoText text="file_is_url"/> option (about halfway down the first block of items) and switch it on. Click <AutoText key="glidict::General.OK" type="button"/>.</Text>2426 <Text id="0425">In the <AutoText key="glidict::GUI.Design"/> panel, select the <AutoText key="glidict::CDM.GUI.Plugins"/> section, then select the <AutoText text="HTMLPlugin"/> line and click <AutoText key="glidict::CDM.PlugInManager.Configure" type="button"/>. A popup window appears. Locate the <AutoText text="file_is_url"/> option (about halfway down the first block of items) and switch it on. Click <AutoText key="glidict::General.OK" type="button"/>.</Text> 2427 2427 <Text id="0426">Setting this option to the <AutoText text="HTMLPlugin"/> means that Greenstone sets an additional piece of metadata for each document called <AutoText text="URL"/>, which gives its original URL.</Text> 2428 2428 <Text id="0427">It is important that the files gathered in the collection start with the web domain name (<i>englishhistory.net</i> in this case). The conversion process will not work if you dragged over a subfolder, for example the <Path>tudor</Path> folder, because this will set <AutoText text="URL"/> metadata to something like</Text> … … 2437 2437 </NumberedItem> 2438 2438 <NumberedItem> 2439 <Text id="0430">To make use of the new URL metadata, the icon link must be changed to serve up the original URL rather than the copy stored in the digital library. Go to the <AutoText key="glidict::GUI.Format"/> panel, select the <AutoText key="glidict::CDM.GUI.Formats"/> section and edit the <MajorVersion number="2"><AutoText text="VList" /></MajorVersion><MajorVersion number="3"><AutoText text="documentNode"/> template of the <AutoText text=" Browse" /></MajorVersion> format statement by replacing</Text>2439 <Text id="0430">To make use of the new URL metadata, the icon link must be changed to serve up the original URL rather than the copy stored in the digital library. Go to the <AutoText key="glidict::GUI.Format"/> panel, select the <AutoText key="glidict::CDM.GUI.Formats"/> section and edit the <MajorVersion number="2"><AutoText text="VList" /></MajorVersion><MajorVersion number="3"><AutoText text="documentNode"/> template of the <AutoText text="browse" /></MajorVersion> format statement by replacing</Text> 2440 2440 <MajorVersion number="2"> 2441 2441 <Format>[link][icon][/link]</Format> … … 2485 2485 </NumberedItem> 2486 2486 <NumberedItem> 2487 <Text id="0525">Switch to the <AutoText key="glidict::GUI.Create"/> panel, <b>build</b> the collection, and <b>preview</b> it. Browse through the <MajorVersion number="2"><AutoText key="coredm::_Global:labelTitle_" type="italics"/></MajorVersion><MajorVersion number="3"><AutoText key="gs3::metadata_names::Title.buttonname" type="italics"/></MajorVersion> and view a record or two. Try searching—for example, find items that include <AutoText text="graphics"/>.</Text>2487 <Text id="0525">Switch to the <AutoText key="glidict::GUI.Create"/> panel, <b>build</b> the collection, and <b>preview</b> it. Browse through the <MajorVersion number="2"><AutoText key="coredm::_Global:labelTitle_" type="italics"/></MajorVersion><MajorVersion number="3"><AutoText key="gs3::metadata_names::Title.buttonname" type="italics"/></MajorVersion> classifier and view a record or two. Try searching—for example, find items that include <AutoText text="graphics"/>.</Text> 2488 2488 </NumberedItem> 2489 2489 <NumberedItem> … … 2556 2556 </MajorVersion> 2557 2557 <MajorVersion number="3"> 2558 <Text id="0533-11-1"><b>Rebuild</b> and <b>preview</b> the collection. You will notice that the <AutoText key="gs3::metadata_names::Subject.buttonname" type="italics"/> classifier is empty, searching no longer returns any results, and the document display is useless .</Text>2558 <Text id="0533-11-1"><b>Rebuild</b> and <b>preview</b> the collection. You will notice that the <AutoText key="gs3::metadata_names::Subject.buttonname" type="italics"/> classifier is empty, searching no longer returns any results, and the document display is useless as the linked .nul documents don't exist, resulting in "Not Found" messages from the server.</Text> 2559 2559 <Text id="0533-11b-1">Although the <AutoText key="gs3::metadata_names::Title.buttonname" type="italics"/> classifier was built on <AutoText key="metadata::ex.Title"/>, it still displays the correct titles, but in the <AutoText key="glidict::GUI.Enrich"/> panel you can see the <AutoText key="metadata::ex.Title"/> metadata are actually the filenames rather than titles of the MARC records. This is because the default <AutoText text="browse"/> format uses the <AutoText key="metadata::exp.Title"/> metadata. In the <AutoText key="glidict::CDM.GUI.Formats"/> section of the <AutoText key="glidict::GUI.Format"/> panel, select <AutoText text="global"/> in the list of assigned format statements. The format statement looks like:</Text> 2560 2560 </MajorVersion> … … 2591 2591 <Text id="0533-12b">We need to modify the collection design to take note of these changes.</Text> 2592 2592 <NumberedItem> 2593 <Text id="0533-13">In the <AutoText key="glidict:: CDM.GUI.Indexes"/> section, change the Title index to use <AutoText key="metadata::exp.Title"/>: select the Title index in the <AutoText key="glidict::CDM.IndexManager.Indexes"/> list and click <AutoText key="glidict::CDM.IndexManager.Edit_Index" type="button"/>. Deselect <AutoText key="metadata::dc.Title"/> and <AutoText key="metadata::ex.Title"/> in the list of metadata, and select <AutoText key="metadata::exp.Title"/>. Click <AutoText key="glidict::CDM.IndexManager.Replace_Index" type="button"/>.</Text>2593 <Text id="0533-13">In the <AutoText key="glidict::GUI.Design"/> panel's <AutoText key="glidict::CDM.GUI.Indexes"/> section, change the Title index to use <AutoText key="metadata::exp.Title"/>: select the Title index in the <AutoText key="glidict::CDM.IndexManager.Indexes"/> list and click <AutoText key="glidict::CDM.IndexManager.Edit_Index" type="button"/>. Deselect <AutoText key="metadata::dc.Title"/> and <AutoText key="metadata::ex.Title"/> in the list of metadata, and select <AutoText key="metadata::exp.Title"/>. Click <AutoText key="glidict::CDM.IndexManager.Replace_Index" type="button"/>.</Text> 2594 2594 </NumberedItem> 2595 2595 <NumberedItem> … … 2791 2791 </MajorVersion> 2792 2792 </NumberedItem> 2793 <MajorVersion number="3"><NumberedItem> 2794 <Text id="is-12a-4">Go to the <AutoText text="display"/> format feature in the <AutoText key="glidict::CDM.GUI.Formats"/> section of the <AutoText key="glidict::GUI.Format"/> panel and add the following just after <Format><gsf:option name="TOC" value="true"/></Format>:</Text> 2795 <Format><gsf:template name="documentHeading"/></Format> 2796 </NumberedItem></MajorVersion> 2793 2797 <MajorVersion number="2"> 2794 2798 <NumberedItem> … … 3069 3073 </Content> 3070 3074 </Tutorial></MajorVersion> 3071 <MajorVersion number="3">3072 <Tutorial id="using_themes">3073 <Title>3074 <Text id="themes-1">Customization: Themes</Text>3075 </Title>3076 <SampleFiles folder="custom"/>3077 <Version initial="3.05" current="3.08"/>3078 <Content>3079 <Comment>3080 <Text id="themes-2">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.</Text>3081 </Comment>3082 <Heading>3083 <Text id="themes-0">Using Greenstone Visual Themes</Text>3084 </Heading>3085 <NumberedItem>3086 <Text id="themes-3">Enter your Greenstone Library. ( Go to <Path>Start → All Programs → Greenstone-3.08 → Greenstone3 Server</Path> and click <AutoText text="Enter Library"/>.)</Text>3087 </NumberedItem>3088 <NumberedItem>3089 <Text id="themes-4">In order to make changes to the library's theme, you must be logged in as an administrator. Click <AutoText key="gs3::interface_default::login_b"/> in the top right-hand corner. The default login is:</Text>3090 <Format>3091 <AutoText key="gs3::interface_default::authen.username"/>: admin<br/>3092 <AutoText key="gs3::interface_default::authen.password"/>: admin3093 </Format>3094 <Text id="themes-5">Click <AutoText key="gs3::interface_default::login_b"/>. It is advisable to change the default password, if you haven't already. To do this, click the <AutoText text="admin"/> button in the top right-hand corner, and select <AutoText key="gs3::interface_default::authen.account_settings"/>. Click <AutoText key="gs3::interface_default::authen.change_password"/>. Enter the <AutoText key="gs3::interface_default::authen.old_password"/> (admin); then enter a new password in the <AutoText key="gs3::interface_default::authen.new_password"/> and <AutoText key="gs3::interface_default::authen.retype_password"/> text boxes. Click <AutoText key="gs3::interface_default::authen.submit"/>. The password will be changed, and you will be taken to the <AutoText key="gs3::interface_default::authen.authentication"/>, where you can view a list of the current users.</Text>3095 </NumberedItem>3096 <NumberedItem>3097 <Text id="themes-6">Go to <AutoText key="gs3::interface_default::pref_b"/>. Now that we are signed in as an administrator, we can see the <AutoText key="gs3::interface_default::pref.theme"/> option, where we can quickly change the theme of our collections. These themes were created using JQuery UIâs ThemeRoller (<Link>http://jqueryui.com/themeroller/</Link>). The first four options (Greenstone Default and Greenstone Custom 1, 2 and 3) are included as part of the Greenstone 3 installation. The remaining themes are retrieved from the web via the jQuery UI API.</Text>3098 <Text id="themes-7">Select <AutoText text="Theme: Greenstone Custom 2"/> from the drop-down menu, and click <AutoText key="gs3::interface_default::pref.set_prefs"/>. Now, all of the collections in your Greenstone library should have the Greenstone Custom 2 theme.</Text>3099 <Text id="themes-8">Return to the library homepage (click <AutoText text="My Greenstone Library" type="italics"/> in the upper left-hand corner) and explore several of your collections. They should all display the new theme.</Text>3100 </NumberedItem>3101 <Heading>3102 <Text id="themes-10">Creating a custom theme using ThemeRoller (advanced)</Text>3103 </Heading>3104 <NumberedItem>3105 <Text id="themes-11">Go to the jQuery UI ThemeRoller webpage (<Link>http://jqueryui.com/themeroller/</Link>). The <AutoText text="Roll Your Own"/> menu of the <AutoText text="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:</Text>3106 <Format>3107 <table>3108 <tr style="font-weight:bold"><td>Section</td><td>HTML class</td><td>Greenstone 3 usage</td></tr>3109 <tr><td>Header/Toolbar</td><td>ui-widget-header</td><td>This sets the appearance of the large, main banner and the footer</td></tr>3110 <tr><td>Content</td><td>ui-widget-content</td><td>Sets the appearance for the main area of the page, where the content (e.g. a list of documents) is displayed</td></tr>3111 <tr><td>Clickable: default state</td><td>ui-state-default</td><td>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</td></tr>3112 <tr><td>Clickable: hover state</td><td>ui-state-hover</td><td>This sets the appearance for the Login, Help, and Preferences buttons and browse tabs when the mouse hovers over them</td></tr>3113 <tr><td>Clickable: active state</td><td>ui-state-active</td><td>This sets the appearance of the selected browse tab</td></tr>3114 </table>3115 </Format>3116 <Comment>3117 <Text id="themes-12">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.</Text>3118 </Comment>3119 </NumberedItem>3120 <NumberedItem>3121 <Text id="themes-13">Change the Theme to the following values:</Text>3122 <Format>3123 <table style="text-align:center;border-collapse:collapse" border="1">3124 <tr><td rowspan="6" width="180">Header/Toolbar</td><td width="120">Background color</td><td width="80">#a23336</td></tr>3125 <tr><td rowspan="2">Texture</td><td>glass</td></tr>3126 <tr><td>50%</td></tr>3127 <tr><td>Border</td><td>#000000</td></tr>3128 <tr><td>Text</td><td>#000000</td></tr>3129 <tr><td>Icon</td><td>#000000</td></tr>3130 <tr><td rowspan="6">Content</td><td>Background color</td><td>#000000</td></tr>3131 <tr><td rowspan="2">Texture</td><td>inset-soft</td></tr>3132 <tr><td>25%</td></tr>3133 <tr><td>Border</td><td>#000000</td></tr>3134 <tr><td>Text</td><td>#c2bcbc</td></tr>3135 <tr><td>Icon</td><td>#c2bcbc</td></tr>3136 <tr><td rowspan="6">Clickable: default state</td><td>Background color</td><td>#7e7676</td></tr>3137 <tr><td rowspan="2">Texture</td><td>glass</td></tr>3138 <tr><td>55%</td></tr>3139 <tr><td>Border</td><td>#000000</td></tr>3140 <tr><td>Text</td><td>#ffffff</td></tr>3141 <tr><td>Icon</td><td>#ffffff</td></tr>3142 <tr><td rowspan="6">Clickable: hover state</td><td>Background Color</td><td>#303030</td></tr>3143 <tr><td rowspan="2">Texture</td><td>glass</td></tr>3144 <tr><td>75%</td></tr>3145 <tr><td>Border</td><td>#000000</td></tr>3146 <tr><td>Text</td><td>#ffffff</td></tr>3147 <tr><td>Icon</td><td>#ffffff</td></tr>3148 <tr><td rowspan="6">Clickable: active state</td><td>Background Color</td><td>#000000</td></tr>3149 <tr><td rowspan="2">Texture</td><td>glass</td></tr>3150 <tr><td>65%</td></tr>3151 <tr><td>Border</td><td>#000000</td></tr>3152 <tr><td>Text</td><td>#ffffff</td></tr>3153 <tr><td>Icon</td><td>#ffffff</td></tr>3154 </table>3155 </Format>3156 </NumberedItem>3157 <NumberedItem>3158 <Text id="themes-14">Click the <AutoText text="Download theme"/> button. <!--Ensure the Stable version of jQuery is selected.--> Select "<i>1.11.4 (Legacy, for jQuery1.6+)</i>". Under <AutoText text="Components"/> uncheck <AutoText text="Toggle All" type="italics"/>, which will uncheck all of the boxes. Under <AutoText text="UI Core"/> check <AutoText text="Core" type="italics"/>, and under <AutoText text="Widgets"/> check <AutoText text="Datepicker" type="italics"/>. At the bottom of the page, under <AutoText text="Theme"/>, <AutoText text="Custom Theme" type="italics"/> should be selected. (If there's an option to provide a <AutoText text="Theme Folder Name"/>, enter <AutoText text="TutorialTheme" type="italics"/>.) Leave <AutoText text="CSS Scope"/> blank. Click <AutoText text="Download"/>. In the pop-up window, select <AutoText text="Save File"/> and click <AutoText text="OK"/> to download the zip file.</Text>3159 </NumberedItem>3160 <NumberedItem>3161 <Text id="themes-15">Go to the folder where the zip file was downloaded, and unzip the folder. On Windows, unzip as follows: right-click and select <AutoText text="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 <Path>C:\Users\me\Downloads\jquery-ui-1.11.4.custom</Path>, then change it to <Path>C:\Users\me\Downloads\</Path>.) Then click <AutoText text="Extract"/>.</Text>3162 <Text id="themes-16">The extracted folder will be called <AutoText text="jquery-ui-1.11.1.custom" type="italics"/>, or something similar. Rename it to <AutoText text="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 sufolder, but it's easiest just to copy the entire folder into <Path>Greenstone3 → web → interfaces → default → style → themes</Path>.</Text>3163 <!--<Text id="themes-16">The extracted folder should be named <AutoText text="jquery-ui-1.10.2.custom" type="italics"/>, or something similar, and should contain three folders (css, development-bundle, js) and an html file (index.html). In the <AutoText text="css"/> folder, there is a folder called <AutoText text="TutorialTheme"/>. Copy this entire folder into <Path>Greenstone3 → web → interfaces → default → style → themes</Path>.</Text>-->3164 </NumberedItem>3165 <NumberedItem>3166 <Text id="themes-17">Go to <Path>Greenstone3 → web → interfaces → default → transform → pages</Path> and open <AutoText text="pref.xsl"/> in a text editor. Find the following section and add in the highlighted text, which can be copied from <AutoText text="gs3-theme.tweak.txt" type="italics"/>). Take note of the initial comma. </Text>3167 <Format>3168 <xsl:text disable-output-escaping="yes"><br/>3169 <Tab n="1"/>$(document).ready(function(){<br/>3170 <Tab n="2"/>$("#switcher").themeswitcher({<br/>3171 <Tab n="3"/>imgpath: "interfaces/" + gs.xsltParams.interface_name + "/style/images/",<br/>3172 <Tab n="3"/>additionalThemes: [<br/>3173 <Tab n="4"/>icon:"theme_90_greenstone.png", url:"interfaces/" + gs.xsltParams.interface_name + "/style/themes/main/jquery-ui-1.8.16.custom.css"},<br/>3174 <Tab n="4"/>{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"},<br/>3175 <Tab n="4"/>{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"},<br/>3176 <Tab n="4"/>{title:"Greenstone Custom 3", name:"custom-theme3", icon:"theme_90_trontastic.png", url:"interfaces/" + gs.xsltParams.interface_name + "<br/>/style/themes/alt_theme_3/jquery-ui-1.8.16.custom.css"}<highlight>, <br/>3177 <Tab n="4"/>{title:"Tutorial Theme", name:"TutorialTheme", icon:"TutorialTheme.png", url:"interfaces/" + gs.xsltParams.interface_name + "/style/themes/TutorialTheme/jquery-ui.theme.min.css"}</highlight><br/>3178 <Tab n="3"/>]<br/>3179 <Tab n="2"/>});<br/>3180 <Tab n="1"/>});<br/>3181 </xsl:text><br/>3182 </Format>3183 <Text id="themes-17a">Save and close <AutoText text="pref.xsl"/>.</Text>3184 </NumberedItem>3185 <NumberedItem>3186 <Text id="themes-18">Return to the Library homepage. If not still logged in, login again. Go to the <AutoText key="gs3::interface_default::pref_b"/> page and click on the drop-down menu for <AutoText key="gs3::interface_default::pref.theme"/>. (If the <AutoText key="gs3::interface_default::pref.theme"/> option has disappeared, ensure that you copied the highlighted section in its entirety into the correct place in <AutoText text="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 <AutoText key="gs3::interface_default::pref.set_prefs"/>. All of your Greenstone collections will be in this new, custom theme.</Text>3187 </NumberedItem>3188 <Comment>3189 <Text id="themes-20">The <AutoText key="gs3::interface_default::pref.theme"/> drop-down menu in <AutoText key="gs3::interface_default::pref_b"/> 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. </Text>3190 </Comment>3191 <NumberedItem>3192 <Text id="themes-21">Return to the <AutoText text="TutorialTheme"/> folder (in <Path>Greenstone3 → web → interfaces → default → style → themes</Path>). Open <AutoText text="index.html" type="italics"/> in a web browser. Scroll down so that the Datepicker calendar is completely visible on your screen, and take a screen shot. (On Windows, this is done by pressing the print screen - <AutoText text="PrtScn"/> - button.) </Text>3193 </NumberedItem>3194 <NumberedItem>3195 <Text id="themes-22">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 - <em>not</em> the Skew section - change Horizontal to 90 and Vertical to 80 and click <OK>.) Save the image in <Path>Greenstone3 → web → interfaces → default → style → images </Path> as TutorialTheme.png.</Text>3196 </NumberedItem>3197 <NumberedItem>3198 <Text id="themes-23">Return to the <AutoText key="gs3::interface_default::pref_b"/> page, and the Tutorial Theme in the <AutoText key="gs3::interface_default::pref.theme"/> drop-down menu will now have a corresponding calendar icon.</Text>3199 </NumberedItem>3200 </Content></Tutorial>3201 <Tutorial id="collection_themes">3202 <Title>3203 <Text id="customize-00">Collection-Specific Themes</Text>3204 </Title>3205 <SampleFiles folder="custom"/>3206 <Prerequisite id="using_themes"/>3207 <Version initial="3.05" current="3.08"/>3208 <Content>3209 <Comment>3210 <Text id="customize-01">The <AutoText key="gs3::interface_default::pref.theme"/> menu on the <AutoText key="gs3::interface_default::pref_b"/> 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 <AutoText text="backdrop"/> collection.</Text>3211 </Comment>3212 <Heading>3213 <Text id="customize-02">Creating a custom theme</Text>3214 </Heading>3215 <NumberedItem>3216 <Text id="customize-03">Go to the jQuery UI ThemeRoller webpage (<Link>http://jqueryui.com/themeroller/</Link>). Change the Theme to the following values:</Text>3217 <Format>3218 <table style="text-align:center;border-collapse:collapse" border="1">3219 <tr><td rowspan="6" width="180">Header/Toolbar</td><td width="120">Background color</td><td width="80">#141a38</td></tr>3220 <tr><td rowspan="2">Texture</td><td>highlight_soft</td></tr>3221 <tr><td>45%</td></tr>3222 <tr><td>Border</td><td>#ffffff</td></tr>3223 <tr><td>Text</td><td>#ffffff</td></tr>3224 <tr><td>Icon</td><td>#ffffff</td></tr>3225 <tr><td rowspan="6">Content</td><td>Background color</td><td>#ffffff</td></tr>3226 <tr><td rowspan="2">Texture</td><td>flat</td></tr>3227 <tr><td>75%</td></tr>3228 <tr><td>Border</td><td>#ffffff</td></tr>3229 <tr><td>Text</td><td>#222222</td></tr>3230 <tr><td>Icon</td><td>#222222</td></tr>3231 <tr><td rowspan="6">Clickable: default state</td><td>Background color</td><td>#e9c416</td></tr>3232 <tr><td rowspan="2">Texture</td><td>glass</td></tr>3233 <tr><td>55%</td></tr>3234 <tr><td>Border</td><td>#ffffff</td></tr>3235 <tr><td>Text</td><td>#555555</td></tr>3236 <tr><td>Icon</td><td>#888888</td></tr>3237 <tr><td rowspan="6">Clickable: hover state</td><td>Background Color</td><td>#e9d47b</td></tr>3238 <tr><td rowspan="2">Texture</td><td>glass</td></tr>3239 <tr><td>75%</td></tr>3240 <tr><td>Border</td><td>#ffffff</td></tr>3241 <tr><td>Text</td><td>#212121</td></tr>3242 <tr><td>Icon</td><td>#454545</td></tr>3243 <tr><td rowspan="6">Clickable: active state</td><td>Background Color</td><td>#ffffff</td></tr>3244 <tr><td rowspan="2">Texture</td><td>glass</td></tr>3245 <tr><td>65%</td></tr>3246 <tr><td>Border</td><td>#ffffff</td></tr>3247 <tr><td>Text</td><td>#212121</td></tr>3248 <tr><td>Icon</td><td>#454545</td></tr>3249 </table>3250 </Format>3251 </NumberedItem>3252 <NumberedItem>3253 <Text id="customize-04">Click the <AutoText text="Download theme"/> button. <!--Ensure the Stable version of jQuery is selected.--> Select "<i>1.11.4 (Legacy, for jQuery1.6+)</i>". Under <AutoText text="Components"/> uncheck <AutoText text="Toggle All" type="italics"/>, which will uncheck all of the boxes. Under <AutoText text="UI Core"/> check <AutoText text="Core" type="italics"/>, and under <AutoText text="Widgets"/> check <AutoText text="Datepicker" type="italics"/>. At the bottom of the page, under <AutoText text="Theme"/>, <AutoText text="Custom Theme" type="italics"/> should be selected. (If there's an option to provide a <AutoText text="Theme Folder Name"/>, enter <AutoText text="CollectionTheme" type="italics"/>.) Leave <AutoText text="CSS Scope"/> blank. Click <AutoText text="Download"/>. In the pop-up window, select <AutoText text="Save File"/> and click <AutoText text="OK"/> to download the zip file.</Text>3254 </NumberedItem>3255 <NumberedItem>3256 <Text id="customize-05">Go to the folder where the zip file was downloaded, and unzip the folder (on Windows, right-click, select <AutoText text="Extract All..."/>, remove the folder name <Format>jquery-ui-1.11.4.custom</Format> from the end of the suggested zip extraction path and then click <AutoText text="Extract"/>).</Text>3257 <Text id="customie-06">The extracted folder will be called <AutoText text="jquery-ui-1.11.1.custom" type="italics"/>, or something similar. Rename it to <AutoText text="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 <Path>Greenstone3 → web → sites → localsite → collect → backdrop → style</Path>.</Text>3258 <!--<Text id="customie-06">The extracted folder should be named <AutoText text="jquery-ui-1.10.2.custom" type="italics"/>, or something similar, and should contain three folders (css, development-bundle, js) and an html file (index.html). In the <AutoText text="css"/> folder, there is a folder called <AutoText text="CollectionTheme"/>. Copy this entire folder into <Path>Greenstone3 → web → sites → localsite → collect → backdrop → style</Path>.</Text>-->3259 </NumberedItem>3260 <Heading>3261 <Text id="customize-06">Setting a collection's theme</Text>3262 </Heading>3263 <NumberedItem>3264 <Text id="customize-07">Open the Greenstone Librarian Interface (from the Windows <AutoText text="Start" type="italics"/> menu) and open the <AutoText text="backdrop"/> collection (use the <AutoText key="glidict::Menu.File"/> menu).</Text>3265 </NumberedItem>3266 <NumberedItem>3267 <Text id="customize-08">In the <AutoText key="glidict::GUI.Format"/> panel, select <AutoText key="glidict::CDM.GUI.Formats"/>. Add the following template to the bottom of the <AutoText text="global"/> format features (this can be copied from <AutoText text="gs3-collect-theme.txt" type="italics"/>):</Text>3268 <Format>3269 <xsl:template name="additionalHeaderContent"><br/>3270 <Tab n="1"/><xsl:variable name="httpCollection"><br/>3271 <Tab n="2"/><xsl:value-of select="/page/pageResponse/collection/metadataList/metadata[@name='httpPath']"/><br/>3272 <Tab n="1"/></xsl:variable><br/>3273 <Tab n="1"/><link href="{$httpCollection}/style/CollectionTheme/jquery-ui.theme.css" rel="stylesheet" type="text/css" /><br/>3274 </xsl:template><br/>3275 </Format>3276 <Text id="customize-08a">You could also make it refer to <AutoText text="jquery-ui.theme.min.css"/> instead, which is another version of the same css style file, one with a reduced file size.</Text>3277 </NumberedItem>3278 <NumberedItem>3279 <Text id="customize-09">Click <AutoText key="glidict::CreatePane.Preview_Collection"/> to see the <AutoText text="backdrop"/> collection with the new, custom theme.</Text>3280 </NumberedItem>3281 </Content>3282 </Tutorial>3283 </MajorVersion>3284 3075 <Tutorial id="multimedia_collection_explore"> 3285 3076 <Title> … … 3316 3107 <MajorVersion number="3"> 3317 3108 <NumberedItem> 3318 Start up GLI and open the <AutoText text="Advanced Beatles -- large" type="italics" /> collection. Switch to the <AutoText key="glidict::GUI.Create"/> panel and <b> rebuild</b> the collection. <b>Preview</b> the result.3109 Start up GLI and open the <AutoText text="Advanced Beatles -- large" type="italics" /> collection. Switch to the <AutoText key="glidict::GUI.Create"/> panel and <b>build</b> the collection. <b>Preview</b> the result. 3319 3110 </NumberedItem> 3320 3111 </MajorVersion> … … 3331 3122 <Text id="0548">In the file browser, take a look at the files that make up the collection, in the</Text> 3332 3123 <Path>sample_files → beatles → advbeat_large → import</Path> 3333 <Text id="0549">folder. What a mess! There are over 450 files under seven top-level sub-folders. Organization is minimal, reflecting the different times and ways the files were gathered. For example, <i>html_lyrics</i> and <i>discography</i> are excerpts of web sites, and <i>images</i> contains various images in JPEG format. For each type, drill down through the hierarchy and look at a sample document.</Text>3124 <Text id="0549">folder. What a mess! There are around 450 files under seven top-level sub-folders. Organization is minimal, reflecting the different times and ways the files were gathered. For example, <i>html_lyrics</i>, <i>discography</i> and <i>tablature_txt</i> are excerpts of web sites, and <i>images</i> contains various images in JPEG format. For each type, drill down through the hierarchy and look at a sample document.</Text> 3334 3125 </NumberedItem> 3335 3126 </Content> … … 3548 3339 </Heading> 3549 3340 <NumberedItem> 3550 <Text id="0597">There are sometimes several documents with the same title. For example, <AutoText text="All My Loving" type="italics"/> appears both as lyrics and tablature (under <AutoText text="ALL MY LOVING" type="italics"/>). The <MajorVersion number="2"><AutoText key="coredm::_Global:labelTitle_"/></MajorVersion><MajorVersion number="3"><AutoText key="gs3::metadata_names::Title.buttonname" /></MajorVersion> browser might be improved by grouping these together under a bookshelf icon. This is a job for an <AutoText text="AZCompactList"/>. In a previous tutorial we showed how to use the <AutoText text="bookshelf_type"/> option in <AutoText text="List"/> classifier to group documents with the same metadata value (<AutoText key="metadata::dc.Format"/> in that case) in one bookshelf. Here we use <AutoText text="AZCompactList"/> instead.</Text>3341 <Text id="0597">There are sometimes several documents with the same title. For example, <AutoText text="All My Loving" type="italics"/> appears both as lyrics and tablature (under <AutoText text="ALL MY LOVING" type="italics"/>). The <MajorVersion number="2"><AutoText key="coredm::_Global:labelTitle_"/></MajorVersion><MajorVersion number="3"><AutoText key="gs3::metadata_names::Title.buttonname" /></MajorVersion> browser might be improved by grouping these together under a bookshelf icon. This is a job for an <AutoText text="AZCompactList"/>. Earlier in this tutorial we showed how to use the <AutoText text="bookshelf_type"/> option in <AutoText text="List"/> classifier to group documents with the same metadata value (<AutoText key="metadata::dc.Format"/> in that case) in one bookshelf. Here we use <AutoText text="AZCompactList"/> instead.</Text> 3551 3342 <BulletList> 3552 3343 <Bullet> … … 3607 3398 <Text id="0612a">Adding a Phind phrase browser</Text> 3608 3399 </Heading> 3400 <Comment> 3401 <Text id="0612a-1">Java applet support is being or has been phased out in various browsers and browser versions. As a result the following step will not work on <Link url="https://stackoverflow.com/questions/31816839/how-do-i-enable-java-in-microsoft-edge-web-browser">Microsoft Edge</Link> browsers, among others. If you're using such a browser, you may skip this step.</Text> 3402 </Comment> 3609 3403 <NumberedItem> 3610 3404 <Text id="0612">In the <AutoText key="glidict::CDM.GUI.Classifiers"/> section on the <AutoText key="glidict::GUI.Design"/> panel, add a <AutoText text="Phind"/> classifier. Leave the settings at their defaults: this generates a phrase browsing classifier that sources its phrases from <i>Title</i> and <i>text</i>.</Text> … … 3615 3409 </Heading> 3616 3410 <NumberedItem> 3617 <Text id="0613">To complete the collection, let s give it a new image for the <MajorVersion number="2">top left corner of the page</MajorVersion><MajorVersion number="3">link from the main page</MajorVersion>. Go to the <AutoText key="glidict::CDM.GUI.General"/> section of the <AutoText key="glidict::GUI.Format"/> panel. Use the browse button of <AutoText key="glidict::CDM.General.Icon_Collection"/> to select the following image:</Text>3411 <Text id="0613">To complete the collection, let's give it a new image for the <MajorVersion number="2">top left corner of the page</MajorVersion><MajorVersion number="3">link from the main page</MajorVersion>. Go to the <AutoText key="glidict::CDM.GUI.General"/> section of the <AutoText key="glidict::GUI.Format"/> panel. Use the browse button of <AutoText key="glidict::CDM.General.Icon_Collection"/> to select the following image:</Text> 3618 3412 <Path>sample_files → beatles → advbeat_large → images → beatlesmm.png</Path> 3619 3413 <Text id="0613a"><b>Preview</b> the collection, and make sure the new image appears.</Text> … … 3707 3501 </MajorVersion> 3708 3502 <NumberedItem> 3709 <Text id="0648">Open the collection in GLI again and update <MajorVersion number="2"><AutoText text="VList" /> your format statement</MajorVersion><MajorVersion number="3">the previously edited portion of the <AutoText text="documentNode"/> format statement of the <AutoText text="browse"/> format feature</MajorVersion> (in <AutoText key="glidict::CDM.GUI.Formats"/> on the <AutoText key="glidict::GUI.Format"/> panel) to be the following. You can copy this text from the file <Path>sample_files → beatles → format_tweaks → multi_icons<MajorVersion number="3">_3</MajorVersion>.txt</Path>.<MajorVersion number="3"> Change: </MajorVersion></Text>3503 <Text id="0648">Open the collection in GLI again and update <MajorVersion number="2"><AutoText text="VList" /> your format statement</MajorVersion><MajorVersion number="3">the previously edited portion of the <AutoText text="documentNode"/> format statement of the <AutoText text="browse"/> format feature</MajorVersion> (in <AutoText key="glidict::CDM.GUI.Formats"/> on the <AutoText key="glidict::GUI.Format"/> panel) to be the following. You can copy this text from the file <Path>sample_files → beatles → format_tweaks → multi_icons<MajorVersion number="3">_3</MajorVersion>.txt</Path>.<MajorVersion number="3"> Change: </MajorVersion></Text> 3710 3504 <Format> 3711 3505 <MajorVersion number="2"> … … 5561 5355 </Content> 5562 5356 </Tutorial> 5357 <MajorVersion number="3"> 5358 <Tutorial id="using_themes"> 5359 <Title> 5360 <Text id="themes-1">Customization: Themes</Text> 5361 </Title> 5362 <SampleFiles folder="custom"/> 5363 <Version initial="3.05" current="3.08"/> 5364 <Content> 5365 <Comment> 5366 <Text id="themes-2">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.</Text> 5367 </Comment> 5368 <Heading> 5369 <Text id="themes-0">Using Greenstone Visual Themes</Text> 5370 </Heading> 5371 <NumberedItem> 5372 <Text id="themes-3">Enter your Greenstone Library. ( Go to <Path>Start → All Programs → Greenstone-3.08 → Greenstone3 Server</Path> and click <AutoText text="Enter Library"/>.)</Text> 5373 </NumberedItem> 5374 <NumberedItem> 5375 <Text id="themes-4">In order to make changes to the library's theme, you must be logged in as an administrator. Click <AutoText key="gs3::interface_default::login_b"/> in the top right-hand corner. The default login is:</Text> 5376 <Format> 5377 <AutoText key="gs3::interface_default::authen.username"/>: admin<br/> 5378 <AutoText key="gs3::interface_default::authen.password"/>: admin 5379 </Format> 5380 <Text id="themes-5">Click <AutoText key="gs3::interface_default::login_b"/>. It is advisable to change the default password, if you haven't already. To do this, click the <AutoText text="admin"/> button in the top right-hand corner, and select <AutoText key="gs3::interface_default::authen.account_settings"/>. Click <AutoText key="gs3::interface_default::authen.change_password"/>. Enter the <AutoText key="gs3::interface_default::authen.old_password"/> (admin); then enter a new password in the <AutoText key="gs3::interface_default::authen.new_password"/> and <AutoText key="gs3::interface_default::authen.retype_password"/> text boxes. Click <AutoText key="gs3::interface_default::authen.submit"/>. The password will be changed, and you will be taken to the <AutoText key="gs3::interface_default::authen.authentication"/>, where you can view a list of the current users.</Text> 5381 </NumberedItem> 5382 <NumberedItem> 5383 <Text id="themes-6">Go to <AutoText key="gs3::interface_default::pref_b"/>. Now that we are signed in as an administrator, we can see the <AutoText key="gs3::interface_default::pref.theme"/> option, where we can quickly change the theme of our collections. These themes were created using JQuery UIâs ThemeRoller (<Link>http://jqueryui.com/themeroller/</Link>). The first four options (Greenstone Default and Greenstone Custom 1, 2 and 3) are included as part of the Greenstone 3 installation. The remaining themes are retrieved from the web via the jQuery UI API.</Text> 5384 <Text id="themes-7">Select <AutoText text="Theme: Greenstone Custom 2"/> from the drop-down menu, and click <AutoText key="gs3::interface_default::pref.set_prefs"/>. Now, all of the collections in your Greenstone library should have the Greenstone Custom 2 theme.</Text> 5385 <Text id="themes-8">Return to the library homepage (click <AutoText text="My Greenstone Library" type="italics"/> in the upper left-hand corner) and explore several of your collections. They should all display the new theme.</Text> 5386 </NumberedItem> 5387 <Heading> 5388 <Text id="themes-10">Creating a custom theme using ThemeRoller (advanced)</Text> 5389 </Heading> 5390 <NumberedItem> 5391 <Text id="themes-11">Go to the jQuery UI ThemeRoller webpage (<Link>http://jqueryui.com/themeroller/</Link>). The <AutoText text="Roll Your Own"/> menu of the <AutoText text="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:</Text> 5392 <Format> 5393 <table> 5394 <tr style="font-weight:bold"><td>Section</td><td>HTML class</td><td>Greenstone 3 usage</td></tr> 5395 <tr><td>Header/Toolbar</td><td>ui-widget-header</td><td>This sets the appearance of the large, main banner and the footer</td></tr> 5396 <tr><td>Content</td><td>ui-widget-content</td><td>Sets the appearance for the main area of the page, where the content (e.g. a list of documents) is displayed</td></tr> 5397 <tr><td>Clickable: default state</td><td>ui-state-default</td><td>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</td></tr> 5398 <tr><td>Clickable: hover state</td><td>ui-state-hover</td><td>This sets the appearance for the Login, Help, and Preferences buttons and browse tabs when the mouse hovers over them</td></tr> 5399 <tr><td>Clickable: active state</td><td>ui-state-active</td><td>This sets the appearance of the selected browse tab</td></tr> 5400 </table> 5401 </Format> 5402 <Comment> 5403 <Text id="themes-12">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.</Text> 5404 </Comment> 5405 </NumberedItem> 5406 <NumberedItem> 5407 <Text id="themes-13">Change the Theme to the following values:</Text> 5408 <Format> 5409 <table style="text-align:center;border-collapse:collapse" border="1"> 5410 <tr><td rowspan="6" width="180">Header/Toolbar</td><td width="120">Background color</td><td width="80">#a23336</td></tr> 5411 <tr><td rowspan="2">Texture</td><td>glass</td></tr> 5412 <tr><td>50%</td></tr> 5413 <tr><td>Border</td><td>#000000</td></tr> 5414 <tr><td>Text</td><td>#000000</td></tr> 5415 <tr><td>Icon</td><td>#000000</td></tr> 5416 <tr><td rowspan="6">Content</td><td>Background color</td><td>#000000</td></tr> 5417 <tr><td rowspan="2">Texture</td><td>inset-soft</td></tr> 5418 <tr><td>25%</td></tr> 5419 <tr><td>Border</td><td>#000000</td></tr> 5420 <tr><td>Text</td><td>#c2bcbc</td></tr> 5421 <tr><td>Icon</td><td>#c2bcbc</td></tr> 5422 <tr><td rowspan="6">Clickable: default state</td><td>Background color</td><td>#7e7676</td></tr> 5423 <tr><td rowspan="2">Texture</td><td>glass</td></tr> 5424 <tr><td>55%</td></tr> 5425 <tr><td>Border</td><td>#000000</td></tr> 5426 <tr><td>Text</td><td>#ffffff</td></tr> 5427 <tr><td>Icon</td><td>#ffffff</td></tr> 5428 <tr><td rowspan="6">Clickable: hover state</td><td>Background Color</td><td>#303030</td></tr> 5429 <tr><td rowspan="2">Texture</td><td>glass</td></tr> 5430 <tr><td>75%</td></tr> 5431 <tr><td>Border</td><td>#000000</td></tr> 5432 <tr><td>Text</td><td>#ffffff</td></tr> 5433 <tr><td>Icon</td><td>#ffffff</td></tr> 5434 <tr><td rowspan="6">Clickable: active state</td><td>Background Color</td><td>#000000</td></tr> 5435 <tr><td rowspan="2">Texture</td><td>glass</td></tr> 5436 <tr><td>65%</td></tr> 5437 <tr><td>Border</td><td>#000000</td></tr> 5438 <tr><td>Text</td><td>#ffffff</td></tr> 5439 <tr><td>Icon</td><td>#ffffff</td></tr> 5440 </table> 5441 </Format> 5442 </NumberedItem> 5443 <NumberedItem> 5444 <Text id="themes-14">Click the <AutoText text="Download theme"/> button. <!--Ensure the Stable version of jQuery is selected.--> Select "<i>1.11.4 (Legacy, for jQuery1.6+)</i>". Under <AutoText text="Components"/> uncheck <AutoText text="Toggle All" type="italics"/>, which will uncheck all of the boxes. Under <AutoText text="UI Core"/> check <AutoText text="Core" type="italics"/>, and under <AutoText text="Widgets"/> check <AutoText text="Datepicker" type="italics"/>. At the bottom of the page, under <AutoText text="Theme"/>, <AutoText text="Custom Theme" type="italics"/> should be selected. (If there's an option to provide a <AutoText text="Theme Folder Name"/>, enter <AutoText text="TutorialTheme" type="italics"/>.) Leave <AutoText text="CSS Scope"/> blank. Click <AutoText text="Download"/>. In the pop-up window, select <AutoText text="Save File"/> and click <AutoText text="OK"/> to download the zip file.</Text> 5445 </NumberedItem> 5446 <NumberedItem> 5447 <Text id="themes-15">Go to the folder where the zip file was downloaded, and unzip the folder. On Windows, unzip as follows: right-click and select <AutoText text="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 <Path>C:\Users\me\Downloads\jquery-ui-1.11.4.custom</Path>, then change it to <Path>C:\Users\me\Downloads\</Path>.) Then click <AutoText text="Extract"/>.</Text> 5448 <Text id="themes-16">The extracted folder will be called <AutoText text="jquery-ui-1.11.1.custom" type="italics"/>, or something similar. Rename it to <AutoText text="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 sufolder, but it's easiest just to copy the entire folder into <Path>Greenstone3 → web → interfaces → default → style → themes</Path>.</Text> 5449 <!--<Text id="themes-16">The extracted folder should be named <AutoText text="jquery-ui-1.10.2.custom" type="italics"/>, or something similar, and should contain three folders (css, development-bundle, js) and an html file (index.html). In the <AutoText text="css"/> folder, there is a folder called <AutoText text="TutorialTheme"/>. Copy this entire folder into <Path>Greenstone3 → web → interfaces → default → style → themes</Path>.</Text>--> 5450 </NumberedItem> 5451 <NumberedItem> 5452 <Text id="themes-17">Go to <Path>Greenstone3 → web → interfaces → default → transform → pages</Path> and open <AutoText text="pref.xsl"/> in a text editor. Find the following section and add in the highlighted text, which can be copied from <AutoText text="gs3-theme.tweak.txt" type="italics"/>). Take note of the initial comma. </Text> 5453 <Format> 5454 <xsl:text disable-output-escaping="yes"><br/> 5455 <Tab n="1"/>$(document).ready(function(){<br/> 5456 <Tab n="2"/>$("#switcher").themeswitcher({<br/> 5457 <Tab n="3"/>imgpath: "interfaces/" + gs.xsltParams.interface_name + "/style/images/",<br/> 5458 <Tab n="3"/>additionalThemes: [<br/> 5459 <Tab n="4"/>icon:"theme_90_greenstone.png", url:"interfaces/" + gs.xsltParams.interface_name + "/style/themes/main/jquery-ui-1.8.16.custom.css"},<br/> 5460 <Tab n="4"/>{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"},<br/> 5461 <Tab n="4"/>{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"},<br/> 5462 <Tab n="4"/>{title:"Greenstone Custom 3", name:"custom-theme3", icon:"theme_90_trontastic.png", url:"interfaces/" + gs.xsltParams.interface_name + "<br/>/style/themes/alt_theme_3/jquery-ui-1.8.16.custom.css"}<highlight>, <br/> 5463 <Tab n="4"/>{title:"Tutorial Theme", name:"TutorialTheme", icon:"TutorialTheme.png", url:"interfaces/" + gs.xsltParams.interface_name + "/style/themes/TutorialTheme/jquery-ui.theme.min.css"}</highlight><br/> 5464 <Tab n="3"/>]<br/> 5465 <Tab n="2"/>});<br/> 5466 <Tab n="1"/>});<br/> 5467 </xsl:text><br/> 5468 </Format> 5469 <Text id="themes-17a">Save and close <AutoText text="pref.xsl"/>.</Text> 5470 </NumberedItem> 5471 <NumberedItem> 5472 <Text id="themes-18">Return to the Library homepage. If not still logged in, login again. Go to the <AutoText key="gs3::interface_default::pref_b"/> page and click on the drop-down menu for <AutoText key="gs3::interface_default::pref.theme"/>. (If the <AutoText key="gs3::interface_default::pref.theme"/> option has disappeared, ensure that you copied the highlighted section in its entirety into the correct place in <AutoText text="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 <AutoText key="gs3::interface_default::pref.set_prefs"/>. All of your Greenstone collections will be in this new, custom theme.</Text> 5473 </NumberedItem> 5474 <Comment> 5475 <Text id="themes-20">The <AutoText key="gs3::interface_default::pref.theme"/> drop-down menu in <AutoText key="gs3::interface_default::pref_b"/> 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. </Text> 5476 </Comment> 5477 <NumberedItem> 5478 <Text id="themes-21">Return to the <AutoText text="TutorialTheme"/> folder (in <Path>Greenstone3 → web → interfaces → default → style → themes</Path>). Open <AutoText text="index.html" type="italics"/> in a web browser. Scroll down so that the Datepicker calendar is completely visible on your screen, and take a screen shot. (On Windows, this is done by pressing the print screen - <AutoText text="PrtScn"/> - button.) </Text> 5479 </NumberedItem> 5480 <NumberedItem> 5481 <Text id="themes-22">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 - <em>not</em> the Skew section - change Horizontal to 90 and Vertical to 80 and click <OK>.) Save the image in <Path>Greenstone3 → web → interfaces → default → style → images </Path> as TutorialTheme.png.</Text> 5482 </NumberedItem> 5483 <NumberedItem> 5484 <Text id="themes-23">Return to the <AutoText key="gs3::interface_default::pref_b"/> page, and the Tutorial Theme in the <AutoText key="gs3::interface_default::pref.theme"/> drop-down menu will now have a corresponding calendar icon.</Text> 5485 </NumberedItem> 5486 </Content></Tutorial> 5487 <Tutorial id="collection_themes"> 5488 <Title> 5489 <Text id="customize-00">Collection-Specific Themes</Text> 5490 </Title> 5491 <SampleFiles folder="custom"/> 5492 <Prerequisite id="using_themes"/> 5493 <Version initial="3.05" current="3.08"/> 5494 <Content> 5495 <Comment> 5496 <Text id="customize-01">The <AutoText key="gs3::interface_default::pref.theme"/> menu on the <AutoText key="gs3::interface_default::pref_b"/> 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 <AutoText text="backdrop"/> collection.</Text> 5497 </Comment> 5498 <Heading> 5499 <Text id="customize-02">Creating a custom theme</Text> 5500 </Heading> 5501 <NumberedItem> 5502 <Text id="customize-03">Go to the jQuery UI ThemeRoller webpage (<Link>http://jqueryui.com/themeroller/</Link>). Change the Theme to the following values:</Text> 5503 <Format> 5504 <table style="text-align:center;border-collapse:collapse" border="1"> 5505 <tr><td rowspan="6" width="180">Header/Toolbar</td><td width="120">Background color</td><td width="80">#141a38</td></tr> 5506 <tr><td rowspan="2">Texture</td><td>highlight_soft</td></tr> 5507 <tr><td>45%</td></tr> 5508 <tr><td>Border</td><td>#ffffff</td></tr> 5509 <tr><td>Text</td><td>#ffffff</td></tr> 5510 <tr><td>Icon</td><td>#ffffff</td></tr> 5511 <tr><td rowspan="6">Content</td><td>Background color</td><td>#ffffff</td></tr> 5512 <tr><td rowspan="2">Texture</td><td>flat</td></tr> 5513 <tr><td>75%</td></tr> 5514 <tr><td>Border</td><td>#ffffff</td></tr> 5515 <tr><td>Text</td><td>#222222</td></tr> 5516 <tr><td>Icon</td><td>#222222</td></tr> 5517 <tr><td rowspan="6">Clickable: default state</td><td>Background color</td><td>#e9c416</td></tr> 5518 <tr><td rowspan="2">Texture</td><td>glass</td></tr> 5519 <tr><td>55%</td></tr> 5520 <tr><td>Border</td><td>#ffffff</td></tr> 5521 <tr><td>Text</td><td>#555555</td></tr> 5522 <tr><td>Icon</td><td>#888888</td></tr> 5523 <tr><td rowspan="6">Clickable: hover state</td><td>Background Color</td><td>#e9d47b</td></tr> 5524 <tr><td rowspan="2">Texture</td><td>glass</td></tr> 5525 <tr><td>75%</td></tr> 5526 <tr><td>Border</td><td>#ffffff</td></tr> 5527 <tr><td>Text</td><td>#212121</td></tr> 5528 <tr><td>Icon</td><td>#454545</td></tr> 5529 <tr><td rowspan="6">Clickable: active state</td><td>Background Color</td><td>#ffffff</td></tr> 5530 <tr><td rowspan="2">Texture</td><td>glass</td></tr> 5531 <tr><td>65%</td></tr> 5532 <tr><td>Border</td><td>#ffffff</td></tr> 5533 <tr><td>Text</td><td>#212121</td></tr> 5534 <tr><td>Icon</td><td>#454545</td></tr> 5535 </table> 5536 </Format> 5537 </NumberedItem> 5538 <NumberedItem> 5539 <Text id="customize-04">Click the <AutoText text="Download theme"/> button. <!--Ensure the Stable version of jQuery is selected.--> Select "<i>1.11.4 (Legacy, for jQuery1.6+)</i>". Under <AutoText text="Components"/> uncheck <AutoText text="Toggle All" type="italics"/>, which will uncheck all of the boxes. Under <AutoText text="UI Core"/> check <AutoText text="Core" type="italics"/>, and under <AutoText text="Widgets"/> check <AutoText text="Datepicker" type="italics"/>. At the bottom of the page, under <AutoText text="Theme"/>, <AutoText text="Custom Theme" type="italics"/> should be selected. (If there's an option to provide a <AutoText text="Theme Folder Name"/>, enter <AutoText text="CollectionTheme" type="italics"/>.) Leave <AutoText text="CSS Scope"/> blank. Click <AutoText text="Download"/>. In the pop-up window, select <AutoText text="Save File"/> and click <AutoText text="OK"/> to download the zip file.</Text> 5540 </NumberedItem> 5541 <NumberedItem> 5542 <Text id="customize-05">Go to the folder where the zip file was downloaded, and unzip the folder (on Windows, right-click, select <AutoText text="Extract All..."/>, remove the folder name <Format>jquery-ui-1.11.4.custom</Format> from the end of the suggested zip extraction path and then click <AutoText text="Extract"/>).</Text> 5543 <Text id="customie-06">The extracted folder will be called <AutoText text="jquery-ui-1.11.1.custom" type="italics"/>, or something similar. Rename it to <AutoText text="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 <Path>Greenstone3 → web → sites → localsite → collect → backdrop → style</Path>.</Text> 5544 <!--<Text id="customie-06">The extracted folder should be named <AutoText text="jquery-ui-1.10.2.custom" type="italics"/>, or something similar, and should contain three folders (css, development-bundle, js) and an html file (index.html). In the <AutoText text="css"/> folder, there is a folder called <AutoText text="CollectionTheme"/>. Copy this entire folder into <Path>Greenstone3 → web → sites → localsite → collect → backdrop → style</Path>.</Text>--> 5545 </NumberedItem> 5546 <Heading> 5547 <Text id="customize-06">Setting a collection's theme</Text> 5548 </Heading> 5549 <NumberedItem> 5550 <Text id="customize-07">Open the Greenstone Librarian Interface (from the Windows <AutoText text="Start" type="italics"/> menu) and open the <AutoText text="backdrop"/> collection (use the <AutoText key="glidict::Menu.File"/> menu).</Text> 5551 </NumberedItem> 5552 <NumberedItem> 5553 <Text id="customize-08">In the <AutoText key="glidict::GUI.Format"/> panel, select <AutoText key="glidict::CDM.GUI.Formats"/>. Add the following template to the bottom of the <AutoText text="global"/> format features (this can be copied from <AutoText text="gs3-collect-theme.txt" type="italics"/>):</Text> 5554 <Format> 5555 <xsl:template name="additionalHeaderContent"><br/> 5556 <Tab n="1"/><xsl:variable name="httpCollection"><br/> 5557 <Tab n="2"/><xsl:value-of select="/page/pageResponse/collection/metadataList/metadata[@name='httpPath']"/><br/> 5558 <Tab n="1"/></xsl:variable><br/> 5559 <Tab n="1"/><link href="{$httpCollection}/style/CollectionTheme/jquery-ui.theme.css" rel="stylesheet" type="text/css" /><br/> 5560 </xsl:template><br/> 5561 </Format> 5562 <Text id="customize-08a">You could also make it refer to <AutoText text="jquery-ui.theme.min.css"/> instead, which is another version of the same css style file, one with a reduced file size.</Text> 5563 </NumberedItem> 5564 <NumberedItem> 5565 <Text id="customize-09">Click <AutoText key="glidict::CreatePane.Preview_Collection"/> to see the <AutoText text="backdrop"/> collection with the new, custom theme.</Text> 5566 </NumberedItem> 5567 </Content> 5568 </Tutorial> 5569 </MajorVersion> 5563 5570 <MajorVersion number="3"> 5564 5571 <Tutorial id="home_page">
Note:
See TracChangeset
for help on using the changeset viewer.
