Changeset 27250
- Timestamp:
- 2013-04-22T11:46:46+12:00 (11 years ago)
- File:
-
- 1 edited
Legend:
- Unmodified
- Added
- Removed
-
documentation/trunk/tutorials/xml-source/tutorial_en.xml
r27123 r27250 4710 4710 </Tutorial> 4711 4711 </MajorVersion> 4712 <MajorVersion number="3"> 4713 <Tutorial id="using_themes"> 4714 <Title> 4715 <Text id="themes-1">Customization: Themes</Text> 4716 </Title> 4717 <SampleFiles folder="custom"/> 4718 <Version initial="3.05" current="3.05"/> 4719 <Content> 4720 <Comment> 4721 <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> 4722 </Comment> 4723 <Heading> 4724 <Text id="themes-0">Using Greenstone Visual Themes</Text> 4725 </Heading> 4726 <NumberedItem> 4727 <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> 4728 </NumberedItem> 4729 <NumberedItem> 4730 <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> 4731 <Format> 4732 <AutoText key="gs3::interface_default::authen.username"/>: admin<br/> 4733 <AutoText key="gs3::interface_default::authen.password"/>: admin 4734 </Format> 4735 <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> 4736 </NumberedItem> 4737 <NumberedItem> 4738 <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> 4739 <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> 4740 <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> 4741 </NumberedItem> 4742 <Heading> 4743 <Text id="themes-10">Creating a custom theme using ThemeRoller (advanced)</Text> 4744 </Heading> 4745 <NumberedItem> 4746 <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> 4747 <Format> 4748 <table> 4749 <tr style="font-weight:bold"><td>Section</td><td>HTML class</td><td>Greenstone 3 usage</td></tr> 4750 <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> 4751 <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> 4752 <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> 4753 <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> 4754 <tr><td>Clickable: active state</td><td>ui-state-active</td><td>This sets the appearance of the selected browse tab</td></tr> 4755 </table> 4756 </Format> 4757 <Comment> 4758 <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> 4759 </Comment> 4760 </NumberedItem> 4761 <NumberedItem> 4762 <Text id="themes-13">Change the Theme to the following values:</Text> 4763 <Format> 4764 <table style="text-align:center;border-collapse:collapse" border="1"> 4765 <tr><td rowspan="6" width="180">Header/Toolbar</td><td width="120">Background color</td><td width="80">#a23336</td></tr> 4766 <tr><td rowspan="2">Texture</td><td>glass</td></tr> 4767 <tr><td>50%</td></tr> 4768 <tr><td>Border</td><td>#000000</td></tr> 4769 <tr><td>Text</td><td>#000000</td></tr> 4770 <tr><td>Icon</td><td>#000000</td></tr> 4771 <tr><td rowspan="6">Content</td><td>Background color</td><td>#000000</td></tr> 4772 <tr><td rowspan="2">Texture</td><td>inset-soft</td></tr> 4773 <tr><td>25%</td></tr> 4774 <tr><td>Border</td><td>#000000</td></tr> 4775 <tr><td>Text</td><td>#c2bcbc</td></tr> 4776 <tr><td>Icon</td><td>#c2bcbc</td></tr> 4777 <tr><td rowspan="6">Clickable: default state</td><td>Background color</td><td>#7e7676</td></tr> 4778 <tr><td rowspan="2">Texture</td><td>glass</td></tr> 4779 <tr><td>55%</td></tr> 4780 <tr><td>Border</td><td>#000000</td></tr> 4781 <tr><td>Text</td><td>#ffffff</td></tr> 4782 <tr><td>Icon</td><td>#ffffff</td></tr> 4783 <tr><td rowspan="6">Clickable: hover state</td><td>Background Color</td><td>#303030</td></tr> 4784 <tr><td rowspan="2">Texture</td><td>glass</td></tr> 4785 <tr><td>75%</td></tr> 4786 <tr><td>Border</td><td>#000000</td></tr> 4787 <tr><td>Text</td><td>#ffffff</td></tr> 4788 <tr><td>Icon</td><td>#ffffff</td></tr> 4789 <tr><td rowspan="6">Clickable: active state</td><td>Background Color</td><td>#000000</td></tr> 4790 <tr><td rowspan="2">Texture</td><td>glass</td></tr> 4791 <tr><td>65%</td></tr> 4792 <tr><td>Border</td><td>#000000</td></tr> 4793 <tr><td>Text</td><td>#ffffff</td></tr> 4794 <tr><td>Icon</td><td>#ffffff</td></tr> 4795 </table> 4796 </Format> 4797 </NumberedItem> 4798 <NumberedItem> 4799 <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> 4800 </NumberedItem> 4801 <NumberedItem> 4802 <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> 4803 <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> 4804 </NumberedItem> 4805 <NumberedItem> 4806 <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> 4807 <Format> 4808 <xsl:text disable-output-escaping="yes"><br/> 4809 <Tab n="1"/>$(document).ready(function(){<br/> 4810 <Tab n="2"/>$("#switcher").themeswitcher({<br/> 4811 <Tab n="3"/>imgpath: "interfaces/" + gs.xsltParams.interface_name + "/style/images/",<br/> 4812 <Tab n="3"/>additionalThemes: [<br/> 4813 <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/> 4814 <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/> 4815 <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/> 4816 <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/> 4817 <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/> 4818 <Tab n="3"/>]<br/> 4819 <Tab n="2"/>});<br/> 4820 <Tab n="1"/>});<br/> 4821 </xsl:text><br/> 4822 </Format> 4823 <Text id="themes-17a">Save and close <AutoText text="pref.xsl"/>.</Text> 4824 </NumberedItem> 4825 <NumberedItem> 4826 <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> 4827 </NumberedItem> 4828 <Comment> 4829 <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> 4830 </Comment> 4831 <NumberedItem> 4832 <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> 4833 </NumberedItem> 4834 <NumberedItem> 4835 <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> 4836 </NumberedItem> 4837 <NumberedItem> 4838 <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> 4839 </NumberedItem> 4840 </Content></Tutorial> 4841 <Tutorial id="collection_themes"> 4842 <Title> 4843 <Text id="customize-00">Collection-Specific Themes</Text> 4844 </Title> 4845 <SampleFiles folder="custom"/> 4846 <Prerequisite id="using_themes"/> 4847 <Version initial="3.05" current="3.05"/> 4848 <Content> 4849 <Comment> 4850 <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> 4851 </Comment> 4852 <Heading> 4853 <Text id="customize-02">Creating a custom theme</Text> 4854 </Heading> 4855 <NumberedItem> 4856 <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> 4857 <Format> 4858 <table style="text-align:center;border-collapse:collapse" border="1"> 4859 <tr><td rowspan="6" width="180">Header/Toolbar</td><td width="120">Background color</td><td width="80">#141a38</td></tr> 4860 <tr><td rowspan="2">Texture</td><td>highlight_soft</td></tr> 4861 <tr><td>45%</td></tr> 4862 <tr><td>Border</td><td>#ffffff</td></tr> 4863 <tr><td>Text</td><td>#ffffff</td></tr> 4864 <tr><td>Icon</td><td>#ffffff</td></tr> 4865 <tr><td rowspan="6">Content</td><td>Background color</td><td>#ffffff</td></tr> 4866 <tr><td rowspan="2">Texture</td><td>flat</td></tr> 4867 <tr><td>75%</td></tr> 4868 <tr><td>Border</td><td>#ffffff</td></tr> 4869 <tr><td>Text</td><td>#222222</td></tr> 4870 <tr><td>Icon</td><td>#222222</td></tr> 4871 <tr><td rowspan="6">Clickable: default state</td><td>Background color</td><td>#e9c416</td></tr> 4872 <tr><td rowspan="2">Texture</td><td>glass</td></tr> 4873 <tr><td>55%</td></tr> 4874 <tr><td>Border</td><td>#ffffff</td></tr> 4875 <tr><td>Text</td><td>#555555</td></tr> 4876 <tr><td>Icon</td><td>#888888</td></tr> 4877 <tr><td rowspan="6">Clickable: hover state</td><td>Background Color</td><td>#e9d47b</td></tr> 4878 <tr><td rowspan="2">Texture</td><td>glass</td></tr> 4879 <tr><td>75%</td></tr> 4880 <tr><td>Border</td><td>#ffffff</td></tr> 4881 <tr><td>Text</td><td>#212121</td></tr> 4882 <tr><td>Icon</td><td>#454545</td></tr> 4883 <tr><td rowspan="6">Clickable: active state</td><td>Background Color</td><td>#ffffff</td></tr> 4884 <tr><td rowspan="2">Texture</td><td>glass</td></tr> 4885 <tr><td>65%</td></tr> 4886 <tr><td>Border</td><td>#ffffff</td></tr> 4887 <tr><td>Text</td><td>#212121</td></tr> 4888 <tr><td>Icon</td><td>#454545</td></tr> 4889 </table> 4890 </Format> 4891 </NumberedItem> 4892 <NumberedItem> 4893 <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> 4894 </NumberedItem> 4895 <NumberedItem> 4896 <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> 4897 <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> 4898 </NumberedItem> 4899 <Heading> 4900 <Text id="customize-06">Setting a collection's theme</Text> 4901 </Heading> 4902 <NumberedItem> 4903 <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> 4904 </NumberedItem> 4905 <NumberedItem> 4906 <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> 4907 <Format> 4908 <xsl:template name="additionalHeaderContent"><br/> 4909 <Tab n="1"/><xsl:variable name="httpCollection"><br/> 4910 <Tab n="2"/><xsl:value-of select="/page/pageResponse/collection/metadataList/metadata[@name='httpPath']"/><br/> 4911 <Tab n="1"/></xsl:variable><br/> 4912 <Tab n="1"/><link href="{$httpCollection}/style/CollectionTheme/jquery-ui-1.10.2.custom.css" rel="stylesheet" type="text/css" /><br/> 4913 </xsl:template><br/> 4914 </Format> 4915 </NumberedItem> 4916 <NumberedItem> 4917 <Text id="customize-09">Click <AutoText key="glidict::CreatePane.Preview_Collection"/> to see the <AutoText text="backdrop"/> collection with the new, custom theme.</Text> 4918 </NumberedItem> 4919 </Content> 4920 </Tutorial> 4921 </MajorVersion> 4712 4922 </TutorialList>
Note:
See TracChangeset
for help on using the changeset viewer.
