GeoNetwork Customization

Second Annual Workshop, Rome, 24-28 April 2006

Customization of the site

13:45 - 15:30 part 115:30 Coffee Break15:45 - 16:45 part 2

Antonio Martucci


Why are we here..?


Customization..


Summary

• Vocabulary pertinent to customization

• XSL style sheets generating the home page

• Exercises on customization:• changing node's logo

• changing vision identity (banner)

• changing font and color styles

• adding or updating localized text

• changing main layout and re-arranging

page components

This session will cover the following topics:

13:45 - 15:30part 1

15:45 - 16:45part 2


Vocabulary

HyperText Mark-Up Language (HTML)

[the authoring language used to create documents on the World Wide Web]

Cascading Style Sheets (CSS)

[feature added to HTML that gives Web site developers more control over how pages are displayed]

Javascript (JS)

[scripting language enabling Web authors to design interactive sites]

Extensible Markup Language (XML)

[specification allowing designers to create their own customized tags. It enables the definition, transmission, validation, and interpretation of data between applications and between organizations]

Extensible Style Language (XSL)

[a specification for separating style from content when creating HTML or XML pages. The specifications work much like templates, allowing designers to apply single style documents to multiple pages]


http://localhost:8080/geonetwork/srv/en/main.home


banner

content

header

fields

categories

latestUpdates

featured

interactive


header.xsl<xsl:template name="header"/>



banner.xsl<xsl:template name="banner"/>

 [logo] [links]

main-page.xsl<xsl:include href="main.xsl"/>

controls for setting search criteria; list changes according to simple/advanced and local/remote search

random map

list of latest updates in the archive

search the catalogue according to category types

main.xsl

header

banner

content

<html><head>

</head><body>

</body></html>

<xsl:template match="/">

<xsl:include href="header.xsl"/><xsl:include href="banner.xsl"/>


<xsl:template match="/"><html>

<head><xsl:call-template name="header"/><xsl:apply-templates mode="script" select="/"/>

</head><body onload="javascript:init();">

<table width="100%" height="100%"><tr><td>

<xsl:call-template name="banner"/></td></tr>

<tr height="100%"><td>

<xsl:call-template name="content"/></td></tr>

</table></body>

</html></xsl:template>

javascript code

template in header.xsl

template in banner.xsl

template in main-page.xsl

MAIN.XSL


javascript code







<table width="100%" height="100%" bgcolor="#FFE400" ><tr><td>



<xsl:call-template name="content"/></td></tr><tr><td>

<xsl:call-template name="footer"/></td></tr>

</table></body>


<xsl:include href="footer.xsl"/>

template in footer.xsl

MAIN.XSL


BANNER.XSL

<xsl:template name="banner ">

<table width="100%"><tr class="banner">

<td class="banner"><img src="{/root/gui/url}/images/header-left.gif" />

</td><td align="right" class="banner">

<img src="{/root/gui/url}/images/header-right.gif" / ></td>

</tr>

....

</table>

</xsl:template>


BANNER.XSL

<xsl:template name="banner ">

<table width="100%"><tr class="banner">

<td class="banner"><img src="{/root/gui/url}/images/ header-left.gif " />


<img src="{/root/gui/url}/images/ header-right.gif " /></td>

</tr>

....

</table>

</xsl:template>

td.banner {font-size: 8pt;color: #ffffff;background-image: url('images/blue-stripes.jpg ');border-bottom: 1px solid #ffffff;

}

geonetwork.css


javascript code







<table width="100%" height="100%" bgcolor="#FFE400" ><tr><td>



<xsl:call-template name="content"/></td></tr><tr><td>

<xsl:call-template name="footer"/></td></tr>

</table></body>


<xsl:include href="footer.xsl"/>

template in footer.xsl

MAIN.XSL


<xsl:template name="content ">

<table width="100%" height="100%"><tr height="100%">

<td class="padded-content" width="70%" height="100%">

<table width="100%" height="100%"><tr>

<td><h1><xsl:value-of select="/root/gui/strings/mainpageTitle"/></h1>...

<td class="padded-content" valign="top"><center>

<a href="javascript:popInterMap('{/root/gui/url}/intermap')"><img src="{/root/gui/url}/images/intermap.gif" alt="InterMap" align="top" /></a>

...</tr><tr>



</tr></table>

</xsl:template>

MAIN-PAGE.XSL









...</tr><tr>


</tr></table>

</xsl:template>

MAIN-PAGE.XSL


<h1><xsl:value-of select="/root/gui/strings/mainpageTitle"/></h1>

Find Interactive Maps, GIS datasets, Satellite Imag ery and Related Applications







<td class="padded-content" valign="top" style="background-color:silver;" ><center>


...</tr><tr>


</tr></table>

</xsl:template>

MAIN-PAGE.XSL


<td class="padded-content"


1- Changing your node's logo

2- Changing vision identity (banner)

3- Changing fonts and colors

4- Changing text on the homepage

5- Changing page layout and moving content

Exercises

working files are located in each exercise folder

c:\geonetwork\workshop2006\customization\exercises\

part 2







Exercises

working files are located in ex01 folder



Your metadata is identified by a small logo of your own organization. By default a small, non-specific logo is set up to be displayed with your own metadata. Of course that logo should be replaced to ensure your users correctly identify the source of the metadata record in a result set.

Changing your node's logo

<sources><source>

<code>node-identifier </code> ` <logo>/images/logos/my-globe.gif </logo> 

</source><source>

<code>fao</code><logo>/images/logos/fao.gif</logo>

</source>

1. create your own logo (size of 40x40 px ) or use an existing one 2. put it in the \web\images\logos folder3. open the file \web\xml\sources.xml in a text editor4. change the file name of your nodes logo to match your logo's name


Changing your node's logo

5. test the change by making a search and display the results (no server restart is needed)







Exercises



part 2


The banner of your GeoNetwork node can be easily changed by replacing the default with graphics of your own organization. We will go through this process in two steps.

Changing the banner

1. Store the new banner graphics in the folder (/images/banner/)

default banner graphics are 80 pixels high

my-banner-back.gif

my-banner-right.gif

my-banner-left.gif


2. Update banner.xsl document (\xsl\ folder)

Changing the banner

<tr class="banner"><td class="banner">

<img src="{/root/gui/url}/images/banner/header-left.gif" alt="GeoNetwork opensource" align="top" />


<img src="{/root/gui/url}/images/banner/header-right.gif" alt="World picture" align="top" /></td>

</tr>


2. Update banner.xsl document (\xsl\ folder)

Changing the banner

<tr class="banner"><td class="banner">

<img src="{/root/gui/url}/images/banner/my-banner-left.gif" alt="My GeoNetwork Node" align="top" />


<img src="{/root/gui/url}/images/banner/my-banner-right.gif" alt="My GeoNetwork Node" align="top" />

</td></tr>


Changing the banner

td.banner {font-size: 8pt;color: #ffffff;

/* background-image: url('images/blue-stripes.jpg'); old */background-image: url('images/my-images/my-banner-back.gif');border-bottom: 1px solid #ffffff;

}

3. Update geonetwork.css file (\web\ ) in a text or CSS editor

We will have to update the image name of the graphic used for the middle part of the banner.

Search for the td.banner style in this document and update the filename accordingly. Save and close the stylesheet.


Changing the bannerAfter refreshing your web browser, the home page sh ould look like this:







Exercises



part 2


Changing the fonts and colors

1. Open the geonetwork.css file located in the \web folder in your text or CSS editor.

Many properties of your website's look and feel are controlled through the CSS style sheet geonetwork.css. This file defines style classes that are used throughout GeoNetwork. By changing styles, you can effectively change your site to be in line with your house look and feel.


td.banner-menu {..

background: #064377;..}

2. Find td.banner-menu and td.banner-loginstyles in geonetwork.css and make the following changes:

td.banner-login {..


td.banner-menu {..


td.banner-login {..

background: #014F4F;..}

Changing fonts and colors

We want to update background colors for menu and login bars to be more in line with the banner graphics.


a.banner:hover{

background: #266397; }

3. Find a.banner and a.banner:hover styles and make the suggested changes. Then, save the file and refresh the home page.

a.banner{

color: #ffffff; /*font color*/}

a.banner:hover{

background: #68933a; /*(hex code)*/}

a.banner{

color: yellow;}

Changing fonts and colors

Now we will update the font color for menu links.







Exercises



part 2


Changing text on the homepage

All text that is part of the GeoNetwork opensourceuser interface is maintained in a set of XML files. These files can be localized to provide access to the site in several languages.

To see the localized files, open your file manager and go to the following location:

<your geonetwork installation directory>\web\loc\

For each available language, you will find a two letter coded folder containing an image and an xml folder.

1. Open the strings.xml file in a text or XML editor.



The strings.xml file contains most of the generic user interface text.

Other files contain strings related to error messages, to metadata standards and some other stuff.



<xsl:template name="content"><table width="100%" height="100%">

...<td><h1><xsl:value-of select="/root/gui/strings/mainpageTitle"/></h1>

...



Let's insert a new text string in the home page!

main-page.xsl


Changing text on the homepage1. Open strings.xml

and add a new tag as showed on the right. Do it for each language and translate its content. Save the file.

2. Open main-page.xsland find the commented section "Info " in the content template (see red box on the right).

3. Add this additional lines (green box) as new table rows and save the file.

4. Refresh the page.



The result should look like this!

Same technique to update existing text.





4- Changing text in the site


Exercises



part 2


Changing page layout and moving content

You can further customize the GUI by moving existing or adding new page elements. To do that, you need to change the XSL style sheets responsible for the

page rendering, main-page.xsl .

banner

content

banner.xsl

main-page.xsl

default layout













You can further customize the GUI by moving existing or adding new page elements. To do that, you need to change the XSL style sheets responsible for the

page rendering, main-page.xsl .

default layout

content









...</tr><tr>


</tr></table>

</xsl:template>

default layout

Changing page layout...


<table border="0" cellpadding="0" cellspacing="0"><tr>

<td><table border="0" cellpadding="0" cellspacing="0">

<tr><td>

</td></tr> <tr><td>

</td></tr></table></td><td>

<table border="0" cellpadding="0" cellspacing="0"> <tr><td>

</td></tr><tr><td>


<td>

</td><td>

</td></tr>

</table></td></tr>

</table></td>

</tr></table>

default layout

custom layout

rece

nt a

dditi

ons

cate

gorie

s

search

featured interactivemaps



Below is a screenshot of the home page after changing the layout.



<td>

<table border="0" cellpadding="0" cellspacing="0"><tr><td>

</td></tr> <tr><td>

</td></tr>

</table></td><td>

<table border="0" cellpadding="0" cellspacing="0"> <tr><td>

</td></tr><tr><td>


<td>

</td><td>

</td></tr>

</table></td></tr>

</table></td>

</tr></table>


<td class="padded-content" width="70%" height="100%">



<td class="padded-content" valign="top"><center>

<a href="javascript:popInterMap('{/root/gui/url}/intermap')"><img src="{/root/gui/url}/images/intermap.gif" alt="InterMap" /></a>...

</tr><tr>



</tr></table>

default and custom layouts

In the ex05 folder are working files (i.e. updated main-page.xsl) for you to consult as needed.



Let's try to get to the result below . Note that you will need to apply correct styles from the CSS file and change background colors.

Suggested to work on a copy of the original main-page.xsl file.



13:45 part 115:30 Coffee Break15:45 part 2

Thank you for your attention!

Customization of the site Antonio Martucci

Documents

GeoNetwork Customization