1. Store the banner graphics in the required folder
2. Update the banner XSL transformation document

The graphics for the banner are stored in the images folder inside the web directory, see figure below.

The default banner consists of three graphics; a left part, a center part and a right part.
The center part is defined as a background image of the table the whole banner is assembled in. It is a graphic that can easily be repeated horizontaly in a seamless way, linking the left and right graphic. The default graphic is named blue-stripes.jpg.
The left and right part are named header-left.gif and header-right.gif respectively.
All banner graphics are 80 pixels high.

You can replace the default graphics with graphics of your own organization, but for now use the sample ones provided here.
Your graphics do of course not have to match the same sizes of the default ones.

Update the banner XSL document

We will now open the banner.xsl document that is responsible for generating the banner. You can find the banner.xsl in the \web\xsl folder, see figure below.

Open the banner.xsl file in a text or xml editor and study it for a moment.
The XSL files are responsible for the generation of the HTML output of GeoNetwork opensource. They operate on an incoming XML document, taking content from that XML document and transforming it into HTML output a web browser can display (render).

You will see the text listed below at the top of the document.

<xsl:template name="banner">

<table width="100%">

  <!-- title -->
  <tr class="banner">
    <td class="banner">
      <img src="{/root/gui/url}/images/header-left.gif" alt="GeoNetwork opensource" align="top" />
    </td>
    <td align="right" class="banner">
      <img src="{/root/gui/url}/images/header-right.gif" alt="World picture" align="top" />
    </td>
  </tr>

  <!-- buttons -->
  <tr class="banner">

Note the highlighted text in red that defines the names and location of the left and right graphics.
Note the highlighted text in green that defines the style used to render the middle part of the banner.

The {root/gui/url} will be replaced with the base URL of your GeoNetwork opensource installation; in this case . The rest of the string will point the browser to the appropriate left or right graphic.

Replace the name of the left banner image to match the new name and save and close the document.

Now open the geonetwork.css file in a text or CSS editor. The file is located in the \web folder of your installation. 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.

We have finished updating the banner. Open your web browser and refresh the GeoNetwork opensource homepage.

Previous page - Index - Next page