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
Second Annual Workshop, Rome, 24-28 April 2006
Why are we here..?
Second Annual Workshop, Rome, 24-28 April 2006
Customization..
Second Annual Workshop, Rome, 24-28 April 2006
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
Second Annual Workshop, Rome, 24-28 April 2006
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]
Second Annual Workshop, Rome, 24-28 April 2006
[Link]
Second Annual Workshop, Rome, 24-28 April 2006
header
banner
content
fields
interactive
categories
latestUpdates
featured
Second Annual Workshop, Rome, 24-28 April 2006
[Link] [Link]
<xsl:include href="[Link]"/> [Link] <xsl:include href="[Link]"/>
<xsl:template name="header"/> <xsl:include href="[Link]"/>
<!-- search fields -->
<xsl:template match="/">
controls for setting search <!-- title -->
criteria; list changes <!-- stylesheet --> <html>
according to <!-- meta tags --> <head>
simple/advanced and <!-- javascript --> header
local/remote search
</head>
<!-- featured --> <body>
random map
[Link] banner
<xsl:template name="banner"/>
<!-- latestUpdates -->
list of latest updates in the <!-- title --> [logo] content
archive <!-- buttons --> [links]
<!-- login --> </body>
<!-- categories --> </html>
search the catalogue
according to category
types
Second Annual Workshop, Rome, 24-28 April 2006
[Link]
<xsl:template match="/">
<html>
<head>
<xsl:call-template name="header"/> template in [Link]
<xsl:apply-templates mode="script" select="/"/>
</head> javascript code
<body onload="javascript:init();">
<table width="100%" height="100%">
<!-- banner -->
<tr><td>
<xsl:call-template name="banner"/>
</td></tr> template in [Link]
<!-- content -->
<tr height="100%"><td>
<xsl:call-template name="content"/>
</td></tr> template in [Link]
</table>
</body>
</html>
</xsl:template>
Second Annual Workshop, Rome, 24-28 April 2006
[Link] <xsl:include href="[Link]"/>
<xsl:template match="/">
<html>
<head>
<xsl:call-template name="header"/> template in [Link]
<xsl:apply-templates mode="script" select="/"/>
</head> javascript code
<body onload="javascript:init();">
<table width="100%" height="100%" bgcolor="#FFE400">
<!-- banner -->
<tr><td>
<xsl:call-template name="banner"/>
</td></tr> template in [Link]
<!-- content -->
<tr height="100%"><td>
<xsl:call-template name="content"/>
</td></tr> template in [Link]
<!-- footer -->
<tr><td>
<xsl:call-template name="footer"/>
</td></tr>
</table> template in [Link]
</body>
</html>
</xsl:template>
Second Annual Workshop, Rome, 24-28 April 2006
[Link]
<xsl:template name="banner">
<table width="100%">
<!-- title -->
<tr class="banner">
<td class="banner">
<img src="{/root/gui/url}/images/[Link]" />
</td>
<td align="right" class="banner">
<img src="{/root/gui/url}/images/[Link]" />
</td>
</tr>
<!-- buttons -->
<!-- login -->
....
</table>
</xsl:template>
Second Annual Workshop, Rome, 24-28 April 2006
[Link]
<xsl:template name="banner">
<table width="100%">
<!-- title -->
<tr class="banner">
<td class="banner">
<img src="{/root/gui/url}/images/[Link]" />
</td>
<td align="right" class="banner">
<img src="{/root/gui/url}/images/[Link]" />
</td>
</tr>
<!-- buttons -->
<!-- login --> [Link]
....
[Link] {
</table> font-size: 8pt;
</xsl:template>
color: #ffffff;
background-image: url('images/[Link]');
border-bottom: 1px solid #ffffff;
}
Second Annual Workshop, Rome, 24-28 April 2006
[Link] <xsl:include href="[Link]"/>
<xsl:template match="/">
<html>
<head>
<xsl:call-template name="header"/> template in [Link]
<xsl:apply-templates mode="script" select="/"/>
</head> javascript code
<body onload="javascript:init();">
<table width="100%" height="100%" bgcolor="#FFE400">
<!-- banner -->
<tr><td>
<xsl:call-template name="banner"/>
</td></tr> template in [Link]
<!-- content -->
<tr height="100%"><td>
<xsl:call-template name="content"/>
</td></tr> template in [Link]
<!-- footer -->
<tr><td>
<xsl:call-template name="footer"/>
</td></tr>
</table> template in [Link]
</body>
</html>
</xsl:template>
Second Annual Workshop, Rome, 24-28 April 2006
[Link]
<xsl:template name="content">
<table width="100%" height="100%">
<tr height="100%">
<!-- search and purpose -->
<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>
...
<!-- interactive maps -->
<td class="padded-content" valign="top"><center>
<a href="javascript:popInterMap('{/root/gui/url}/intermap')">
<img src="{/root/gui/url}/images/[Link]" alt="InterMap" align="top" /></a>
...
</tr>
<tr>
<!-- featured map -->
<!-- latest updates -->
<!-- categories -->
</tr>
</table>
</xsl:template>
Second Annual Workshop, Rome, 24-28 April 2006
[Link]
<xsl:template name="content">
<table width="100%" height="100%">
<tr height="100%">
<!-- search and purpose -->
<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>
...
<!-- interactive maps -->
<td class="padded-content" valign="top"><center>
<a href="javascript:popInterMap('{/root/gui/url}/intermap')">
<img src="{/root/gui/url}/images/[Link]" alt="InterMap" align="top" /></a>
...
</tr>
<tr>
<!-- featured map -->
<!-- latest updates -->
<!-- categories -->
</tr>
</table>
</xsl:template>
Second Annual Workshop, Rome, 24-28 April 2006
<h1><xsl:value-of select="/root/gui/strings/mainpageTitle"/></h1>
Find Interactive Maps, GIS datasets, Satellite Imagery and Related Applications
Second Annual Workshop, Rome, 24-28 April 2006
[Link]
<xsl:template name="content">
<table width="100%" height="100%">
<tr height="100%">
<!-- search and purpose -->
<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>
...
<!-- interactive maps -->
<td class="padded-content" valign="top" style="background-color:silver;"><center>
<a href="javascript:popInterMap('{/root/gui/url}/intermap')">
<img src="{/root/gui/url}/images/[Link]" alt="InterMap" align="top" /></a>
...
</tr>
<tr>
<!-- featured map -->
<!-- latest updates -->
<!-- categories -->
</tr>
</table>
</xsl:template>
Second Annual Workshop, Rome, 24-28 April 2006
<td class="padded-content"
Second Annual Workshop, Rome, 24-28 April 2006
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\
Second Annual Workshop, Rome, 24-28 April 2006
Exercises
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
c:\geonetwork\workshop2006\customization\exercises\
Second Annual Workshop, Rome, 24-28 April 2006
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\[Link] 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> ` <!-- your node's identifier -->
<logo>/images/logos/[Link]</logo> <!-- your logo's filename -->
</source>
<source>
<code>fao</code>
<logo>/images/logos/[Link]</logo>
</source>
Second Annual Workshop, Rome, 24-28 April 2006
Changing your node's logo
5. test the change by
making a search
and display the
results (no server
restart is needed)
Second Annual Workshop, Rome, 24-28 April 2006
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 ex02 folder
c:\geonetwork\workshop2006\customization\exercises\
Second Annual Workshop, Rome, 24-28 April 2006
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/)
[Link]
[Link]
[Link]
Second Annual Workshop, Rome, 24-28 April 2006
Changing the banner
2. Update [Link] document (\xsl\ folder)
<tr class="banner">
<td class="banner">
<img src="{/root/gui/url}/images/banner/[Link]" alt="GeoNetwork opensource"
align="top" />
</td>
<td align="right" class="banner">
<img src="{/root/gui/url}/images/banner/[Link]" alt="World picture" align="top" />
</td>
</tr>
Second Annual Workshop, Rome, 24-28 April 2006
Changing the banner
2. Update [Link] document (\xsl\ folder)
<tr class="banner">
<td class="banner">
<img src="{/root/gui/url}/images/banner/[Link]" alt="My GeoNetwork Node"
align="top" />
</td>
<td align="right" class="banner">
<img src="{/root/gui/url}/images/banner/[Link]" alt="My GeoNetwork Node"
align="top" />
</td>
</tr>
Second Annual Workshop, Rome, 24-28 April 2006
Changing the banner
3. Update [Link] 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 [Link] style in this document
and update the filename accordingly. Save and
close the stylesheet.
[Link] {
font-size: 8pt;
color: #ffffff;
/* background-image: url('images/[Link]'); old */
background-image: url('images/my-images/[Link]');
border-bottom: 1px solid #ffffff;
}
Second Annual Workshop, Rome, 24-28 April 2006
Changing the banner
After refreshing your web browser, the home page should look like this:
Second Annual Workshop, Rome, 24-28 April 2006
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 ex03 folder
c:\geonetwork\workshop2006\customization\exercises\
Second Annual Workshop, Rome, 24-28 April 2006
Changing the fonts and colors
Many properties of your website's look and feel are controlled through the CSS
style sheet [Link]. 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 [Link] file located in the
\web folder in your text or CSS editor.
Second Annual Workshop, Rome, 24-28 April 2006
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 [Link]-menu and [Link]-login
styles in [Link] and make the following
changes:
[Link]-menu { [Link]-login {
.. ..
background: #064377; background: #266397;
.. ..
} }
[Link]-menu { [Link]-login {
.. ..
background: #006969; background: #014F4F;
.. ..
} }
Second Annual Workshop, Rome, 24-28 April 2006
Changing fonts and colors
Now we will update the font color for menu links.
3. Find [Link] and [Link]:hover styles and
make the suggested changes. Then, save the file
and refresh the home page.
[Link]:hover [Link]
{ {
background: #266397; color: #ffffff; /*font color*/
} }
[Link]:hover [Link]
{ {
background: #68933a; /*(hex code)*/ color: yellow;
} }
Second Annual Workshop, Rome, 24-28 April 2006
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 ex04 folder
c:\geonetwork\workshop2006\customization\exercises\
Second Annual Workshop, Rome, 24-28 April 2006
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 [Link] file in a text or XML
editor.
Second Annual Workshop, Rome, 24-28 April 2006
Changing text on the homepage
The [Link] file
contains most of the
generic user
interface text.
Other files contain
strings related to
error messages, to
metadata standards
and some other
stuff.
Second Annual Workshop, Rome, 24-28 April 2006
Changing text on the homepage
<xsl:template name="content">
<table width="100%" height="100%">
...
<!-- search -->
<td><h1><xsl:value-of select="/root/gui/strings/mainpageTitle"/></h1>
...
Second Annual Workshop, Rome, 24-28 April 2006
Changing text on the homepage
Let's insert a new text string in the home page!
[Link]
Second Annual Workshop, Rome, 24-28 April 2006
Changing text on the homepage
1. Open [Link]
and add a new tag
as showed on the
right. Do it for each
language and
translate its content.
Save the file.
2. Open [Link]
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.
Second Annual Workshop, Rome, 24-28 April 2006
Changing text on the homepage
The result
should
look like
this!
Same
technique
to update
existing
text.
Second Annual Workshop, Rome, 24-28 April 2006
Exercises
1- Changing your node's logo
2- Changing vision identity (banner)
3- Changing fonts and colors
part 2
4- Changing text in the site
5- Changing page layout and moving content
working files are located in ex05 folder
c:\geonetwork\workshop2006\customization\exercises\
Second Annual Workshop, Rome, 24-28 April 2006
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, [Link].
default layout
[Link] banner
content
[Link]
Second Annual Workshop, Rome, 24-28 April 2006
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, [Link].
default layout
<!-- search -->
content
<!-- interactive maps -->
<!-- featured map -->
<!-- latest updates -->
<!-- categories -->
Second Annual Workshop, Rome, 24-28 April 2006
Changing page layout...
<xsl:template name="content">
<table width="100%" height="100%">
<tr height="100%">
<!-- search and purpose -->
<td class="padded-content" width="70%" height="100%">
<table width="100%" height="100%">
<tr> default layout
<td>
<h1><xsl:value-of select="/root/gui/strings/mainpageTitle"/></h1>
...
<!-- interactive maps -->
<td class="padded-content" valign="top"><center>
<a href="javascript:popInterMap('{/root/gui/url}/intermap')">
<img src="{/root/gui/url}/images/[Link]" alt="InterMap" align="top" /></a>
...
</tr>
<tr>
<!-- featured map -->
<!-- latest updates -->
<!-- categories -->
</tr>
</table>
</xsl:template>
Second Annual Workshop, Rome, 24-28 April 2006
default layout <table border="0" cellpadding="0" cellspacing="0">
<tr>
<!-- LEFT CONTENT -->
<td>
<table border="0" cellpadding="0" cellspacing="0">
<tr><td>
<!-- Recent additions -->
</td></tr>
<tr><td>
<!-- Categories -->
</td></tr>
</table>
</td>
<!-- RIGHT CONTENT -->
<td>
<table border="0" cellpadding="0" cellspacing="0">
<tr><td>
custom layout <!-- Search -->
</td></tr>
<!-- FEATURED/INTERACTIVE MAPS -->
recent additions
<tr><td>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
search
<!-- Featured data -->
</td>
<td>
<!-- Interactive maps -->
categories
</td></tr>
</table>
</td></tr>
featured interactive </table>
maps </td>
</tr>
</table>
Second Annual Workshop, Rome, 24-28 April 2006
Changing page layout and moving content
Below is a screenshot of the home page after
changing the layout.
Second Annual Workshop, Rome, 24-28 April 2006
default and custom layouts <table border="0" cellpadding="0" cellspacing="0">
<tr>
<table width="100%" height="100%"> <!-- LEFT CONTENT -->
<tr height="100%"> <td>
<table border="0" cellpadding="0" cellspacing="0">
<!-- Search --> <tr><td>
<td class="padded-content" width="70%" height="100%">
<table width="100%" height="100%">
<!-- Recent additions -->
<tr> </td></tr>
<td> <tr><td>
<h1><xsl:value-of select="/root/gui/strings/mainpageTitle"/></h1> <!-- Categories -->
... </td></tr>
<!-- Interactive maps --> </table>
<td class="padded-content" valign="top"><center> </td>
<a href="javascript:popInterMap('{/root/gui/url}/intermap')"> <!-- RIGHT CONTENT -->
<img src="{/root/gui/url}/images/[Link]" alt="InterMap" /></a> <td>
... <table border="0" cellpadding="0" cellspacing="0">
</tr> <tr><td>
<tr> <!-- Search -->
<!-- Featured map --> </td></tr>
<!-- FEATURED/INTERACTIVE MAPS -->
<!-- Recent additions --> <tr><td>
<table border="0" cellpadding="0" cellspacing="0">
<!-- Categories --> <tr>
</tr>
<td>
</table>
<!-- Featured data -->
</td>
<td>
<!-- Interactive maps -->
</td></tr>
</table>
</td></tr>
In the ex05 folder are working files (i.e. </table>
</td>
updated [Link]) for you to consult as </tr>
</table>
needed.
Second Annual Workshop, Rome, 24-28 April 2006
Changing page layout and moving content
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 [Link] file.
Second Annual Workshop, Rome, 24-28 April 2006
Second Annual Workshop, Rome, 24-28 April 2006
Customization of the site
Antonio Martucci
Thank you for your attention!
13:45 part 1
15:30 Coffee Break
15:45 part 2
