[36615] | 1 | name=Cascading Style Sheets<br/> Demo collection
|
---|
| 2 | textdate=publication date\:
|
---|
| 3 | textnumpages=no. of pages\:
|
---|
| 4 | textsource=source ref\:
|
---|
| 5 | section_chapter=chapter
|
---|
| 6 | document_book=book
|
---|
[36547] | 7 |
|
---|
[36615] | 8 | dls.Organization=Organizations
|
---|
| 9 | dls.Subject=Subjects
|
---|
| 10 | index_text=Text
|
---|
| 11 | index_document=Book
|
---|
| 12 | index_section=Chapter
|
---|
| 13 | dls.Titles=Titles
|
---|
| 14 | dls.Keyword=How to
|
---|
| 15 | depositormetadata={"name"\:"dls.Title","label"\:"Title","tooltip"\:"dls.Title\: The title of this resource.","type"\:"text"}, {"name"\:"dls.Organization","label"\:"Organization","tooltip"\:"dls.Organization\: The organization responsible for producing this resource.","type"\:"text"}, {"name"\:"dls.Subject","label"\:"Subject","tooltip"\:"dls.Subject\: The subject of this resource.","type"\:"text"}, {"name"\:"dls.Keyword","label"\:"Keyword","tooltip"\:"dls.Keyword\: A more specific indication of what the resource can be used for.","type"\:"text"}, {"name"\:"dls.Language","label"\:"Language","tooltip"\:"dls.Language\: The language of this resource.","type"\:"text"}
|
---|
[36547] | 16 |
|
---|
| 17 |
|
---|
[36621] | 18 | shortDescription=<p>This collection demonstrates Greenstone\'s use of Cascading Style Sheets (CSS) for visual formatting in web browsers. On every page, you can change the style-sheet in effect, to modify that page\'s appearance. This collection contains the same material as the original Greenstone demo collection.</p>
|
---|
[36547] | 19 |
|
---|
[36621] | 20 | description1=<p>A combination of JavaScript and the overriding of GS3 XSL templates in Greenstone 3\'s <i>global</i> format statement is used by the collection to provide the stylesheet switching. As in some other <i>Documented Example Collections</i>, GLI\'s <tt>Format > Format Features > global</tt> can be used to define the <b>additionalHeaderContent</b> template. Doing so overrides the existing <i>additionalHeaderContent</i> template, and appends any specified HTML elements to the HTML header.</p>
|
---|
[36547] | 21 |
|
---|
[36615] | 22 | description2=<p>In this case, the <b>additionalHeaderContent</b> specifies the custom collection stylesheet currently active and the JavaScript to facilitate the stylesheet switching when a link is clicked. The <b>create-banner</b> XSL template in the <i>global</i> format statement is also overridden to provide links to the multiple stylesheets within the existing GS3 banner section, and invoke the custom JavaScript when any link is clicked. \n\
|
---|
[36547] | 23 | <pre> \n\
|
---|
[36615] | 24 | <xsl\:template name="additionalHeaderContent"> \n\
|
---|
| 25 | <xsl\:variable name="httpCollection"> \n\
|
---|
[36621] | 26 | <xsl\:value-of select="/page/pageResponse/collection/metadataList/metadata[@name=\'httpPath\']"/> \n\
|
---|
[36547] | 27 | </xsl\:variable> \n\
|
---|
[36615] | 28 | <link rel="stylesheet" href="{$httpCollection}/style/gs3-style-default-extra.css" type="text/css" \n\
|
---|
| 29 | title="GS3 Style" id="custom-style" charset="UTF-8"/> \n\
|
---|
| 30 | <script src="{$httpCollection}/script/custom-script.js" type="text/javascript"> \n\
|
---|
[36547] | 31 | </script> \n\
|
---|
| 32 | </xsl\:template> \n\
|
---|
| 33 | \n\
|
---|
[36615] | 34 | <xsl\:template name="create-banner"> \n\
|
---|
| 35 | <div class="choose_style"> \n\
|
---|
[36547] | 36 | Choose a style\: \n\
|
---|
[36621] | 37 | <a href="#" onclick="replaceStyle(\'gs3-style-default-extra\');return false;">Default Greenstone</a>, \n\
|
---|
| 38 | <a href="#" onclick="replaceStyle(\'gs3-style-blue\');return false;">Blue</a>, \n\
|
---|
| 39 | <a href="#" onclick="replaceStyle(\'gs3-style-olive-purple\');return false;">OlivePurple</a>, \n\
|
---|
| 40 | <a href="#" onclick="replaceStyle(\'');return false;">None</a> \n\
|
---|
[36547] | 41 | </div> \n\
|
---|
[36615] | 42 | <div id="gs_banner" class="ui-widget-header ui-corner-bottom"> \n\
|
---|
| 43 | <div id="titlesearchcontainer"> \n\
|
---|
| 44 | <xsl\:call-template name="page-title-area"/> \n\
|
---|
| 45 | <xsl\:call-template name="quick-search-area"/> \n\
|
---|
| 46 | <div style="clear\:both;"><xsl\:text> </xsl\:text></div> \n\
|
---|
[36547] | 47 | </div> \n\
|
---|
[36615] | 48 | <xsl\:call-template name="browsing-tabs"/> \n\
|
---|
[36547] | 49 | </div> \n\
|
---|
| 50 | </xsl\:template> \n\
|
---|
| 51 | </pre> \n\
|
---|
| 52 | </p>
|
---|
| 53 |
|
---|
[36615] | 54 | description3=<p>If you want to download any of these stylesheets for your own collections, here are links to them\: \n\
|
---|
[36547] | 55 | <ul> \n\
|
---|
[36621] | 56 | <li><a href='https\://trac.greenstone.org/browser/documented-examples/trunk/style-e/style/gs3-style-default-extra.css\'>GS3 default extra</a> - builds on top of GS3\'s default style</li> \n\
|
---|
| 57 | <li><a href='https\://trac.greenstone.org/browser/documented-examples/trunk/style-e/style/gs3-style-blue.css\'>Blue theme</a> - modifies the GS3 default style for a blue colouring</li> \n\
|
---|
| 58 | <li><a href='https\://trac.greenstone.org/browser/documented-examples/trunk/style-e/style/gs3-style-olive-purple.css\'>olive-purple theme</a> - modifies the GS3 default style for a vivid colouring of vine green and purples</li> \n\
|
---|
[36547] | 59 | <li>None - clears all CSS styling from the current page (needs reload to get the default GS3 style back)</li> \n\
|
---|
| 60 | </ul> \n\
|
---|
| 61 | </p>
|
---|
| 62 |
|
---|
[36615] | 63 | description4=<p><b>Using a downloaded stylesheet</b> \n\
|
---|
[36547] | 64 | <ul> \n\
|
---|
| 65 | <li>To use a stylesheet as the default, place it in greenstone/web/interfaces/default/style and rename it to <tt>style.css</tt>. This will affect all collections.</li> \n\
|
---|
[36621] | 66 | <li>To use a stylesheet for a particular collection, place it in <tt>greenstone/web/sites/localsite/collect/<collection>/style</tt> then specify the stylesheet link in the <b>additionalHeaderContent</b> of GLI\'s <i>global</i> format statement (<tt>Format > Format Features > global</tt>) as follows\: \n\
|
---|
[36615] | 67 | <pre><xsl\:template name="additionalHeaderContent"> \n\
|
---|
| 68 | <xsl\:variable name="httpCollection"> \n\
|
---|
[36621] | 69 | <xsl\:value-of select="/page/pageResponse/collection/metadataList/metadata[@name=\'httpPath\']"/> \n\
|
---|
[36547] | 70 | </xsl\:variable> \n\
|
---|
[36615] | 71 | <link href="{$httpCollection}/style/stylesheet-name.css" rel="stylesheet" type="text/css"/> \n\
|
---|
[36547] | 72 | </xsl\:template></pre> \n\
|
---|
| 73 | </li> \n\
|
---|
| 74 | </ul> \n\
|
---|
| 75 | </p>
|
---|