Changeset 28600

Show
Ignore:
Timestamp:
04.11.2013 10:44:27 (6 years ago)
Author:
jlwhisler
Message:

Updated designing interface tutorials based on Anu's suggestions.

Files:
1 modified

Legend:

Unmodified
Added
Removed
  • documentation/trunk/tutorials/xml-source/tutorial_en.xml

    r28598 r28600  
    51335133<NumberedItem> 
    51345134<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> 
    5135 <Text id="hp-16">First, add the following template before the final <i>&lt;/xsl:stylesheet&gt;</i>:</Text> 
     5135<Text id="hp-16">First, add the following template before the final <Format>&lt;/xsl:stylesheet&gt;</Format>:</Text> 
    51365136<Format> 
    51375137    &lt;xsl:template name="searchBox"&gt;<br /> 
     
    51795179<NumberedItem> 
    51805180<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> 
    5181 <Text id="hp-23">Add the following template before the final <i>&lt;/xsl:stylesheet&gt;</i>:</Text> 
     5181<Text id="hp-23">Add the following template before the final <Format>&lt;/xsl:stylesheet&gt;</Format>:</Text> 
    51825182<Format> 
    51835183<Tab n="1"/>&lt;xsl:template name="loginButton"&gt;<br /> 
     
    54365436</Heading> 
    54375437<NumberedItem> 
    5438 <Text id="ni1-01">In an Explorer window, navigate to the <b>interfaces</b> folder of your Greenstone3 installation (<Path>C: &rarr; Users &rarr; &lt;user-name&gt; &rarr; Greenstone3 &rarr; web &rarr; interfaces</Path>).  </Text> 
     5438<Text id="ni1-01">In a file browser, navigate to the <b>interfaces</b> folder of your Greenstone3 installation (<Path>C: &rarr; Users &rarr; &lt;user-name&gt; &rarr; Greenstone3 &rarr; web &rarr; interfaces</Path>).  </Text> 
    54395439<Text id="ni1-02">Create a new folder (in the right-click menu, select New &rarr; Folder) and call it <b>perrin</b>. The name of this folder (perrin) determines the name of your new interface.</Text> 
    54405440</NumberedItem> 
    54415441<NumberedItem> 
    5442 <Text id="ni1-03">From <Path>sample_files &rarr; interfaces &rarr; aybara</Path> folder, copy the file <b>interfaceConfig.xml</b>into the <b>perrin</b> folder. Open the file <Path>perrin &rarr; interfaceConfig.xml</Path> in a text editor. The interface configuration file is used to specify the languages the interface is available in, certain options, and what "actions" are available. <b>Actions</b> create the web pages for the library and specify what XSL file should be used for each. For example, if you completed the Home Page Tutorial, you changed the <i>home</i> subaction to point to <i>home-tutorial.xsl</i> instead of <i>home.xsl</i>.</Text> 
     5442<Text id="ni1-03">From <Path>sample_files &rarr; interfaces &rarr; aybara</Path> folder, copy the file <b>interfaceConfig.xml</b> into the <b>perrin</b> folder. Open the file <Path>perrin &rarr; interfaceConfig.xml</Path> in a text editor. The interface configuration file is used to specify the languages the interface is available in, certain options, and what "actions" are available. <b>Actions</b> create the web pages for the library and specify what XSL file should be used for each. For example, if you completed the Home Page Tutorial, you changed the <i>home</i> subaction to point to <i>home-tutorial.xsl</i> instead of <i>home.xsl</i>.</Text> 
    54435443 
    54445444<Text id="ni1-04">We are going to make one important change to this file. Our new interface is going to borrow heavily from the default interface. We will be reusing many of the XSL files, Javascript, and images. We could copy all of these files into our new interface, however, there are a few drawbacks to this solution:<br /><br /> 
     
    55115511</NumberedItem> 
    55125512<NumberedItem> 
    5513 <Text id="ni1-13">Visit <i>http://www.os-templates.com/free-website-templates/news-magazine</i> and click the <b>Download Here</b> button. In the popup window, select <b>Save File</b> and click <b>OK</b>. On Windows, this will save the file <b>news-magazine.zip</b> in your <b>Downloads</b> folder. <i>This template is free to use and modify, but the Copyright and link information <b>must remain intact</b> in files and in the footer of every page. The template <b>cannot be distributed</b> (modified or otherwise) without express permission from OS-Templates (The full license is provided in the <b>license.txt</b> file included with the template).</i></Text> 
     5513<Text id="ni1-13">Visit <i>http://www.os-templates.com/free-website-templates/news-magazine</i> and click the <b>Download Here</b> button. In the popup window, select <b>Save File</b> and click <b>OK</b>. On Windows, this will save the file <b>news-magazine.zip</b> in your <b>Downloads</b> folder. <i>This template is free to use and modify, but the Copyright and link information <b>must remain intact</b> in files and in the footer of every page. The template <b>cannot be distributed</b> (modified or otherwise) without express permission from OS-Templates. (The full license is provided in the <b>license.txt</b> file included with the template).</i></Text> 
    55145514</NumberedItem> 
    55155515<NumberedItem> 
     
    55235523<Text id="ni1-17"> In the <Path> perrin &rarr; styles</Path> folder, open layout.css in a text editor and delete the following line:</Text> 
    55245524<Format>@import url(tables.css);</Format> 
    5525 <Text id="ni1-18">Save and close layout.css. You can also delete the tables.css file, as it is no longer used. </Text> 
     5525<Text id="ni1-18">Save and close layout.css.</Text> 
    55265526</NumberedItem> 
    55275527<NumberedItem> 
     
    55325532</Content> 
    55335533</Tutorial> 
    5534 <Tutorial id="new_interface1"> 
    5535 <Title> 
    5536 <Text id="dl-01">Designing a new interface: Part 1</Text> 
    5537 </Title> 
    5538 <SampleFiles folder="interfaces"/> 
    5539 <Version initial="3.06" current="3.06"/> 
    5540 <Content> 
    5541 <Comment> 
    5542 <Text id="ni1-c1">This tutorial series demonstrates how to create a new interface using the default interface as a base. In this first tutorial, we will set the stage by creating a barebones interface, defining a library that uses the interface, and gathering the various Javascript, CSS, and image files that will be used by the new interface.</Text> 
    5543 </Comment> 
    5544 <Heading> 
    5545 <Text id="ni1-h1">Creating a new interface</Text> 
    5546 </Heading> 
    5547 <NumberedItem> 
    5548 <Text id="ni1-01">In an Explorer window, navigate to the <b>interfaces</b> folder of your Greenstone3 installation (<Path>C: &rarr; Users &rarr; &lt;user-name&gt; &rarr; Greenstone3 &rarr; web &rarr; interfaces</Path>).  </Text> 
    5549 <Text id="ni1-02">Create a new folder (in the right-click menu, select New &rarr; Folder) and call it <b>perrin</b>. The name of this folder (perrin) determines the name of your new interface.</Text> 
    5550 </NumberedItem> 
    5551 <NumberedItem> 
    5552 <Text id="ni1-03">From <Path>sample_files &rarr; interfaces &rarr; aybara</Path> folder, copy the file <b>interfaceConfig.xml</b>into the <b>perrin</b> folder. Open the file <Path>perrin &rarr; interfaceConfig.xml</Path> in a text editor. The interface configuration file is used to specify the languages the interface is available in, certain options, and what "actions" are available. <b>Actions</b> create the web pages for the library and specify what XSL file should be used for each. For example, if you completed the Home Page Tutorial, you changed the <i>home</i> subaction to point to <i>home-tutorial.xsl</i> instead of <i>home.xsl</i>.</Text> 
    5553  
    5554 <Text id="ni1-04">We are going to make one important change to this file. Our new interface is going to borrow heavily from the default interface. We will be reusing many of the XSL files, Javascript, and images. We could copy all of these files into our new interface, however, there are a few drawbacks to this solution:<br /><br /> 
    5555 <Tab n="1"/>&#8226; we will end up with duplicates of a large number of files <br/> 
    5556 <Tab n="1"/>&#8226; there are many files in the default interface that we won't need<br/> 
    5557 <Tab n="1"/>&#8226; it will be difficult to keep track of which files are different/unique to our new interface<br/> 
    5558 </Text> 
    5559 <Text id="ni1-05">A better solution is to base our new interface on the default interface. A base interface is used by Greenstone as a kind of backup. If Greenstone can't find a file in our interface, it will then try to find it in the base interface. To assign default as base interface, in <Path>perrin &rarr; interfaceConfig.xml</Path>, change the second line from this:</Text> 
    5560 <Format> 
    5561 &lt;interfaceConfig&gt; 
    5562 </Format> 
    5563 <Text id="ni1-06">To this:</Text> 
    5564 <Format> 
    5565 &lt;interfaceConfig baseInterface="default"&gt; 
    5566 </Format> 
    5567 </NumberedItem> 
    5568 <NumberedItem> 
    5569 <Text id="ni1-07">Save and close <b>interfaceConfig.xml</b>. </Text> 
    5570 </NumberedItem> 
    5571 <Heading> 
    5572 <Text id="ni1-h2">Defining a new library</Text> 
    5573 </Heading> 
    5574 <NumberedItem> 
    5575 <Text id="ni1-07">Now, let's define a library that uses the new interface. In <Path>Greenstone3 &rarr; web &rarr; WEB-INF</Path> open <b>web.xml</b>, and add the following (the exact location doesn't matter, just put it with the other servlets):</Text> 
    5576 <Format> 
    5577     <Tab n="1"/>&lt;servlet&gt;<br/> 
    5578         <Tab n="2"/>&lt;servlet-name&gt;golden&lt;/servlet-name&gt;<br/> 
    5579         <Tab n="2"/>&lt;description&gt;A new library with my new interface!&lt;/description&gt;<br/> 
    5580         <Tab n="2"/>&lt;servlet-class&gt;org.greenstone.gsdl3.LibraryServlet&lt;/servlet-class&gt;<br/> 
    5581         <Tab n="2"/>&lt;init-param&gt;<br/> 
    5582             <Tab n="3"/>&lt;param-name&gt;library_name&lt;/param-name&gt;<br/> 
    5583             <Tab n="3"/>&lt;param-value&gt;golden&lt;/param-value&gt;<br/> 
    5584         <Tab n="2"/>&lt;/init-param&gt;<br/> 
    5585         <Tab n="2"/>&lt;init-param&gt;<br/> 
    5586             <Tab n="3"/>&lt;param-name&gt;site_name&lt;/param-name&gt;<br/> 
    5587             <Tab n="3"/>&lt;param-value&gt;localsite&lt;/param-value&gt;<br/> 
    5588         <Tab n="2"/>&lt;/init-param&gt;<br/> 
    5589         <Tab n="2"/>&lt;init-param&gt;<br/> 
    5590             <Tab n="3"/>&lt;param-name&gt;interface_name&lt;/param-name&gt;<br/> 
    5591             <Tab n="3"/>&lt;param-value&gt;perrin&lt;/param-value&gt;<br/> 
    5592         <Tab n="2"/>&lt;/init-param&gt;<br/> 
    5593         <Tab n="2"/>&lt;init-param&gt;<br/> 
    5594             <Tab n="3"/>&lt;param-name&gt;receptionist_class&lt;/param-name&gt;<br/> 
    5595             <Tab n="3"/>&lt;param-value&gt;DefaultReceptionist&lt;/param-value&gt;<br/> 
    5596         <Tab n="2"/>&lt;/init-param&gt;<br/> 
    5597         <Tab n="2"/>&lt;init-param&gt;<br/> 
    5598             <Tab n="3"/>&lt;param-name&gt;default_lang&lt;/param-name&gt;<br/> 
    5599             <Tab n="3"/>&lt;param-value&gt;en&lt;/param-value&gt;<br/> 
    5600         <Tab n="2"/>&lt;/init-param&gt;<br/> 
    5601     <Tab n="1"/>&lt;/servlet&gt;<br/> 
    5602 </Format> 
    5603 <Text id="ni1-08">This defines a new library called "golden" that uses "localsite" and our new "perrin" interface. Now, near the bottom of the file, add in a servlet mapping to tell the server where our new library should be located:</Text> 
    5604 <Format> 
    5605     <Tab n="1"/>&lt;servlet-mapping&gt;<br/> 
    5606         <Tab n="2"/>&lt;servlet-name&gt;golden&lt;/servlet-name&gt;<br/> 
    5607         <Tab n="2"/>&lt;url-pattern&gt;/golden/*&lt;/url-pattern&gt;<br/> 
    5608     <Tab n="1"/>&lt;/servlet-mapping&gt;    <br/> 
    5609 </Format> 
    5610 </NumberedItem> 
    5611 <NumberedItem> 
    5612 <Text id="ni1-09">Save web.xml. Start up your Greenstone server (<Path>Start &rarr; All Programs &rarr; Greenstone3 &rarr; Greenstone3 Server</Path>) and click the <b>Enter Library</b> button. This will take you to the default library's home page.</Text> 
    5613 <Text id="ni1-10">Navigate to <Path>http://localhost:8383/greenstone3/golden</Path>. This library is using the <i>perrin</i> interface. However, since <i>perrin</i> contains no files except its configuration file, Greenstone is borrowing everything from <i>default</i>, <i>perrin</i>'s base interface.</Text> 
    5614 </NumberedItem> 
    5615 <Heading> 
    5616 <Text id="ni1-h3">Gathering files</Text> 
    5617 </Heading> 
    5618 <NumberedItem> 
    5619 <Text id="ni1-11">To change how the perrin interface looks, we will be adding some key XSL files (<i>home.xsl</i>, <i>header.xsl</i>, and <i>main.xsl</i>). However, before we do that, we want to gather all of the new CSS, Javascript, and image files we will be using with our new interface.</Text> 
    5620 <Text id="ni1-12">Since designing web pages is quite challening in itself, we will be taking advantage of free CSS templates that can be downloaded and modified. There are many websites that offer high quality web page designs, often for free. <i>(Always be sure to read the license information fully to ensure you do not violate the usage agreement in any way.)</i></Text> 
    5621 </NumberedItem> 
    5622 <NumberedItem> 
    5623 <Text id="ni1-13">Visit <Link url="http://www.os-templates.com/free-website-templates/news-magazine">http://www.os-templates.com/free-website-templates/news-magazine</Link> and click the <b>Download Here</b> button. In the popup window, select <b>Save File</b> and click <b>OK</b>. On Windows, this will save the file <b>news-magazine.zip</b> in your <b>Downloads</b> folder. <i>This template is free to use and modify, but the Copyright and link information <b>must remain intact</b> in files and in the footer of every page. The template <b>cannot be distributed</b> (modified or otherwise) without express permission from OS-Templates (The full license is provided in the <b>license.txt</b> file included with the template).</i></Text> 
    5624 </NumberedItem> 
    5625 <NumberedItem> 
    5626 <Text id="ni1-14">In an Explorer window, navigate to your Downloads folder (<Path>C:\Users\&lt;user-name&gt;\Downloads</Path>). Right-click <b>news-magazine.zip</b>, select <b>Extract All...</b> and, in the popup window, click <b>Extract</b>.</Text> 
    5627 </NumberedItem> 
    5628 <NumberedItem> 
    5629 <Text id="ni1-15">From the new news-magazine folder, copy the <b>styles</b>, <b>scripts</b>, and <b>images</b> folders and the <b>license.txt</b> file into <Path>Greenstone3 &rarr; web &rarr; interfaces &rarr; perrin</Path>. </Text> 
    5630 <Text id="ni1-16">In the new <Path> perrin &rarr; images </Path> folder, delete everything except the <b>galleryviewthemes</b> folder and its contents, because we will not be using any of the other images. </Text> 
    5631 </NumberedItem> 
    5632 <NumberedItem> 
    5633 <Text id="ni1-17"> In the <Path> perrin &rarr; styles</Path> folder, open <b>layout.css</b> in a text editor and delete the following line:</Text> 
    5634 <Format>@import url(tables.css);</Format> 
    5635 <Text id="ni1-18">Save and close <b>layout.css</b>. You can also delete the <b>tables.css</b> file, as it is no longer used. </Text> 
    5636 </NumberedItem> 
    5637 <NumberedItem> 
    5638 <Text id="ni1-18">Now, from the <Path>sample_files &rarr; interfaces &rarr; aybara</Path> folder, copy the <b>styles</b>, <b>images</b>, and <b>transform</b> folders, as well as the <b>index-GS3.html</b> file into <Path>Greenstone3 &rarr; web &rarr; interfaces &rarr; perrin</Path> (If a popup window asks whether you want to merge the images and styles folders, select "Yes".) We have now gathered all of the Javascript, CSS, and images our new interface will use.</Text> 
    5639 <Text id="ni1-19">Double click on <Path>perrin &rarr; index-GS3.html</Path> to open it in a browser window. This file isn't used by the new interface, but provides a preview of how the interface will look. </Text> 
    5640 <Text id="ni1-20">In the next tutorial, we will begin changing how our interface looks, starting with the home page.</Text> 
    5641 </NumberedItem> 
    5642 </Content> 
    5643 </Tutorial> 
    5644  
    56455534 
    56465535<Tutorial id="new_interface2"> 
     
    56495538</Title> 
    56505539<SampleFiles folder="interfaces"/> 
     5540<Prerequisite id="new_interface1"/> 
    56515541<Version initial="3.06" current="3.06"/> 
    56525542<Content> 
     
    56645554</NumberedItem> 
    56655555<NumberedItem> 
    5666 <Text id="ni2-03">In a previous tutorial, we created a home page that was completely different than the rest of our library's pages. This time, however, the home page will share a large portion of it's layout and style with the rest of the library's pages. So, we're only going to change the home page's <i>content</i> by modifying the <b>/page/pageResponse</b> template. We will be adding three sections to our home page: an image slider, a section that can contain featured content, and a list of all of the collections in the library, along with their descriptions.</Text> 
     5556<Text id="ni2-03">In a previous tutorial, we created a home page that was completely different than the rest of our library's pages. This time, however, the home page will share a large portion of its layout and style with the rest of the library's pages. So, we're only going to change the home page's <i>content</i> by modifying the <b>/page/pageResponse</b> template. We will be adding three sections to our home page: an image slider, a section that can contain featured content, and a list of all of the collections in the library, along with their descriptions.</Text> 
    56675557<Text id="ni2-04">Replace HOME PAGE CONTENT GOES HERE with the following: 
    56685558</Text> 
     
    56785568</NumberedItem> 
    56795569<NumberedItem> 
    5680 <Text id="ni2-05">Save <b>home.xsl</b> and refresh your web browser. You should now see an <i>Apache Tomcat</i> error. This is because we are calling a template (<i>collSlider</i>) that doesn't exist. Now add the following before the final &lt;/xsl:stylesheet&gt;:</Text> 
     5570<Text id="ni2-05">Save <b>home.xsl</b> and refresh your web browser. <b>DON'T PANIC!</b>&#160;<u>You should now see an <i>Apache Tomcat</i> error.</u> This is because we are calling a template (<i>collSlider</i>) that doesn't exist. Now add the following before the final <Format>&lt;/xsl:stylesheet&gt;</Format>:</Text> 
    56815571<Format> 
    56825572    <Tab n="1"/>&lt;xsl:template name="collSlider"&gt;<br /> 
     
    57085598<NumberedItem> 
    57095599<Text id="ni2-06">Save <b>home.xsl</b> and refresh your web browser. You should no longer have an error. For every collection in your library, you should now see an image followed by the collection's name. In a moment, we will add in the Javascript that will turn these into a slider, but first, let's consider what the collSlider template is doing.</Text> 
    5710 <Text id="ni2-07">Basically, for every collection in your library (&lt;xsl:for-each select="./collectionList/collection"&gt;), it is creating a list item than includes an image and the collection's name, which links to the collection's about page. If the collection has a Home page image (the "smallicon"), this will be displayed. Otherwise a backup image (<i>default.jpg</i>, which is located in <Path>perrin &rarr; images</Path>) will be displayed. </Text> 
    5711 </NumberedItem> 
    5712 <NumberedItem> 
    5713 <Text id="ni2-08">Now, add Javascript files that will turn these list items into an image slider. Before the final &lt;/xsl:stylesheet&gt;, add the following:</Text> 
     5600<Text id="ni2-07">Basically, for every collection in your library (<Format>&lt;xsl:for-each select="./collectionList/collection"&gt;</Format>), it is creating a list item than includes an image and the collection's name, which links to the collection's about page. If the collection has a Home page image (the "smallicon"), this will be displayed. Otherwise a backup image (<i>default.jpg</i>, which is located in <Path>perrin &rarr; images</Path>) will be displayed. </Text> 
     5601</NumberedItem> 
     5602<NumberedItem> 
     5603<Text id="ni2-08">Now, add Javascript files that will turn these list items into an image slider. Before the final <Format>&lt;/xsl:stylesheet&gt;</Format>, add the following:</Text> 
    57145604<Format> 
    57155605    <Tab n="1"/>&lt;xsl:template name="additionalHeaderContent"&gt;<br /> 
     
    57205610    <Tab n="1"/>&lt;/xsl:template&gt;   <br /> 
    57215611</Format> 
    5722 <Text id="ni2-09">Save home.xsl and refresh your web browser. All of the images and collection names should now be condensed into an image slider. (It is still missing some style, because we haven't added links to our CSS files yet.) This <b>additionalHeaderContent</b> template is "called" in the <b>header.xsl</b> file, which we will see later in this tutorial. 
     5612<Text id="ni2-09">Save <b>home.xsl</b> and refresh your web browser. All of the images and collection names should now be condensed into an image slider. (It is still missing some style, because we haven't added links to our CSS files yet.) This <b>additionalHeaderContent</b> template is "called" in the <b>header.xsl</b> file, which we will see later in this tutorial. 
    57235613</Text> 
    57245614</NumberedItem> 
    57255615<NumberedItem> 
    5726 <Text id="ni2-10">Add the next section of of the home page's content. Insert the highlighted section: </Text> 
     5616<Text id="ni2-10">Add the next section of the home page's content. In the <i>/page/pageResponse</i> template, insert the highlighted section where indicated: </Text> 
    57275617<Format> 
    57285618                    <Tab n="5"/>&lt;xsl:call-template name="collSlider"/&gt;<br /> 
     
    57585648    <Tab n="1"/>&lt;/xsl:template&gt;<br /> 
    57595649</Format> 
    5760 <Text id="ni2-13">And add the following templates before the final &lt;/xsl:stylesheet&gt;:</Text> 
     5650<Text id="ni2-13">And add the following templates before the final <Format>&lt;/xsl:stylesheet&gt;</Format>:</Text> 
    57615651<Format> 
    57625652    <Tab n="1"/>&lt;xsl:template name="collectionsList"&gt;<br /> 
     
    57925682        <Tab n="2"/>&lt;xsl:choose&gt;<br /> 
    57935683            <Tab n="3"/>&lt;xsl:when test="$collDesc"&gt;<br /> 
    5794                 <Tab n="4"/>&lt;p class="justify"&gt;&lt;xsl:value-of select="$collDesc"/&gt;&lt;/p&gt;<br /> 
     5684                <Tab n="4"/>&lt;p class="justify"&gt;&lt;xsl:value-of select="$collDesc"  disable-output-escaping="yes"/&gt;&lt;/p&gt;<br /> 
    57955685            <Tab n="3"/>&lt;/xsl:when&gt;<br /> 
    57965686            <Tab n="3"/>&lt;xsl:otherwise&gt;<br /> 
     
    58045694</Comment> 
    58055695<Text id="ni2-14">First look at the collDescription template. It creates a header that links to the collection's about page (<Format>&lt;h2&gt;&lt;a href="{$library_name}/collection/{$collectionFolder}/page/about"&gt;&lt;xsl:value-of select="$collectionName"/&gt;&lt;/a&gt;&lt;/h2&gt;</Format>). Then, if there is an About page image for the collection, this is displayed. Finally, if the collection has a description (<Format>&lt;xsl:when test="$collDesc"&gt;</Format>), it will display this description. Otherwise, it will display the a generic sentence stating the collection's name and how many documents it contains.</Text> 
    5806 <Text id="ni2-15">Now, let's look at the collectionsList template. Basically, for every collection in the library (<Format>&lt;xsl:for-each select="./collectionList/collection"&gt;</Format>), it is calling the collDescription template, i.e. doing everything explained in the previous paragraph. However, the CSS we are using requires that our div's alternate between class "fl_left" and class "fl_right" or the page won't display correctly. So, if the collection is an odd number in the list (<Format>&lt;xsl:when test="position() mod 2 = 1"&gt;</Format>), the collection description will be in a  <Format>&lt;div class="fl_left"&gt;</Format>, otherwise (i.e. when it is an even number in the list) the collection description will be in a  <Format>&lt;div class="fl_right"&gt;</Format>.</Text> 
     5696<Text id="ni2-15">Now, let's look at the collectionsList template. Basically, for every collection in the library (<Format>&lt;xsl:for-each select="./collectionList/collection"&gt;</Format>), it is calling the collDescription template, i.e. doing everything explained in the previous paragraph. However, the CSS we will be using requires that our div's alternate between class "fl_left" and class "fl_right" or the page won't display correctly. So, if the collection is an odd number in the list (<Format>&lt;xsl:when test="position() mod 2 = 1"&gt;</Format>), the collection description will be in a  <Format>&lt;div class="fl_left"&gt;</Format>, otherwise (i.e. when it is an even number in the list) the collection description will be in a  <Format>&lt;div class="fl_right"&gt;</Format>. Once we link our CSS, this will make our descriptions fall into two nice columns.</Text> 
    58075697</NumberedItem> 
    58085698<NumberedItem> 
     
    58145704</Heading> 
    58155705<NumberedItem> 
    5816 <Text id="ni2-18">From the <Path> sample_files &rarr; interfaces </Path> folder, copy header.xsl into <Path>Greenstone3 &rarr; web &rarr; interfaces &rarr; perrin &rarr; transform &rarr; layouts</Path>. Refresh your web browser: nothing should have changed.</Text> 
     5706<Text id="ni2-18">From the <Path> sample_files &rarr; interfaces &rarr; aybara</Path> folder, copy header.xsl into <Path>Greenstone3 &rarr; web &rarr; interfaces &rarr; perrin &rarr; transform &rarr; layouts</Path>. Refresh your web browser: nothing should have changed.</Text> 
    58175707</NumberedItem> 
    58185708<NumberedItem> 
     
    58505740</Title> 
    58515741<SampleFiles folder="interfaces"/> 
     5742<Prerequisite id="new_interface2"/> 
    58525743<Version initial="3.06" current="3.06"/> 
    58535744<Content> 
     
    58755766<Tab n="1"/>&lt;/xsl:template&gt;<br/> 
    58765767</Format> 
    5877 <Text id="ni3-03">Every page in our library uses this template. As you can see, it contains the basic structure of our HTML page. Inside the HTML header, the <b>create-html-header</b> template is called (<Format>&lt;xsl:call-template name="create-html-header"/&gt;</Format>). This is the template in <b>header.xsl</b> we edited in the previously tutorial. Inside the body of the HTML, we use two templates: <b>/page</b> and <b>gs_footer</b>. (The <b>/page</b> template is "applied" instead of called. The reason for this is complex and not relevant to this tutorial.)</Text> 
     5768<Text id="ni3-03">Every page in our library uses this template. As you can see, it contains the basic structure of our HTML page. Inside the HTML header, the <b>create-html-header</b> template is called (<Format>&lt;xsl:call-template name="create-html-header"/&gt;</Format>). This is the template in <b>header.xsl</b> we edited in the previous tutorial. Inside the body of the HTML, we use two templates: <b>/page</b> and <b>gs_footer</b>. (The <b>/page</b> template is "applied" instead of called. The reason for this is complex and not relevant to this tutorial.)</Text> 
    58785769<Text id="ni3-04"> The <b>/page</b> template is where the content of each individual page is. For the home page, it is the content we just added to <b>home.xsl</b>. Since the <b>perrin</b> interface does not have XSL files for any of the other page types, the content of all of the other pages depends on the default interface: on the collection's about page, it's the collection description; on search pages, it is the query boxes and search results; on document pages it is the document content, etc. </Text> 
    58795770<Text id="ni3-04">The <b>gs_footer</b> template is where we will put our page's footer.</Text> 
     
    61826073<Text id="ni3-24">Next, we'll add a header to our page that displays the library's name (with a link to the home page), and, if we're inside a collection, displays the collection's name (with a link to the collection's about page). After the <Format>&lt;body&gt;</Format> tag in <b>mainTemplate</b>, add the following:</Text> 
    61836074<Format> 
     6075    <Tab n="2"/>&lt;div class="wrapper"&gt;<br /> 
     6076        <Tab n="3"/>&lt;div id="header"&gt;<br /> 
    61846077            <Tab n="4"/>&lt;div class="fl_left"&gt;<br /> 
    61856078                <Tab n="5"/>&lt;h1&gt;&lt;a href="{$library_name}"&gt;&lt;xsl:call-template name="siteName"/&gt;&lt;/a&gt;&lt;/h1&gt;<br /> 
    6186                 <Tab n="5"/>&lt;p&gt;&#160;<br /> 
     6079                <Tab n="5"/>&lt;p&gt;&amp;#160;<br /> 
    61876080                <Tab n="6"/>&lt;xsl:if test="page/pageResponse/collection"&gt;<br /> 
    61886081                    <Tab n="7"/>&lt;a href="{$library_name}/collection/{$collNameChecked}/page/about"&gt;<br /> 
     
    61926085                <Tab n="5"/>&lt;/p&gt;<br /> 
    61936086            <Tab n="4"/>&lt;/div&gt;<br /> 
     6087        <Tab n="3"/>&lt;br class="clear"/&gt;&lt;/div&gt;<br /> 
     6088    <Tab n="2"/>&lt;/div&gt;<br />       
    61946089</Format> 
    61956090<Text id="ni3-25">Save main.xsl and refresh the web browser to see the library name display at the top of the page. Enter a collection to see the collection name displayed.</Text> 
     
    62026097  <Tab n="5"/>&lt;div id="topline"&gt;<br /> 
    62036098    <Tab n="6"/>&lt;ul&gt;<br /> 
    6204     <Tab n="7"/>&lt;call-template name="loginLinks"/&gt;<br /> 
     6099    <Tab n="7"/>&lt;xsl:call-template name="loginLinks"/&gt;<br /> 
    62056100     <Tab n="7"/> &lt;li&gt;&lt;a href="{$library_name}/collection/{$collNameChecked}/page/pref"&gt;Preferences&lt;/a&gt;&lt;/li&gt;<br /> 
    62066101     <Tab n="7"/> &lt;li&gt;&lt;a href="{$library_name}/collection/{$collNameChecked}/page/help"&gt;Help&lt;/a&gt;&lt;/li&gt;<br /> 
     
    62276122    <Tab n="3"/>&lt;xsl:otherwise&gt;<br /> 
    62286123        <Tab n="4"/>&lt;li class="login"&gt;<br /> 
    6229             <Tab n="5"/>&lt;a href="{$library_name}?a=p&amp;sa=login&amp;redirectURL={$library_name}%3Fa=p%26sa=home"&gt;Login<br/> 
     6124            <Tab n="5"/>&lt;a href="{$library_name}?a=p&amp;amp;sa=login&amp;amp;redirectURL={$library_name}%3Fa=p%26sa=home"&gt;Login<br/> 
    62306125                <Tab n="6"/>&lt;xsl:attribute name="title"&gt;<br/> 
    62316126                    <Tab n="7"/>&lt;xsl:value-of select="util:getInterfaceText($interface_name, /page/@lang, 'login_tip')"/&gt;<br/> 
     
    62396134</NumberedItem> 
    62406135<NumberedItem> 
    6241 <Text id="ni3-27">Save and close <b>main.xsl</b> and refresh the web browser too see the top bar. Click the <b>Login</b> button and log in as <b>admin</b> (default password is "admin") to see all of the links appear along the top (including links to the <b>Add User</b> page, to the <b>Administration</b> page, and to Logout).</Text> 
     6136<Text id="ni3-27">Save and close <b>main.xsl</b> and refresh the web browser to see the top bar. Click the <b>Login</b> button and log in as <b>admin</b> (default password is "admin") to see all of the links appear along the top (including links to the <b>Add User</b> page, to the <b>Administration</b> page, and to Logout).</Text> 
    62426137</NumberedItem> 
    62436138<Heading>