Changeset 27855
- Timestamp:
- 2013-07-15T14:55:44+12:00 (11 years ago)
- File:
-
- 1 edited
Legend:
- Unmodified
- Added
- Removed
-
documentation/trunk/tutorials/xml-source/tutorial_en.xml
r27795 r27855 2783 2783 </Content> 2784 2784 </Tutorial></MajorVersion> 2785 <MajorVersion number="3"> 2786 <Tutorial id="using_themes"> 2787 <Title> 2788 <Text id="themes-1">Customization: Themes</Text> 2789 </Title> 2790 <SampleFiles folder="custom"/> 2791 <Version initial="3.05" current="3.05"/> 2792 <Content> 2793 <Comment> 2794 <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> 2795 </Comment> 2796 <Heading> 2797 <Text id="themes-0">Using Greenstone Visual Themes</Text> 2798 </Heading> 2799 <NumberedItem> 2800 <Text id="themes-3">Enter your Greenstone Library. ( Go to <Path>Start → All Programs → Greenstone-3.05 → Greenstone3 Server</Path> and click <AutoText text="Enter Library"/>.)</Text> 2801 </NumberedItem> 2802 <NumberedItem> 2803 <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> 2804 <Format> 2805 <AutoText key="gs3::interface_default::authen.username"/>: admin<br/> 2806 <AutoText key="gs3::interface_default::authen.password"/>: admin 2807 </Format> 2808 <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> 2809 </NumberedItem> 2810 <NumberedItem> 2811 <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> 2812 <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> 2813 <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> 2814 </NumberedItem> 2815 <Heading> 2816 <Text id="themes-10">Creating a custom theme using ThemeRoller (advanced)</Text> 2817 </Heading> 2818 <NumberedItem> 2819 <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> 2820 <Format> 2821 <table> 2822 <tr style="font-weight:bold"><td>Section</td><td>HTML class</td><td>Greenstone 3 usage</td></tr> 2823 <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> 2824 <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> 2825 <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> 2826 <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> 2827 <tr><td>Clickable: active state</td><td>ui-state-active</td><td>This sets the appearance of the selected browse tab</td></tr> 2828 </table> 2829 </Format> 2830 <Comment> 2831 <Text id="themes-12">ThemeRoller will not affect some aspects of you Greenstone library's appearance, e.g. the actual design layout, the background color, the font, the search button.</Text> 2832 </Comment> 2833 </NumberedItem> 2834 <NumberedItem> 2835 <Text id="themes-13">Change the Theme to the following values:</Text> 2836 <Format> 2837 <table style="text-align:center;border-collapse:collapse" border="1"> 2838 <tr><td rowspan="6" width="180">Header/Toolbar</td><td width="120">Background color</td><td width="80">#a23336</td></tr> 2839 <tr><td rowspan="2">Texture</td><td>glass</td></tr> 2840 <tr><td>50%</td></tr> 2841 <tr><td>Border</td><td>#000000</td></tr> 2842 <tr><td>Text</td><td>#000000</td></tr> 2843 <tr><td>Icon</td><td>#000000</td></tr> 2844 <tr><td rowspan="6">Content</td><td>Background color</td><td>#000000</td></tr> 2845 <tr><td rowspan="2">Texture</td><td>inset-soft</td></tr> 2846 <tr><td>25%</td></tr> 2847 <tr><td>Border</td><td>#000000</td></tr> 2848 <tr><td>Text</td><td>#c2bcbc</td></tr> 2849 <tr><td>Icon</td><td>#c2bcbc</td></tr> 2850 <tr><td rowspan="6">Clickable: default state</td><td>Background color</td><td>#7e7676</td></tr> 2851 <tr><td rowspan="2">Texture</td><td>glass</td></tr> 2852 <tr><td>55%</td></tr> 2853 <tr><td>Border</td><td>#000000</td></tr> 2854 <tr><td>Text</td><td>#ffffff</td></tr> 2855 <tr><td>Icon</td><td>#ffffff</td></tr> 2856 <tr><td rowspan="6">Clickable: hover state</td><td>Background Color</td><td>#303030</td></tr> 2857 <tr><td rowspan="2">Texture</td><td>glass</td></tr> 2858 <tr><td>75%</td></tr> 2859 <tr><td>Border</td><td>#000000</td></tr> 2860 <tr><td>Text</td><td>#ffffff</td></tr> 2861 <tr><td>Icon</td><td>#ffffff</td></tr> 2862 <tr><td rowspan="6">Clickable: active state</td><td>Background Color</td><td>#000000</td></tr> 2863 <tr><td rowspan="2">Texture</td><td>glass</td></tr> 2864 <tr><td>65%</td></tr> 2865 <tr><td>Border</td><td>#000000</td></tr> 2866 <tr><td>Text</td><td>#ffffff</td></tr> 2867 <tr><td>Icon</td><td>#ffffff</td></tr> 2868 </table> 2869 </Format> 2870 </NumberedItem> 2871 <NumberedItem> 2872 <Text id="themes-14">Click the <AutoText text="Download theme"/> button. Ensure the Stable version if jQuery is selected. 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. For <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> 2873 </NumberedItem> 2874 <NumberedItem> 2875 <Text id="themes-15">Go to the folder where the zip file was downloaded, and unzip the folder (on Windows, right-click, select <AutoText text="Extract All..."/> and click <AutoText text="Extract"/>).</Text> 2876 <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> 2877 </NumberedItem> 2878 <NumberedItem> 2879 <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> 2880 <Format> 2881 <xsl:text disable-output-escaping="yes"><br/> 2882 <Tab n="1"/>$(document).ready(function(){<br/> 2883 <Tab n="2"/>$("#switcher").themeswitcher({<br/> 2884 <Tab n="3"/>imgpath: "interfaces/" + gs.xsltParams.interface_name + "/style/images/",<br/> 2885 <Tab n="3"/>additionalThemes: [<br/> 2886 <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/> 2887 <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/> 2888 <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/> 2889 <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/> 2890 <Tab n="4"/>{title:"Tutorial Theme", name:"TutorialTheme", icon:"TutorialTheme.png", url:"interfaces/" + gs.xsltParams.interface_name + "/style/themes/TutorialTheme/jquery-ui-1.10.2.custom.css"}</highlight><br/> 2891 <Tab n="3"/>]<br/> 2892 <Tab n="2"/>});<br/> 2893 <Tab n="1"/>});<br/> 2894 </xsl:text><br/> 2895 </Format> 2896 <Text id="themes-17a">Save and close <AutoText text="pref.xsl"/>.</Text> 2897 </NumberedItem> 2898 <NumberedItem> 2899 <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"/>, 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. To create an icon to match the theme, see below.) 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> 2900 </NumberedItem> 2901 <Comment> 2902 <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> 2903 </Comment> 2904 <NumberedItem> 2905 <Text id="themes-21">Return to the folder extracted from the zip file downloaded from jQuery (<AutoText text="jquery-ui-1.10.2.custom"/> or something similar). 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> 2906 </NumberedItem> 2907 <NumberedItem> 2908 <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> 2909 </NumberedItem> 2910 <NumberedItem> 2911 <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 corresonding calendar icon.</Text> 2912 </NumberedItem> 2913 </Content></Tutorial> 2914 <Tutorial id="collection_themes"> 2915 <Title> 2916 <Text id="customize-00">Collection-Specific Themes</Text> 2917 </Title> 2918 <SampleFiles folder="custom"/> 2919 <Prerequisite id="using_themes"/> 2920 <Version initial="3.05" current="3.05"/> 2921 <Content> 2922 <Comment> 2923 <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> 2924 </Comment> 2925 <Heading> 2926 <Text id="customize-02">Creating a custom theme</Text> 2927 </Heading> 2928 <NumberedItem> 2929 <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> 2930 <Format> 2931 <table style="text-align:center;border-collapse:collapse" border="1"> 2932 <tr><td rowspan="6" width="180">Header/Toolbar</td><td width="120">Background color</td><td width="80">#141a38</td></tr> 2933 <tr><td rowspan="2">Texture</td><td>highlight_soft</td></tr> 2934 <tr><td>45%</td></tr> 2935 <tr><td>Border</td><td>#ffffff</td></tr> 2936 <tr><td>Text</td><td>#ffffff</td></tr> 2937 <tr><td>Icon</td><td>#ffffff</td></tr> 2938 <tr><td rowspan="6">Content</td><td>Background color</td><td>#ffffff</td></tr> 2939 <tr><td rowspan="2">Texture</td><td>flat</td></tr> 2940 <tr><td>75%</td></tr> 2941 <tr><td>Border</td><td>#ffffff</td></tr> 2942 <tr><td>Text</td><td>#222222</td></tr> 2943 <tr><td>Icon</td><td>#222222</td></tr> 2944 <tr><td rowspan="6">Clickable: default state</td><td>Background color</td><td>#e9c416</td></tr> 2945 <tr><td rowspan="2">Texture</td><td>glass</td></tr> 2946 <tr><td>55%</td></tr> 2947 <tr><td>Border</td><td>#ffffff</td></tr> 2948 <tr><td>Text</td><td>#555555</td></tr> 2949 <tr><td>Icon</td><td>#888888</td></tr> 2950 <tr><td rowspan="6">Clickable: hover state</td><td>Background Color</td><td>#e9d47b</td></tr> 2951 <tr><td rowspan="2">Texture</td><td>glass</td></tr> 2952 <tr><td>75%</td></tr> 2953 <tr><td>Border</td><td>#ffffff</td></tr> 2954 <tr><td>Text</td><td>#212121</td></tr> 2955 <tr><td>Icon</td><td>#454545</td></tr> 2956 <tr><td rowspan="6">Clickable: active state</td><td>Background Color</td><td>#ffffff</td></tr> 2957 <tr><td rowspan="2">Texture</td><td>glass</td></tr> 2958 <tr><td>65%</td></tr> 2959 <tr><td>Border</td><td>#ffffff</td></tr> 2960 <tr><td>Text</td><td>#212121</td></tr> 2961 <tr><td>Icon</td><td>#454545</td></tr> 2962 </table> 2963 </Format> 2964 </NumberedItem> 2965 <NumberedItem> 2966 <Text id="customize-04">Click the <AutoText text="Download theme"/> button. Ensure the Stable version of jQuery is selected. 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. For <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> 2967 </NumberedItem> 2968 <NumberedItem> 2969 <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..."/> and click <AutoText text="Extract"/>).</Text> 2970 <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> 2971 </NumberedItem> 2972 <Heading> 2973 <Text id="customize-06">Setting a collection's theme</Text> 2974 </Heading> 2975 <NumberedItem> 2976 <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> 2977 </NumberedItem> 2978 <NumberedItem> 2979 <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> 2980 <Format> 2981 <xsl:template name="additionalHeaderContent"><br/> 2982 <Tab n="1"/><xsl:variable name="httpCollection"><br/> 2983 <Tab n="2"/><xsl:value-of select="/page/pageResponse/collection/metadataList/metadata[@name='httpPath']"/><br/> 2984 <Tab n="1"/></xsl:variable><br/> 2985 <Tab n="1"/><link href="{$httpCollection}/style/CollectionTheme/jquery-ui-1.10.2.custom.css" rel="stylesheet" type="text/css" /><br/> 2986 </xsl:template><br/> 2987 </Format> 2988 </NumberedItem> 2989 <NumberedItem> 2990 <Text id="customize-09">Click <AutoText key="glidict::CreatePane.Preview_Collection"/> to see the <AutoText text="backdrop"/> collection with the new, custom theme.</Text> 2991 </NumberedItem> 2992 </Content> 2993 </Tutorial> 2994 </MajorVersion> 2785 2995 <Tutorial id="multimedia_collection_explore"> 2786 2996 <Title> … … 4718 4928 </MajorVersion> 4719 4929 <MajorVersion number="3"> 4720 <Tutorial id=" using_themes">4930 <Tutorial id="home_page"> 4721 4931 <Title> 4722 <Text id=" themes-1">Customization: Themes</Text>4932 <Text id="hp-01">Customizing your home page</Text> 4723 4933 </Title> 4724 4934 <SampleFiles folder="custom"/> 4725 <Version initial="3.0 5" current="3.05"/>4935 <Version initial="3.06" current="3.06"/> 4726 4936 <Content> 4727 4937 <Comment> 4728 <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> 4729 </Comment> 4730 <Heading> 4731 <Text id="themes-0">Using Greenstone Visual Themes</Text> 4732 </Heading> 4733 <NumberedItem> 4734 <Text id="themes-3">Enter your Greenstone Library. ( Go to <Path>Start → All Programs → Greenstone-3.05 → Greenstone3 Server</Path> and click <AutoText text="Enter Library"/>.)</Text> 4735 </NumberedItem> 4736 <NumberedItem> 4737 <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> 4738 <Format> 4739 <AutoText key="gs3::interface_default::authen.username"/>: admin<br/> 4740 <AutoText key="gs3::interface_default::authen.password"/>: admin 4741 </Format> 4742 <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> 4743 </NumberedItem> 4744 <NumberedItem> 4745 <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> 4746 <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> 4747 <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> 4748 </NumberedItem> 4749 <Heading> 4750 <Text id="themes-10">Creating a custom theme using ThemeRoller (advanced)</Text> 4751 </Heading> 4752 <NumberedItem> 4753 <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> 4754 <Format> 4755 <table> 4756 <tr style="font-weight:bold"><td>Section</td><td>HTML class</td><td>Greenstone 3 usage</td></tr> 4757 <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> 4758 <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> 4759 <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> 4760 <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> 4761 <tr><td>Clickable: active state</td><td>ui-state-active</td><td>This sets the appearance of the selected browse tab</td></tr> 4762 </table> 4763 </Format> 4764 <Comment> 4765 <Text id="themes-12">ThemeRoller will not affect some aspects of you Greenstone library's appearance, e.g. the actual design layout, the background color, the font, the search button.</Text> 4766 </Comment> 4767 </NumberedItem> 4768 <NumberedItem> 4769 <Text id="themes-13">Change the Theme to the following values:</Text> 4770 <Format> 4771 <table style="text-align:center;border-collapse:collapse" border="1"> 4772 <tr><td rowspan="6" width="180">Header/Toolbar</td><td width="120">Background color</td><td width="80">#a23336</td></tr> 4773 <tr><td rowspan="2">Texture</td><td>glass</td></tr> 4774 <tr><td>50%</td></tr> 4775 <tr><td>Border</td><td>#000000</td></tr> 4776 <tr><td>Text</td><td>#000000</td></tr> 4777 <tr><td>Icon</td><td>#000000</td></tr> 4778 <tr><td rowspan="6">Content</td><td>Background color</td><td>#000000</td></tr> 4779 <tr><td rowspan="2">Texture</td><td>inset-soft</td></tr> 4780 <tr><td>25%</td></tr> 4781 <tr><td>Border</td><td>#000000</td></tr> 4782 <tr><td>Text</td><td>#c2bcbc</td></tr> 4783 <tr><td>Icon</td><td>#c2bcbc</td></tr> 4784 <tr><td rowspan="6">Clickable: default state</td><td>Background color</td><td>#7e7676</td></tr> 4785 <tr><td rowspan="2">Texture</td><td>glass</td></tr> 4786 <tr><td>55%</td></tr> 4787 <tr><td>Border</td><td>#000000</td></tr> 4788 <tr><td>Text</td><td>#ffffff</td></tr> 4789 <tr><td>Icon</td><td>#ffffff</td></tr> 4790 <tr><td rowspan="6">Clickable: hover state</td><td>Background Color</td><td>#303030</td></tr> 4791 <tr><td rowspan="2">Texture</td><td>glass</td></tr> 4792 <tr><td>75%</td></tr> 4793 <tr><td>Border</td><td>#000000</td></tr> 4794 <tr><td>Text</td><td>#ffffff</td></tr> 4795 <tr><td>Icon</td><td>#ffffff</td></tr> 4796 <tr><td rowspan="6">Clickable: active state</td><td>Background Color</td><td>#000000</td></tr> 4797 <tr><td rowspan="2">Texture</td><td>glass</td></tr> 4798 <tr><td>65%</td></tr> 4799 <tr><td>Border</td><td>#000000</td></tr> 4800 <tr><td>Text</td><td>#ffffff</td></tr> 4801 <tr><td>Icon</td><td>#ffffff</td></tr> 4802 </table> 4803 </Format> 4804 </NumberedItem> 4805 <NumberedItem> 4806 <Text id="themes-14">Click the <AutoText text="Download theme"/> button. Ensure the Stable version if jQuery is selected. 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. For <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> 4807 </NumberedItem> 4808 <NumberedItem> 4809 <Text id="themes-15">Go to the folder where the zip file was downloaded, and unzip the folder (on Windows, right-click, select <AutoText text="Extract All..."/> and click <AutoText text="Extract"/>).</Text> 4810 <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> 4811 </NumberedItem> 4812 <NumberedItem> 4813 <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> 4814 <Format> 4815 <xsl:text disable-output-escaping="yes"><br/> 4816 <Tab n="1"/>$(document).ready(function(){<br/> 4817 <Tab n="2"/>$("#switcher").themeswitcher({<br/> 4818 <Tab n="3"/>imgpath: "interfaces/" + gs.xsltParams.interface_name + "/style/images/",<br/> 4819 <Tab n="3"/>additionalThemes: [<br/> 4820 <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/> 4821 <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/> 4822 <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/> 4823 <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/> 4824 <Tab n="4"/>{title:"Tutorial Theme", name:"TutorialTheme", icon:"TutorialTheme.png", url:"interfaces/" + gs.xsltParams.interface_name + "/style/themes/TutorialTheme/jquery-ui-1.10.2.custom.css"}</highlight><br/> 4825 <Tab n="3"/>]<br/> 4826 <Tab n="2"/>});<br/> 4827 <Tab n="1"/>});<br/> 4828 </xsl:text><br/> 4829 </Format> 4830 <Text id="themes-17a">Save and close <AutoText text="pref.xsl"/>.</Text> 4831 </NumberedItem> 4832 <NumberedItem> 4833 <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"/>, 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. To create an icon to match the theme, see below.) 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> 4834 </NumberedItem> 4835 <Comment> 4836 <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> 4837 </Comment> 4838 <NumberedItem> 4839 <Text id="themes-21">Return to the folder extracted from the zip file downloaded from jQuery (<AutoText text="jquery-ui-1.10.2.custom"/> or something similar). 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> 4840 </NumberedItem> 4841 <NumberedItem> 4842 <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> 4843 </NumberedItem> 4844 <NumberedItem> 4845 <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 corresonding calendar icon.</Text> 4846 </NumberedItem> 4847 </Content></Tutorial> 4848 <Tutorial id="collection_themes"> 4849 <Title> 4850 <Text id="customize-00">Collection-Specific Themes</Text> 4851 </Title> 4852 <SampleFiles folder="custom"/> 4853 <Prerequisite id="using_themes"/> 4854 <Version initial="3.05" current="3.05"/> 4855 <Content> 4856 <Comment> 4857 <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> 4858 </Comment> 4859 <Heading> 4860 <Text id="customize-02">Creating a custom theme</Text> 4861 </Heading> 4862 <NumberedItem> 4863 <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> 4864 <Format> 4865 <table style="text-align:center;border-collapse:collapse" border="1"> 4866 <tr><td rowspan="6" width="180">Header/Toolbar</td><td width="120">Background color</td><td width="80">#141a38</td></tr> 4867 <tr><td rowspan="2">Texture</td><td>highlight_soft</td></tr> 4868 <tr><td>45%</td></tr> 4869 <tr><td>Border</td><td>#ffffff</td></tr> 4870 <tr><td>Text</td><td>#ffffff</td></tr> 4871 <tr><td>Icon</td><td>#ffffff</td></tr> 4872 <tr><td rowspan="6">Content</td><td>Background color</td><td>#ffffff</td></tr> 4873 <tr><td rowspan="2">Texture</td><td>flat</td></tr> 4874 <tr><td>75%</td></tr> 4875 <tr><td>Border</td><td>#ffffff</td></tr> 4876 <tr><td>Text</td><td>#222222</td></tr> 4877 <tr><td>Icon</td><td>#222222</td></tr> 4878 <tr><td rowspan="6">Clickable: default state</td><td>Background color</td><td>#e9c416</td></tr> 4879 <tr><td rowspan="2">Texture</td><td>glass</td></tr> 4880 <tr><td>55%</td></tr> 4881 <tr><td>Border</td><td>#ffffff</td></tr> 4882 <tr><td>Text</td><td>#555555</td></tr> 4883 <tr><td>Icon</td><td>#888888</td></tr> 4884 <tr><td rowspan="6">Clickable: hover state</td><td>Background Color</td><td>#e9d47b</td></tr> 4885 <tr><td rowspan="2">Texture</td><td>glass</td></tr> 4886 <tr><td>75%</td></tr> 4887 <tr><td>Border</td><td>#ffffff</td></tr> 4888 <tr><td>Text</td><td>#212121</td></tr> 4889 <tr><td>Icon</td><td>#454545</td></tr> 4890 <tr><td rowspan="6">Clickable: active state</td><td>Background Color</td><td>#ffffff</td></tr> 4891 <tr><td rowspan="2">Texture</td><td>glass</td></tr> 4892 <tr><td>65%</td></tr> 4893 <tr><td>Border</td><td>#ffffff</td></tr> 4894 <tr><td>Text</td><td>#212121</td></tr> 4895 <tr><td>Icon</td><td>#454545</td></tr> 4896 </table> 4897 </Format> 4898 </NumberedItem> 4899 <NumberedItem> 4900 <Text id="customize-04">Click the <AutoText text="Download theme"/> button. Ensure the Stable version of jQuery is selected. 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. For <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> 4901 </NumberedItem> 4902 <NumberedItem> 4903 <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..."/> and click <AutoText text="Extract"/>).</Text> 4904 <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> 4905 </NumberedItem> 4906 <Heading> 4907 <Text id="customize-06">Setting a collection's theme</Text> 4908 </Heading> 4909 <NumberedItem> 4910 <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> 4911 </NumberedItem> 4912 <NumberedItem> 4913 <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> 4914 <Format> 4915 <xsl:template name="additionalHeaderContent"><br/> 4916 <Tab n="1"/><xsl:variable name="httpCollection"><br/> 4917 <Tab n="2"/><xsl:value-of select="/page/pageResponse/collection/metadataList/metadata[@name='httpPath']"/><br/> 4918 <Tab n="1"/></xsl:variable><br/> 4919 <Tab n="1"/><link href="{$httpCollection}/style/CollectionTheme/jquery-ui-1.10.2.custom.css" rel="stylesheet" type="text/css" /><br/> 4920 </xsl:template><br/> 4921 </Format> 4922 </NumberedItem> 4923 <NumberedItem> 4924 <Text id="customize-09">Click <AutoText key="glidict::CreatePane.Preview_Collection"/> to see the <AutoText text="backdrop"/> collection with the new, custom theme.</Text> 4938 <Text id="hp-c">This tutorial demonstrates how to change the home page of your Greenstone3 installation, including how to use XSL to add certain features (like an up-to-date list of collections and the cross-collection search box). </Text> 4939 </Comment> 4940 <NumberedItem> 4941 <Text id="hp-02">Start up your Greenstone server (<Path>Start → All Programs → Greenstone3.06 → Greenstone3 Server</Path>) and click the <b>Enter Library</b> button). This will take you to your library home page, which we will be replacing with our custom home page.</Text> 4942 </NumberedItem> 4943 <Heading> 4944 <Text id="hp-03">Changing the library's home page</Text> 4945 </Heading> 4946 <NumberedItem> 4947 <Text id="hp-03">By default, the library's home page is dictated by the <i>home.xsl</i> file in <Path>Greenstone3 → web → interfaces → default → transform → pages</Path>. We want to be able to easily revert back to the default home page, so we won't make changes to this file directly. Instead, we're going to tell the interface to use a new, different file to create the home page.</Text> 4948 <Text id="hp-04">To do this, open the <b>interfaceConfig.xml</b> file found in <Path>Greenstone3 → web → interfaces → default</Path> in a text editor, and change:</Text> 4949 <Format><subaction name="home" xslt="pages/home.xsl"/></Format> 4950 <Text id="hp-05">To this:</Text> 4951 <Format><subaction name="home" xslt="pages/home-tutorial.xsl"/></Format> 4952 </NumberedItem> 4953 <NumberedItem> 4954 <Text id="hp-05">Restart the server by clicking the <b>Restart Library</b> button in the small Greenstone Server window. (Any time you make changes to an <i>interfaceConfig.xml</i> file, you must restart the server for the changes to take affect.) When the server restarts, look at your home page again. Because <i>home-tutorial.xsl</i> does not yet exist, you should just see unformatted text. </Text> 4955 </NumberedItem> 4956 <NumberedItem> 4957 <Text id="hp-06">Copy the folder <i>tutorialbliss</i> from <Path>sample_files → custom</Path> to <Path>Greenstone3 → web → interfaces → default → style → themes</Path>. This is a free CSS template that our new home page will use.</Text> 4958 </NumberedItem> 4959 <NumberedItem> 4960 <Text id="hp-07">Copy <i>home-tutorial.xsl</i> from <Path>sample_files → custom</Path> to <Path>Greenstone3 → web → interfaces → default → transform → pages</Path>. It contains the following text:</Text> 4961 <Format> 4962 <?xml version="1.0" encoding="ISO-8859-1"?><br/> 4963 <xsl:stylesheet version="1.0"<br/> 4964 <Tab n="1"/>xmlns:xsl="http://www.w3.org/1999/XSL/Transform"<br/> 4965 <Tab n="1"/>xmlns:java="http://xml.apache.org/xslt/java"<br/> 4966 <Tab n="1"/>xmlns:util="xalan://org.greenstone.gsdl3.util.XSLTUtil"<br/> 4967 <Tab n="1"/>xmlns:gslib="http://www.greenstone.org/skinning"<br/> 4968 <Tab n="1"/>extension-element-prefixes="java util"<br/> 4969 <Tab n="1"/>exclude-result-prefixes="java util"><br/><br/> 4970 4971 <Tab n="1"/><xsl:template match="/"><br/> 4972 <Tab n="1"/><html><br/> 4973 <Tab n="2"/><head><br/> 4974 <Tab n="3"/><meta name="keywords" content="" /><br/> 4975 <Tab n="3"/><meta name="description" content="" /><br/> 4976 <Tab n="3"/><title>My Greenstone Library</title><br/><br/> 4977 <Tab n="2"/>...<br/><br/> 4978 <Tab n="3"/><div id="footer"><br/> 4979 <Tab n="4"/><p>2013 Sitename.com. | Photo by <a href="http://www.leagoon.com/">Leagoon</a> | Design by <a href="http://www.freecsstemplates.org/" rel="nofollow">FreeCSSTemplates.org</a>.</p><br/> 4980 <Tab n="3"/></div><br/> 4981 <Tab n="3"/><!-- end #footer --><br/> 4982 <Tab n="2"/></body><br/> 4983 <Tab n="1"/></html><br/> 4984 <Tab n="1"/></xsl:template><br/><br/> 4985 4986 </xsl:stylesheet><br/> 4987 </Format> 4988 </NumberedItem> 4989 <NumberedItem> 4990 <Text id="hp-07">Refresh you library home page. You should now have a nice, new home page. Basically, the entire contents of the file <i>index.html</i> in <Path>sample_files → custom → tutorialbliss</Path> were copied (after some modifications) in between the <i><xsl:template match="/"></i> and <i></xsl:template></i> tags of <i>home-tutorial.xsl</i>. The following modifications were made:<br /><br /> 4991 Changed the text to be Greenstone-related<br /> 4992 Removed escape characters (&nbsp;, &copy;, etc.) that are not currently supported in GS3<br /> 4993 Ensured every tag had a closing tag (or was self-closing)<br /> 4994 Corrected the paths for the CSS stylesheet and image<br /> 4995 Added in links to certain Greenstone pages (like the <i>Login</i>, <i>Help</i>, and <i>Preferences</i> pages).<br /></Text> 4996 </NumberedItem> 4997 <NumberedItem> 4998 <Text id="hp-09">Adding links to specific pages is relatively straightforward. If you want to link to the backdrop collection, for instance, you could simply add in <Format><a href="library/collection/backdrop">backdrop</a></Format>. However, if you have many collections, this is time consuming, and the home page would have to be modified every time you added or removed a collection. Instead, we can use XSL to insert appropriate HTML into our page for each collection in our library. First, we will <b>define</b> a template that does this, and then we will <b>call</b> this template in the right spot in our HTML.</Text> 4999 </NumberedItem> 5000 <Heading> 5001 <Text id="hp-08">Adding list of collections</Text> 5002 </Heading> 5003 <NumberedItem> 5004 <Text id="hp-10">Open <i>home-tutorial.xsl</i> in a text editor. Copy the the highlighted text into the area indicated (this, and all other text excerpts can be copied from <i>gs3-hompage.txt</i> in <Path>sample_files → custom</Path>):</Text> 5005 <Format> 5006 <Tab n="3"/><!-- end #footer --><br /> 5007 <Tab n="2"/></body><br /> 5008 <Tab n="1"/></html><br /> 5009 <Tab n="1"/></xsl:template><br /><br /> 5010 5011 <highlight><xsl:template name="collectionsList"><br /> 5012 <Tab n="1"/><xsl:for-each select="./page/pageResponse/collectionList/collection"><br /> 5013 <Tab n="1"/><xsl:variable name="collectionName" select="@name"/><br /> 5014 <Tab n="2"/><li><br /> 5015 <Tab n="2"/><a href="library/collection/{$collectionName}/page/about"><br /> 5016 <Tab n="2"/><xsl:value-of select="displayItem[@name='name']"/><br /> 5017 <Tab n="2"/></a><br /> 5018 <Tab n="2"/></li><br /> 5019 <Tab n="1"/></xsl:for-each><br /> 5020 </xsl:template></highlight><br /><br /> 5021 5022 </xsl:stylesheet> <br /> 5023 </Format> 5024 </NumberedItem> 5025 <NumberedItem> 5026 <Text id="hp-11">Then, find the section below, and change this:</Text> 5027 <Format> 5028 <h2>Select a Collection:</h2><br /> 5029 <ul><br /> 5030 <Tab n="1"/><highlight><li><a href="#">Collection 1</a></li><br /> 5031 <Tab n="1"/><li><a href="#">Collection 2</a></li><br /> 5032 <Tab n="1"/><li><a href="#">Collection 3</a></li><br /> 5033 <Tab n="1"/><li><a href="#">Collection 4</a></li><br /> 5034 <Tab n="1"/><li><a href="#">Collection 5</a></li><br /></highlight> 5035 </ul><br /> 5036 </Format> 5037 <Text id="hp-12">To this:</Text> 5038 <Format> 5039 <h2>Select a Collection:</h2><br /> 5040 <ul><br /> 5041 <Tab n="1"/><highlight><xsl:call-template name="collectionsList"/></highlight><br /> 5042 </ul><br /> 5043 </Format> 5044 </NumberedItem> 5045 <NumberedItem> 5046 <Text id="hp-13">Save this file, and refresh your library homepage. The right side bar should now contain a list of all of your collections. Click on one to make sure the link work correctly, and then return to the home page.</Text> 5047 </NumberedItem> 5048 <Heading> 5049 <Text id="hp-14">Adding a cross-collection search box</Text> 5050 </Heading> 5051 <NumberedItem> 5052 <Text id="hp-15">The current search box does not actually work. We are going to replace this with a search box that will search all collections in our library.</Text> 5053 <Text id="hp-16">First, add the following template before the final <i></xsl:stylesheet></i>:</Text> 5054 <Format> 5055 <xsl:template name="searchBox"><br /> 5056 <Tab n="1"/><xsl:for-each select="//page/pageResponse"><br /> 5057 <Tab n="1"/><div id="quickSearch"><br /> 5058 <Tab n="2"/><gslib:crossCollectionQuickSearchForm/><br /> 5059 <Tab n="1"/></div><br /> 5060 <Tab n="1"/></xsl:for-each><br /> 5061 </xsl:template><br /> 5062 </Format> 5063 </NumberedItem> 5064 <NumberedItem> 5065 <Text id="hp-17">Then, find the following section:</Text> 5066 <Format> 5067 <form method="get" action="#"><br /> 5068 <Tab n="1"/><div><br /> 5069 <Tab n="2"/><input type="text" name="s" id="search-text" value="" /><br /> 5070 <Tab n="2"/><input type="submit" id="search-submit" value="" /><br /> 5071 <Tab n="1"/></div><br /> 5072 </form><br /> 5073 </Format> 5074 <Text id="hp-18">And replace it with this:</Text> 5075 <Format> 5076 <xsl:call-template name="searchBox"/><br/> 5077 </Format> 5078 </NumberedItem> 5079 <NumberedItem> 5080 <Text id="hp-19">Save <i>home-tutorial.xsl</i>, and refresh your home page. You now have a working cross-collection search box. Search for "economy" to see that it works, and then return to the home page.</Text> 5081 </NumberedItem> 5082 <Heading> 5083 <Text id="hp-20">Login Links</Text> 5084 </Heading> 5085 <NumberedItem> 5086 <Text id="hp-21">Under the heading "Library Links" in the left sidebar of your home page, you will notice that there are several links. However, we don't want all of these links to appear all of the time. "Login" should only appear when the user is <i>not</i> logged in, while "Account Settings", "Register as a new user", "Administration", and "Logout" should only appear when a user <i>is</i> logged in.</Text> 5087 </NumberedItem> 5088 <NumberedItem> 5089 <Text id="hp-22">We will define and call a template that will display the correct links depending on whether a user is logged in or not.</Text> 5090 <Text id="hp-23">Add the following template before the final <i></xsl:stylesheet></i>:</Text> 5091 <Format> 5092 <Tab n="1"/><xsl:template name="loginButton"><br /> 5093 <Tab n="2"/><xsl:variable name="username" select="/page/pageRequest/userInformation/@username"/><br /> 5094 <Tab n="3"/><xsl:choose><br /> 5095 <Tab n="4"/><xsl:when test="$username"><br /> 5096 <Tab n="5"/><li><a><br /> 5097 <Tab n="6"/><xsl:attribute name="href">library/admin/AccountSettings?s1.username=<xsl:value-of select="$username"/></xsl:attribute><xsl:value-of select="$username"/><br /> 5098 <Tab n="5"/></a></li><br /> 5099 <Tab n="5"/><li><a href="library/admin/Register">Register a new user</a></li><br /> 5100 <Tab n="6"/><li><a href="library/admin/ListUsers">Administration</a></li><br /> 5101 <Tab n="5"/><li><a><xsl:attribute name="href">library?logout=</xsl:attribute>Logout</a></li><br /> 5102 <Tab n="4"/></xsl:when><br /> 5103 <Tab n="4"/><xsl:otherwise><br /> 5104 <Tab n="5"/><li><a href="?a=p&amp;sa=login&amp;redirectURL=library%3Fa=p%26sa=home">Login<br /> 5105 <Tab n="6"/><xsl:attribute name="title"><xsl:value-of select="util:getInterfaceText($interface_name, /page/@lang, 'login_tip')"/></xsl:attribute><br /><br /> 5106 5107 <Tab n="5"/></a></li><br /> 5108 <Tab n="4"/></xsl:otherwise><br /> 5109 </xsl:choose><br /> 5110 </xsl:template><br /> 5111 </Format> 5112 </NumberedItem> 5113 <NumberedItem> 5114 <Text id="hp-24">Then, find the following section:</Text> 5115 <Format> 5116 <li><a href="?a=p&sa=login&redirectURL=library%3Fa=p%26sa=home">Login</a></li><br /> 5117 <li><a href="library/admin/AccountSettings?s1.username=">Account Settings</a></li><br /> 5118 <li><a href="library/admin/Register">Register a new user</a></li><br /> 5119 <li><a href="library/admin/ListUsers">Administration</a></li><br /> 5120 <li><a href="library?logout=">Logout</a></li><br /> 5121 </Format> 5122 <Text id="hp-25">And replace it with this:</Text> 5123 <Format> 5124 <xsl:call-template name="loginButton"/> 5125 </Format> 5126 </NumberedItem> 5127 <NumberedItem> 5128 <Text id="hp-26"> 5129 Save <i>home-tutorial.xsl</i>, and refresh your home page. If you are logged in, click <b>"Logout"</b> to view the homepage in logged out mode. If you are not logged in, click "Login" and enter your username and password to view the homepage in logged in mode. </Text> 5130 </NumberedItem> 5131 <Heading> 5132 <Text id="hp-27">Adding your library's site name</Text> 5133 </Heading> 5134 <NumberedItem> 5135 <Text id="hp-28">In <i>home-tutorial.xsl</i>, replace the two occurrences of <b>"A New Home Page"</b> with <Format><xsl:call-template name="siteName"/></Format>.</Text> 5136 <Text id="hp-29">Save <i>home-tutorial.xsl</i>, and refresh your home page. The name of the browser window and the page's main header should now be "My Greenstone Library". By using this template, you can ensure your library's name is consistent across your entire library. If you decide to change your library name, you only need to make the change in one place. The following section demonstrates how to do this.</Text> 5137 </NumberedItem> 5138 <Heading> 5139 <Text id="hp-30">Changing your library's site name</Text> 5140 </Heading> 5141 <NumberedItem> 5142 <Text id="hp-31">To change the name of your library, open the <i>siteConfig.xml</i> file located in <Path>Greenstone3 → web → sites → localsite</Path> in a text editor. Near the end of the file, find the line:</Text> 5143 <Format><metadata name="siteName" lang="en">My Greenstone Library</metadata></Format> 5144 <Text id="hp-32">And replace "My Greenstone Library" with another name, like "The Best Digital Library". Then save and close the file.</Text> 5145 </NumberedItem> 5146 <NumberedItem> 5147 <Text id="hp-33">For changes to <i>siteConfig.xml</i> to take affect, the site must be reconfigured. To do this, you can either restart the server, or, in a browser window, navigate to <b>http://localhost:8080/greenstone3/library?a=s&sa=c</b> (replace <i>8080</i> if you are running the Greenstone3 server on another port, like <i>8088</i> or <i>8383</i>). Navigate back to your home page (by clicking the link in the upper left corner). The page title and header should now be your new library name. Enter one of your collections and see that your library name (in the top left corner) has changed here, as well.</Text> 4925 5148 </NumberedItem> 4926 5149 </Content>
Note:
See TracChangeset
for help on using the changeset viewer.
