User Tools

Site Tools


en:user:gs3_sample_interface_modifications

This is an old revision of the document!


Sample Greenstone3 Interface Modifications

This page provides examples of interface modifications. Many of these changes can be made at either the collection, interface or site level.

General

In the default interface, the footer code is located in main.xsl in Greenstone3 → web → interfaces → default → transform → layouts. Near the bottom of the file, you will see the gs_footer template. If you want to change the footer for this interface, simply modify this template (this assumes your image is located in the interface's images folder):

<!-- Template controlling the footer. -->
<xsl:template name="gs_footer">
    <div id="gs_footer" class="ui-widget-header ui-corner-bottom">
        <div id="footer-text">Copyright 2013<br/>
        Greenstone Digital Library<br/>University of Waikato
        </div>
        <div id="footer-image">
            <img src="interfaces/{$interface_name}/images/GB.png"/>
        </div>
    </div>
</xsl:template>

and (optionally) add style to the footer by modifying default → style → core.css, for instance, by adding the following:

#gs_footer {
height: 50px;
}

#footer-text {
width: 50%;
text-align: left;
float: left;
padding-left: 5px;
margin-top: -2px;
}

#footer-image {
width: 49%;
text-align: right;
float: left;
}

To modify the footer for only a specific collection, open the collection in the GLI; in the Format Features section of the Format panel, add the following to the end of the global feature (this assumes your image is located in the collection's images folder):

<xsl:variable name="httpCollection">
    <xsl:value-of select="/page/pageResponse/collection/metadataList/metadata[@name='httpPath']"/>
</xsl:variable>

<!-- Template controlling the footer. -->
<xsl:template name="gs_footer">
    <div id="gs_footer" class="ui-widget-header ui-corner-bottom">
        <div id="footer-text">Copyright 2013<br/>
            Greenstone Digital Library<br/>
            University of Waikato
        </div>
        <div id="footer-image">
            <img src="{$httpCollection}/images/logo.png"/>
            </div>
    </div>
</xsl:template>

To also add style to the footer, create a file called style.css in the collection's style folder with the style above. Then, back in the GLI, still in the global feature of the Format Features section, add:

<!-- Template adding stylesheet to html header -->
<xsl:template name="additionalHeaderContent">
    <link href="{$httpCollection}/style/style.css" rel="stylesheet" type="text/css"/>
</xsl:template>
en/user/gs3_sample_interface_modifications.1463018919.txt.gz · Last modified: 2016/05/12 02:08 (external edit)