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

</head><body>

</body></html>

<xsl:template match="/">

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

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

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

<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

<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 ">

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

....

</table>

</xsl:template>

BANNER.XSL

<xsl:template name="banner ">

....

</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

<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 ">

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

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

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

...</tr><tr>

</tr></table>

</xsl:template>

MAIN-PAGE.XSL

...</tr><tr>

</tr></table>

</xsl:template>

MAIN-PAGE.XSL

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

<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

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

Changing the banner

</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...

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

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

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

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

</td><td>

</td></tr>

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

</table></td>

</tr></table>

default layout

custom layout

search

featured interactivemaps

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

<td>

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

</td></tr>

</table></td><td>

</td></tr><tr><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

GeoNetwork Customization

Documents

Era of Customization and Era of Customization and ...cadlab.cs.ucla.edu/~cong/slides/Intel_DTTC_keynote.pdf8/21/2012 1 Era of Customization and Era of Customization and SpecilizationSpecilization

CIN Customization

Mastering Advanced GeoNetwork tutorial · 2020-05-20 · Configure spatial index in postgis (I) Install postgis support in postgres Setup postgis in postgres Create GeoNetwork database

GeoNetwork User Manual...of the United Nations (FAO) in 2001 to systematically archive and publish the geographic datasets 5 GeoNetwork User Manual, Release 2.10.4-0 produced within

GFOSS DAY 2012 GeoNetwork Presentation

Mastering Advanced GeoNetwork tutorial

GeoNetwork OpenSource: Geographic data sharing for everyone

GeoNetwork User Manual

MARINE SPATIAL DATA INFRASTRUCTURE : SOPAC GEONETWORK

MARINE SPATIAL DATA INFRASTRUCTURE : SOPAC GEONETWORK PACIFC ISLAND COUNTRIES GIS / RS USER CONFERENCE Keleni Raqisia

Mass customization

GeoNetwork, The Open Source Solution for the interoperable ...demo.geo-solutions.it/share/profile/geonetwork/geonetwork_2014.pdf · for the interoperable management of geospatial

Workshop: GeoNetwork for dummies, or how to setup and · PDF fileWorkshop: GeoNetwork for dummies, or how to setup and use an SDI ... (for example GeoServer) ... If you enabled the

Base Customization

WORLD MASS CUSTOMIZATION & PERSONALIZATION · PDF file2017 WORLD MASS CUSTOMIZATION & PERSONALIZATION CONFERENCE Customization 4.0 Elevating Mass Customization to a New Level Aachen,

Symantec Data Loss Prevention Detection Customization Guide...Table 1-1 Detection customization features Customization type Description SymantecDataLossPreventiondetectsmorethan300filetypes.However,ifthetype

GeoNetwork workshop introduction mapwindow conference 2012 Velp

Actual state in Developing GeoNetwork opensource and Metadata Network Standardization

INSPIRE support in GeoNetwork opensource project | fx ... · Multilingual GetCapabilities document configuration ... INSPIRE support in GeoNetwork has been mainly made in the

Product Customization