Changeset 38974 for documented-examples
- Timestamp:
- 2024-05-02T13:11:19+12:00 (8 weeks ago)
- Location:
- documented-examples/trunk/style-e
- Files:
-
- 2 edited
-
resources/collectionConfig.properties (modified) (2 diffs)
-
transform/pages/about.xsl (modified) (1 diff)
Legend:
- Unmodified
- Added
- Removed
-
documented-examples/trunk/style-e/resources/collectionConfig.properties
r38916 r38974 1 name=C ascading Style SheetsDemo1 name=CSS Demo 2 2 textdate=publication date\: 3 3 textnumpages=no. of pages\: … … 13 13 dls.Titles=Titles 14 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"}16 15 16 choose-style=Choose a style: 17 style.default=Default Greenstone 18 style.blue=Blue 19 style.olive=OlivePurple 20 style.none=None 17 21 22 style.extra=Default Greenstone Extra 18 23 shortDescription=This collection demonstrates Greenstone's use of Cascading Style Sheets (CSS) for visual formatting in web browsers. 19 24 20 25 description1a=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. 21 26 22 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>27 description1=<p>A combination of JavaScript and the overriding of XSL templates 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-collection</b> template. Doing so overrides the existing <i>additionalHeaderContent-collection</i> template, and appends any specified HTML elements to the HTML header. However, for this collection, we have chosen to add these templates to a custom header.xsl file, located in the collection's transform/layouts folder. Editing this file doesn't require reloading the collection in the library, which is needed if you edit collection formats in GLI.</p> 23 28 24 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\ 25 <pre> \n\ 26 <xsl\:template name="additionalHeaderContent"> \n\ 27 <xsl\:variable name="httpCollection"> \n\ 28 <xsl\:value-of select="/page/pageResponse/collection/metadataList/metadata[@name='httpPath']"/> \n\ 29 </xsl\:variable> \n\ 30 <link rel="stylesheet" href="{$httpCollection}/style/gs3-style-default-extra.css" type="text/css" \n\ 31 title="GS3 Style" id="custom-style" charset="UTF-8"/> \n\ 32 <script src="{$httpCollection}/script/custom-script.js" type="text/javascript"> \n\ 33 </script> \n\ 34 </xsl\:template> \n\ 35 \n\ 36 <xsl\:template name="create-banner"> \n\ 37 <div class="choose_style"> \n\ 38 Choose a style\: \n\ 39 <a href="#" onclick="replaceStyle('gs3-style-default-extra');return false;">Default Greenstone</a>, \n\ 40 <a href="#" onclick="replaceStyle('gs3-style-blue');return false;">Blue</a>, \n\ 41 <a href="#" onclick="replaceStyle('gs3-style-olive-purple');return false;">OlivePurple</a>, \n\ 42 <a href="#" onclick="replaceStyle('');return false;">None</a> \n\ 43 </div> \n\ 44 <div id="gs_banner" class="ui-widget-header ui-corner-bottom"> \n\ 45 <div id="titlesearchcontainer"> \n\ 46 <xsl\:call-template name="page-title-area"/> \n\ 47 <xsl\:call-template name="quick-search-area"/> \n\ 48 <div style="clear\:both;"><xsl\:text> </xsl\:text></div> \n\ 49 </div> \n\ 50 <xsl\:call-template name="browsing-tabs"/> \n\ 51 </div> \n\ 52 </xsl\:template> \n\ 53 </pre> \n\ 54 </p> 29 description1b=<p>Note, the <i>additionalHeaderContent</i> template is defined in web/interfaces/default/transform/layouts/header.xsl, and it comprises 4 templates: <i>additionalHeaderContent-page</i>, <i>additionalHeaderContent-interface</i>, <i>additionalHeaderContent-site</i> and <i>additionalHeaderContent-collection</i>. These can be overridden at the page, interface, site and collection level, respectively. This allows fine grained tuning of the page headers.</p> 30 31 description2=<p>In this case, the <b>additionalHeaderContent-collection</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 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. </p> 55 32 56 description3=<p>If you want to download any of these stylesheets for your own collections, here are links to them\: \n\ 57 <ul> \n\ 58 <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\ 59 <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\ 60 <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\ 61 <li>None - clears all CSS styling from the current page (needs reload to get the default GS3 style back)</li> \n\ 62 </ul> \n\ 63 </p> 33 description3=If you want to download any of these stylesheets for your own collections, here are links to them\: 34 description3a=builds on top of GS3's default style 35 description3b=modifies the GS3 default style for a blue colouring 36 description3c=modifies the GS3 default style for a vivid colouring of vine green and purples 37 description3d=clears all CSS styling from the current page (needs reload to get the default GS3 style back) 64 38 65 description4=<p><b>Using a downloaded stylesheet</b> \n\ 66 <ul> \n\ 67 <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\ 68 <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\ 69 <pre><xsl\:template name="additionalHeaderContent"> \n\ 70 <xsl\:variable name="httpCollection"> \n\ 71 <xsl\:value-of select="/page/pageResponse/collection/metadataList/metadata[@name='httpPath']"/> \n\ 72 </xsl\:variable> \n\ 73 <link href="{$httpCollection}/style/stylesheet-name.css" rel="stylesheet" type="text/css"/> \n\ 74 </xsl\:template></pre> \n\ 75 </li> \n\ 76 </ul> \n\ 77 </p> 39 description4=Using a downloaded stylesheet 40 description4a=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. 41 description4b=To use a stylesheet for a particular collection, place it in <tt>greenstone/web/<sitename>/localsite/collect/<collection>/style</tt> then specify the stylesheet link in the <b>additionalHeaderContent-collection</b> of GLI's <i>global</i> format statement (<tt>Format > Format Features > global</tt>) as follows\: -
documented-examples/trunk/style-e/transform/pages/about.xsl
r38914 r38974 1 1 <?xml version="1.0" encoding="UTF-8"?> 2 2 <xsl:stylesheet version="1.0" 3 xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> 3 xmlns:xsl="http://www.w3.org/1999/XSL/Transform" 4 xmlns:gsf="http://www.greenstone.org/greenstone3/schema/ConfigFormat" 5 xmlns:gslib="http://www.greenstone.org/XSL/Library"> 4 6 5 7 <xsl:template name="coll-description"> 6 <p>< xsl:value-of disable-output-escaping="yes" select="/page/pageResponse/collection/displayItemList/displayItem[@name='description1a']"/></p>8 <p><gsf:collectionText name="description1a" propertyFile="collectionConfig"/></p> 7 9 8 <xsl:value-of disable-output-escaping="yes" select="/page/pageResponse/collection/displayItemList/displayItem[@name='description1']"/> 9 <xsl:value-of disable-output-escaping="yes" select="/page/pageResponse/collection/displayItemList/displayItem[@name='description2']"/> 10 <xsl:value-of disable-output-escaping="yes" select="/page/pageResponse/collection/displayItemList/displayItem[@name='description3']"/> 11 <xsl:value-of disable-output-escaping="yes" select="/page/pageResponse/collection/displayItemList/displayItem[@name='description4']"/> 10 <gsf:collectionText name="description1" propertyFile="collectionConfig"/> 11 <gsf:collectionText name="description1b" propertyFile="collectionConfig"/> 12 <gsf:collectionText name="description2" propertyFile="collectionConfig"/> 12 13 14 <pre> 15 <xsl:template name="additionalHeaderContent-collection"> 16 <xsl:variable name="httpCollection"> 17 <xsl:value-of select="/page/pageResponse/collection/metadataList/metadata[@name='httpPath']"/> 18 </xsl:variable> 19 <link rel="stylesheet" href="{$httpCollection}/style/gs3-style-default-extra.css" type="text/css" 20 title="GS3 Style" id="custom-style" charset="UTF-8"/> 21 <script src="{$httpCollection}/script/custom-script.js" type="text/javascript"> 22 </script> 23 </xsl:template> 24 25 <xsl:template name="create-banner"> 26 <div class="choose_style"> 27 Choose a style: 28 <a href="#" onclick="replaceStyle('gs3-style-default-extra');return false;">Default Greenstone</a>, 29 <a href="#" onclick="replaceStyle('gs3-style-blue');return false;">Blue</a>, 30 <a href="#" onclick="replaceStyle('gs3-style-olive-purple');return false;">OlivePurple</a>, 31 <a href="#" onclick="replaceStyle('');return false;">None</a> 32 </div> 33 <div id="gs_banner" class="ui-widget-header ui-corner-bottom"> 34 <div id="titlesearchcontainer"> 35 <xsl:call-template name="page-title-area"/> 36 <xsl:call-template name="quick-search-area"/> 37 <div style="clear:both;"><xsl:text> </xsl:text></div> 38 </div> 39 <xsl:call-template name="browsing-tabs"/> 40 </div> 41 </xsl:template> 42 </pre> 43 44 45 <p><gsf:collectionText name="description3" propertyFile="collectionConfig"/> 46 <ul> 47 <li><a href='https://trac.greenstone.org/browser/documented-examples/trunk/style-e/style/gs3-style-default-extra.css'><gsf:collectionText name="style.extra" propertyFile="collectionConfig"/></a> - <gsf:collectionText name="description3a" propertyFile="collectionConfig"/></li> 48 <li><a href='https://trac.greenstone.org/browser/documented-examples/trunk/style-e/style/gs3-style-blue.css'><gsf:collectionText name="style.blue" propertyFile="collectionConfig"/></a> - <gsf:collectionText name="description3b" propertyFile="collectionConfig"/></li> 49 <li><a href='https://trac.greenstone.org/browser/documented-examples/trunk/style-e/style/gs3-style-olive-purple.css'><gsf:collectionText name="style.olive" propertyFile="collectionConfig"/></a> - <gsf:collectionText name="description3c" propertyFile="collectionConfig"/></li> 50 <li><gsf:collectionText name="style.none" propertyFile="collectionConfig"/> - <gsf:collectionText name="description3d" propertyFile="collectionConfig"/></li> 51 </ul> 52 </p> 53 54 <p><b><gsf:collectionText name="description4" propertyFile="collectionConfig"/></b> 55 <ul> 56 <li><gsf:collectionText name="description4a" propertyFile="collectionConfig"/></li> 57 <li><gsf:collectionText name="description4b" propertyFile="collectionConfig"/> 58 <pre> 59 <xsl:template name="additionalHeaderContent"> 60 <xsl:variable name="httpCollection"> 61 <xsl:value-of select="/page/pageResponse/collection/metadataList/metadata[@name='httpPath']"/> 62 </xsl:variable> 63 <link href="{$httpCollection}/style/stylesheet-name.css" rel="stylesheet" type="text/css"/> 64 </xsl:template></pre> 65 </li> 66 </ul> 67 </p> 68 69 70 <xsl:call-template name="listCollFiles"> 71 <xsl:with-param name="file_list">etc/collectionConfig.xml;transform/layouts/header.xsl;script/custom-script.js</xsl:with-param> 72 </xsl:call-template> 13 73 </xsl:template> 14 74
Note:
See TracChangeset
for help on using the changeset viewer.
