"Seegrid will be due for a migration to confluence on the 1st of August. Any update on or after the 1st of August will NOT be migrated"

GeoNetwork Branding

Introduction

The look and feel of the GeoNetwork website are controlled through the CSS style sheet which defines style classes that are used throughout GeoNetwork. This document provides some basic guide on where to make those changes that allow branding GeoNetwork into your organisation's image.

Note: This guide is based on GeoNetwork trunk revision 8059 and please ensure the GeoNetwork server is stopped before making the changes.

Changing the Top Banner Images

  1. The top banner is made up of 3 images :
    • banner.jpg
      • geonetworkhomedir/web/geonetwork/images/header-left.jpg (209X80 pixels)
      • geonetworkhomedir/web/geonetwork/images/header-right.gif (240X80 pixels)
      • geonetworkhomedir/web/geonetwork/images/blue-background.gif (10X80 pixels)
  2. Copy your new images to the images directory (geonetworkhome/web/geonetwork/images) and edit the following files to point to the new images if the new images are having a different name :
    • geonetworkhomedir/web/geonetwork/xsl/banner.xsl (left and right images): line 16, 19, 181 and 184
    • geonetworkhomedir/web/geonetwork/xsl/main-error.xsl (left and right images): line 31 and 34
    • geonetworkhomedir/web/geonetwork/xsl/res.xsl (left and right images): line 19 and 41
    • geonetworkhomedir/web/geonetwork/xsl/metadata-license-annex.xsl (left and right images): line 59 and 34
    • geonetworkhomedir/web/geonetwork/geonetwork.css (top banner background color) : line 106 of td.banner

Changing the Banner Menu Font and Background Color

  1. banner_menu.jpg
    • geonetworkhomedir/web/geonetwork/geonetwork.css
      • changing menu background color :
        • line 117 of td.banner-menu section : background: #064377;
      • changing menu font color :
        • line 139 of a.banner section : color: #ffffff;
      • changing menu hover background color :
        • start from line 143 : add in background: #064377; to a.banner:hover section

Changing the Banner Login Font and Background Color

  1. banner_login.jpg
    • geonetworkhomedir/web/geonetwork/geonetwork.css
      • changing login font color :
        • line 126 of td.banner-login section : color: #ffffff;
      • changing login background color :
        • line 130 of td.banner-login section : background: #266397;

Changing Node Logo

  1. The node logo is the small logo that shows up on each search entry, it is stored in geonetworkhomedir/web/geonetwork/images/logos/ dir, e.g.:
    • node_logo.gif
  2. To find the correct logo to change, do a search from GeoNetwork and right click on the node logo and choose "Save Picture As.." (IE) or "Save Image As.." (Firefox). It will be a long character string (e.g. 67e10f08-49d3-4639-ae07-a36a20537212.gif). The logo is named after the UUID (a global unique identifier) that was generated for your particular installation.
  3. Replace this file with a logo image for your own Organization. Make sure the new logo has exactly that same name.

HTML Color Chart Link

  1. Here are some links that may help in choosing the right color :

Restart GeoNetwork

  1. Before restarting tomcat, change the ownership of the css files back to tomcat6:tomcat6
Topic attachments
I Attachment Action Size Date Who Comment
banner.jpgjpg banner.jpg manage 10.1 K 05 Sep 2011 - 14:02 FlorenceTan GeoNetwork banner
banner_login.jpgjpg banner_login.jpg manage 2.5 K 05 Sep 2011 - 14:02 FlorenceTan Login Menu
banner_menu.jpgjpg banner_menu.jpg manage 2.6 K 05 Sep 2011 - 14:02 FlorenceTan Banner Menu
node_logo.gifgif node_logo.gif manage 0.4 K 05 Sep 2011 - 16:43 FlorenceTan Node Logo
Topic revision: r6 - 23 Sep 2011, FlorenceTan
 

Current license: All material on this collaboration platform is licensed under a Creative Commons Attribution 3.0 Australia Licence (CC BY 3.0).