Branding with confidence

One of the most common EPrints customisations is to add your own institution's branding and "look or feel" to the interface - this may include logos, page layouts, stylesheets and colour schemes.

Branding fast track

This section describes techniques for very quickly changing the appearance of your EPrints repository. These techniques could be useful, for example, to quickly brand a demonstration repository so that your audience can identify with it.

Adding a logo

Example 1

The simplest approach is to overwrite the default EPrints logo with a copy of your own logo. Copy your logo to:

/opt/eprints3/archives/ARCHIVEID/cfg/static/images/sitelogo.gif

Reload the EPrints configuration by typing:

bin/epadmin reload ARCHIVEID

Your logo should now be displayed in place of the default EPrints logo.

Example 2

The image that EPrints uses for the site logo is defined in the branding configuration file. You can change this setting to point the logo image on your institution's Web page.

Open the branding configuration file in a text editor:

/opt/eprints3/archives/ARCHIVEID/cfg/cfg.d/branding.pl

Find the site_logo configuration setting:

$c->{site_logo} = "/images/sitelogo.gif";

Change the setting to point to your own logo image:

$c->{site_logo} = "http://www.soton.ac.uk/img/furniture/royal/corp_logo.gif";

Reload the EPrints configuration by typing:

bin/epadmin reload ARCHIVEID

Example 3

You can also adjust the site_logo configuration setting to point any local image file. Place a copy of your logo image somewhere in the /opt/eprints3/archives/ARCHIVEID/cfg/static/images/ directory and then update the branding configuration file to point to it.

$c->{site_logo} = "/images/local/mylogo.gif";

Reload the EPrints configuration by typing:

bin/epadmin reload ARCHIVEID

This time, an extra step is needed to process the new logo file:

bin/generate_static ARCHIVEID

Changing the theme

Open the branding configuration file in a text editor:

/opt/eprints3/archives/ARCHIVEID/cfg/cfg.d/branding.pl

Find the theme configuration setting:

# $c->{theme} = "green";

Change the setting to use a theme.

$c->{theme} = "green";

Currently EPrints 3 only includes the default and "green" theme, but look out for more themes in future versions of EPrints and on the http://files.eprints.org/ community repository.

Taking control

This section describes techniques for taking complete control of the appearance of your repository.

Changing the page layout

Every page in your repository is displayed using a single template. A custom layout can be applied to your repository pages by editing this template directly.

Open the template file for your repository:

/opt/eprints3/archives/ARCHIVEID/cfg/lang/en/templates/default.xml

The template is an XHTML file with some additional syntax (see [Template_Format]).

Pins

You will notice a number of epc:pin elements. These tell EPrints how to combine the template with page-specific content to build each individual page.

Example

 <div align="center">
   <epc:pin ref="toolbar" />
   <table width="720" class="ep_tm_main"><tr><td align="left">
     <h1 class="ep_tm_pagetitle"><epc:pin ref="title"/></h1>
     <epc:pin ref="page"/>
   </td></tr></table>
 </div>

This part of the template lays out the main content area of the page (the page pin) inside a fixed width table, which is centered on the page. The toolbar (toolbar pin) and title of the page (title pin) are laid out above the main content.

You can incorporate the epc:pin elements however you like into your new layout (although note that the head pin should always be inside the head section of the template, and the pagetop pin should be at the start of the body section). You can also define new pins (see below).

Configuration Strings

There are also a number of epc:print elements in the default template which are useful for including configuration values in the template.

Example

<style type="text/css" media="screen">@import url(<epc:print expr="$config{base_url}"/>/style/auto.css);</style>

This extract from the head section of the template shows how an epc:print element is used to refer to the base URL of the repository. This avoids hardcoding URLs into the template (which is good for maintainability - if the repository URL should change, you do not have to change the template).

Configuration values can also be used inside attributes, using the {...} syntax.

Example

<a href="{$config{frontpage}}"><img alt="Logo" src="{$config{site_logo}}" /></a>

This extract shows how the URL of both the front page of the repository and the logo are derived from the configuration rather than being hard coded directly into the template.

After making changes to the template, reload the repository configuration by entering:

bin/epadmin reload ARCHIVEID

Adding images

If your new layout requires additional images, or if you want to add additional images to the default layout, you need to carry out a couple of steps first.

Place a copy of your images in your repository's image directory:

/opt/eprints3/archives/ARCHIVEID/cfg/static/images/

Process the image by running:

bin/generate_static ARCHIVEID

The image can be referred to from the site template.

Example

Place a copy of small_logo.gif in:

/opt/eprints3/archives/ARCHIVEID/cfg/static/images/

Use the image in the template:

<img src="/images/small_logo.gif" />

Working with stylesheets

style-related images

Dynamic content

Add date_time pin.

Branding checklist

1 Design site layout, with logos etc. eg. take a candidate page from an existing site Make XHTML - tidy might help 2 Replace content with appropriate epc:pin elements 3 Add images and stylesheets to static dir