Difference between revisions of "Branding with confidence"

From EPrints Documentation
Jump to: navigation, search
Line 71: Line 71:
 
''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.
 
''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.
  
−
Advanced Branding
+
==Taking control==
  
−
Changing the site template
+
This section describes techniques for taking complete control of the appearance of your repository.
  
−
You can achieve much more radical changes to the layout of the site but editing the site template directly.
+
===Changing the page layout===
  
−
Open the site template for your repository:
+
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.
  
−
/opt/eprints3/archives/ARCHIVEID/cfg/lang/en/templates/default.xml
+
Open the template file for your repository:
  
−
This is an XHTML file with some special extras that we need to understand before continuing.
+
/opt/eprints3/archives/ARCHIVEID/cfg/lang/en/templates/default.xml
  
−
Pins
+
The template is an XHTML file with some additional syntax (see [Template_Format]).
  
−
You will notice a number of epc:pin elements. These tell EPrints how to the template combines with page-specific content to build individual repository pages.
+
====Pins====
  
−
<epc:pin ref="title"/> where the title of the page should be inserted
+
You will notice a number of epc:pin elements. These tell EPrints how the template combines with page-specific content to build each individual page.
−
<epc:pin ref="page"/> where the main content of the page should be inserted
 
−
<epc:pin ref="toolbar" /> where the toolbar (what is the toolbar) should be inserted
 
−
<epc:pin ref="login_status"/> the login status of the current user
 
  
−
You can incorporate these however you like into your new layout.
+
'''Example
  
−
There are a couple of pins which have a more fixed position:
+
<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>
  
−
<epc:pin ref="head"/> inside the head element of the template
+
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.
−
<epc:pin ref="pagetop"/> the top of the page - this is usually the first element inside the body
 
  
−
You can also define new pins (see below).
+
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).
  
−
Config Strings
+
====Configuration Strings====
  
−
To avoid having to hardcode URLs (and possibly other data) into your template, EPrints provides a useful mechanism for including configuration strings. This means that when the URLs change, you do not have to change the template.
+
There are also a number of epc:print elements in the default template which are useful for including configuration values in the template.
  
−
Example:
+
'''Example
  
−
<a href="{$config{frontpage}}"><img alt="Logo" src="{$config{site_logo}}" /></a>
+
<style type="text/css" media="screen">@import url(<epc:print expr="$config{base_url}"/>/style/auto.css);</style>
  
−
This is the site logo (see above) wrapped in a link to the front page of the repository.
+
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).
  
−
To include a config string outside of an attribute, need to use epc:print :
+
Configuration values can also be used inside attributes, using the {...} syntax.
  
−
<style type="text/css" media="screen">@import url(<epc:print expr="$config{base_url}"/>/style/auto.css);</style>
+
'''Example
  
−
This is from the head section of the default template, and loads the auto.css stylesheet (see below).
+
<a href="{$config{frontpage}}"><img alt="Logo" src="{$config{site_logo}}" /></a>
  
−
Adding more images
+
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
  
 
Put the images in /opt/eprints3/archives/devel/cfg/static/images/
 
Put the images in /opt/eprints3/archives/devel/cfg/static/images/

Revision as of 16:24, 15 January 2007

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 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 the template combines with page-specific content to build each individual page.

Example 

 <epc:pin ref="toolbar" />

<epc:pin ref="title"/>

   <epc:pin ref="page"/>

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

Put the images in /opt/eprints3/archives/devel/cfg/static/images/

Then run generate_static

Can then be referred to from the site template eg. 

<img src="/images/footer.png" />

Working with stylesheets

style-related images

Dynamic templates

Add date_time pin.

Guidelines for a major template overhaul

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

Retrieved from ‘https://wiki.eprints.org/w/index.php?title=Branding_with_confidence&oldid=3654’