GeoNetwork Customization

Second Annual Workshop, Rome, 24-28 April 2006
Customization of the site

Antonio Martucci
13:45 - 15:30 part 1

15:30 Coffee Break
15:45 - 16:45 part 2
Why are we here..?

Customization..
Summary
This session will cover the following topics:
• Vocabulary pertinent to customization

• XSL style sheets generating the home page
13:45 - 15:30
• Exercises on customization: part 1
• changing node's logo
• changing vision identity (banner)
• changing font and color styles
• adding or updating localized text

15:45 - 16:45
• changing main layout and re-arranging
part 2
page components
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
header
banner
content
fields
interactive
categories
latestUpdates
featured
main-page.xsl main.xsl
<xsl:include href="main.xsl"/> header.xsl <xsl:include href="header.xsl"/>
<xsl:template name="header"/> <xsl:include href="banner.xsl"/>

<xsl:template match="/">
controls for setting search 
criteria; list changes  <html>
according to  <head>
simple/advanced and  header
local/remote search
</head>
 <body>
random map
banner.xsl banner
<xsl:template name="banner"/>

list of latest updates in the  [logo] content
archive  [links]
 </body>
 </html>
search the catalogue
according to category
types
MAIN.XSL
<html>
<head>
<xsl:call-template name="header"/> template in header.xsl
<xsl:apply-templates mode="script" select="/"/>
</head> javascript code
<body onload="javascript:init();">
<table width="100%" height="100%">

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


<tr height="100%"><td>
<xsl:call-template name="content"/>
</td></tr> template in main-page.xsl
</table>
</body>
</html>
</xsl:template>
MAIN.XSL <xsl:include href="footer.xsl"/>
<html>
<head>
<table width="100%" height="100%" bgcolor="#FFE400">

<tr><td>



<tr><td>
<xsl:call-template name="footer"/>
</td></tr>
</table> template in footer.xsl
</body>
</html>
</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" />
</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" />
</td>
<img src="{/root/gui/url}/images/header-right.gif" />
</td>
</tr>


 geonetwork.css
....
td.banner {
</table> font-size: 8pt;
</xsl:template>
color: #ffffff;
background-image: url('images/blue-stripes.jpg');
border-bottom: 1px solid #ffffff;
}
MAIN.XSL <xsl:include href="footer.xsl"/>
<html>
<head>
<table width="100%" height="100%" bgcolor="#FFE400">

<tr><td>



<tr><td>
<xsl:call-template name="footer"/>
</td></tr>
</table> template in footer.xsl
</body>
</html>
</xsl:template>
MAIN-PAGE.XSL
<xsl:template name="content">

<tr height="100%">

<td class="padded-content" width="70%" 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 height="100%">
<tr>
<td>
...
...
</tr>
<tr>

</tr>
</table>
</xsl:template>
Find Interactive Maps, GIS datasets, Satellite Imagery and Related Applications
MAIN-PAGE.XSL

<tr height="100%">
<tr>
<td>
...
<td class="padded-content" valign="top" style="background-color:silver;"><center>
...
</tr>
<tr>

</tr>
</table>
</xsl:template>
<td class="padded-content"
Exercises
1- Changing your node's logo
2- Changing vision identity (banner)
3- Changing fonts and colors

part 2
4- Changing text on the homepage
5- Changing page layout and moving content
working files are located in each exercise folder
c:\geonetwork\workshop2006\customization\exercises\
Exercises
working files are located in ex01 folder
Changing your node's logo

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.
1. create your own logo (size of 40x40 px) or use an existing one
2. put it in the \web\images\logos folder
3. open the file \web\xml\sources.xml in a text editor
4. change the file name of your nodes logo to match your logo's name
<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>
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
Changing the banner

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.
default banner graphics are
80 pixels high
1. Store the new banner graphics in the folder

(/images/banner/)
my-banner-left.gif
my-banner-back.gif
my-banner-right.gif
Changing the banner

2. Update banner.xsl document (\xsl\ folder)
<tr class="banner">
<td class="banner">
<img src="{/root/gui/url}/images/banner/header-left.gif" alt="GeoNetwork opensource"
align="top" />
</td>
<img src="{/root/gui/url}/images/banner/header-right.gif" alt="World picture" align="top" />
</td>
</tr>
Changing the banner

2. Update banner.xsl document (\xsl\ folder)
<tr class="banner">
<td class="banner">
<img src="{/root/gui/url}/images/banner/my-banner-left.gif" alt="My GeoNetwork Node"
align="top" />
</td>
<img src="{/root/gui/url}/images/banner/my-banner-right.gif" alt="My GeoNetwork Node"
align="top" />
</td>
</tr>
Changing the banner

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.
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;
}
Changing the banner

After refreshing your web browser, the home page should look like this:
Exercises

part 2
Changing the fonts and colors

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.
1. Open the geonetwork.css file located in the

\web folder in your text or CSS editor.
Changing fonts and colors

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

styles in geonetwork.css and make the following
changes:
td.banner-menu { td.banner-login {
.. ..
background: #064377; background: #266397;
.. ..
} }
td.banner-menu { td.banner-login {
.. ..
background: #006969; background: #014F4F;
.. ..
} }
Changing fonts and colors

Now we will update the font color for menu links.
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:hover a.banner
{ {
background: #266397; color: #ffffff; /*font color*/
} }
a.banner:hover a.banner
{ {
background: #68933a; /*(hex code)*/ color: yellow;
} }
Exercises

part 2
Changing text on the homepage

All text that is part of the GeoNetwork opensource
user 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.
...

<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

1. 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.xsl
and 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.
Exercises

part 2
4- Changing text in the site
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.
default layout
banner.xsl banner
content
main-page.xsl

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


Changing page layout...


<tr height="100%">
<tr> default layout
<td>
...
...
</tr>
<tr>

</tr>
</table>
</xsl:template>
default 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>
<tr><td>
custom layout 
</td></tr>

recent additions
<tr><td>
<tr>
<td>
search

</td>
<td>

categories
</td></tr>
</table>
</td></tr>
featured interactive </table>
maps </td>
</tr>
</table>

Below is a screenshot of the home page after
changing the layout.
default and custom layouts <table border="0" cellpadding="0" cellspacing="0">

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

<tr> </td></tr>
<td> <tr><td>
<h1><xsl:value-of select="/root/gui/strings/mainpageTitle"/></h1> 
... </td></tr>
 </table>
<td class="padded-content" valign="top"><center> </td>
<a href="javascript:popInterMap('{/root/gui/url}/intermap')"> 
<img src="{/root/gui/url}/images/intermap.gif" alt="InterMap" /></a> <td>
... <table border="0" cellpadding="0" cellspacing="0">
</tr> <tr><td>
<tr> 
 </td></tr>

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

</td>
<td>

</td></tr>
</table>
</td></tr>
In the ex05 folder are working files (i.e. </table>
</td>
updated main-page.xsl) for you to consult as </tr>
</table>
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.
Customization of the site

Antonio Martucci
Thank you for your attention!
13:45 part 1
15:30 Coffee Break
15:45 part 2

GeoNetwork Customization

Uploaded by

Document Information

Original Description:

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

GeoNetwork Customization

Uploaded by

Copyright:

Available Formats

Second Annual Workshop, Rome, 24-28 April 2006

Customization of the site

13:45 - 15:30 part 1

Why are we here..?

• Vocabulary pertinent to customization

• adding or updating localized text

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

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

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

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

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

1- Changing your node's logo

2- Changing vision identity (banner)

3- Changing fonts and colors

5- Changing page layout and moving content

working files are located in each exercise folder

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

working files are located in ex01 folder

Changing your node's logo

Changing your node's logo

5. test the change by

1- Changing your node's logo

2- Changing vision identity (banner)

3- Changing fonts and colors

5- Changing page layout and moving content

working files are located in ex02 folder

Changing the banner

1. Store the new banner graphics in the folder

Changing the banner

Changing the banner

Changing the banner

We will have to update the image name of the

Search for the td.banner style in this document

Changing the banner

1- Changing your node's logo

2- Changing vision identity (banner)

3- Changing fonts and colors

5- Changing page layout and moving content

working files are located in ex03 folder

Changing the fonts and colors

1. Open the geonetwork.css file located in the

Changing fonts and colors

2. Find td.banner-menu and td.banner-login

Changing fonts and colors

3. Find a.banner and a.banner:hover styles and

1- Changing your node's logo

2- Changing vision identity (banner)

3- Changing fonts and colors

5- Changing page layout and moving content

working files are located in ex04 folder

Changing text on the homepage

For each available language, you will find a two letter

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

Changing text on the homepage