Branding with confidence

From EPrints Documentation
Revision as of 17:22, 15 January 2007 by Tmb (Talk | contribs)

Jump to: navigation, search

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.

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 the chosen 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.

Template checklist

Your new layout should include:

  1. the correct XML declaration at the top of the file
  2. a head section (load default and custom stylesheets)
  3. a body section. containing:
    1. a header (eg. repository title and logo)
    2. a navigation menu (links to browse, search etc.)
    3. a quick search box
    4. a main content area (page pin)
    5. a footer (eg. copyright notice)

Load your new template by running:

bin/epadmin reload ARCHIVEID

Adding extra images

If your new layout requires additional images, or if you want to add additional images to the default layout, you need to place a copy of each image in your repository's image directory:

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

Process the images by running:

bin/generate_static ARCHIVEID

The image can then be used in the 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

EPrints has EPrints_Directory_Structure/eprints3/lib/static/style several stylesheet files, each of which contains style rules for a specific aspect of the repository. By default these stylesheets are applied to every repository page, in alphabetical order.

The default stylesheets can be found here:

/opt/eprints3/lib/static/style/auto/

Overriding default style rules

You may decide that you want to override a particular rule in one of the default stylesheets. Rather than edit the default stylesheet directly (since the edited rule will then be applied to any other repositories running on the same server), you should override the rule in your repository's overrides file:

/opt/eprints3/archives/ARCHIVEID/cfg/static/style/auto/zzz_local.css

Remember that the stylesheets are applied in alphabetical order, so this file will be applied last.

Example

h1 {
        margin: 0px 0px 10px 0px;
        font: bold 130% Arial,Sans-serif;
        text-align: center;
        color: #606060;
}

This rule is from general.css and defines how the h1 (heading level 1) element should be displayed (in the default template, h1 is used to display the title of the page).

Edit the local overrides file for your repository:

/opt/eprints3/archives/ARCHIVEID/cfg/static/style/auto/zzz_local.css

Override the h1 style:

h1 {
        font: bold 200% Arial,Sans-serif;
}

Apply the new style rules by running:

bin/generate_static ARCHIVEID

This renders the page title on each page in a larger font.

Overriding default stylesheets

If you want to override a default stylesheet in its entirety, you should copy it into your repository's stylesheet directory.

Example

Make a copy of the default stylesheet general.css:

cp /opt/eprints3/lib/static/style/auto/general.css /opt/eprints3/archives/ARCHIVEID/cfg/static/style/auto/

Edit the repository copy:

/opt/eprints3/archives/ARCHIVEID/cfg/static/style/auto/general.css

After making changes to the repository copy of general.css, apply the new stylesheet by running:

bin/generate_static ARCHIVEID

Adding extra stylesheets

Adding style-related images

Adding 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