Difference between revisions of "Branding with confidence"

From EPrints Documentation
Jump to: navigation, search
(Adding institutional stylesheets)
 
(18 intermediate revisions by 4 users not shown)
Line 1: Line 1:
 +
[[Category:Branding]]
 +
 
One of the most common EPrints customisations is to add your own institution's branding and "look and feel" to the interface - this may include logos, page layouts, stylesheets and colour schemes.
 
One of the most common EPrints customisations is to add your own institution's branding and "look and feel" to the interface - this may include logos, page layouts, stylesheets and colour schemes.
  
Line 13: Line 15:
 
The simplest approach is to overwrite the default EPrints logo with a copy of your own logo. Copy your logo to:  
 
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
+
  archives/ARCHIVEID/cfg/static/images/sitelogo.png
 
+
Reload the EPrints configuration by typing:
+
 
+
bin/epadmin reload ARCHIVEID
+
  
Your logo should now be displayed in place of the default EPrints logo.
+
And refresh the page. Your logo should now be displayed in place of the default EPrints logo.
  
 
'''Example 2
 
'''Example 2
Line 27: Line 25:
 
Open the branding configuration file in a text editor:
 
Open the branding configuration file in a text editor:
  
  /opt/eprints3/archives/ARCHIVEID/cfg/cfg.d/branding.pl
+
  archives/ARCHIVEID/cfg/cfg.d/branding.pl
  
 
Find the site_logo configuration setting:
 
Find the site_logo configuration setting:
  
$c->{site_logo} = "/images/sitelogo.gif";
+
<source lang="perl">
 +
$c->{site_logo} = "/images/sitelogo.png";
 +
</source>
  
 
Change the setting to point to your own logo image:
 
Change the setting to point to your own logo image:
  
<pre>
+
<source lang="perl">
$c->{site_logo} = "<nowiki>http://www.soton.ac.uk/img/furniture/royal/corp_logo.gif</nowiki>";
+
$c->{site_logo} = "http://www.soton.ac.uk/img/furniture/royal/corp_logo.gif";
</pre>
+
</source>
  
 
Reload the EPrints configuration by typing:
 
Reload the EPrints configuration by typing:
Line 47: Line 47:
 
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.
 
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/mylogo.gif";
+
<source lang="perl">
 +
$c->{site_logo} = "/images/mylogo.gif";
 +
</source>
  
 
Reload the EPrints configuration by typing:
 
Reload the EPrints configuration by typing:
  
 
  bin/epadmin reload ARCHIVEID
 
  bin/epadmin reload ARCHIVEID
 
This time, an extra step is needed to process the new logo file:
 
 
bin/generate_static ARCHIVEID
 
  
 
===Changing the theme===
 
===Changing the theme===
Line 61: Line 59:
 
Open the branding configuration file in a text editor:
 
Open the branding configuration file in a text editor:
  
  /opt/eprints3/archives/ARCHIVEID/cfg/cfg.d/branding.pl
+
  archives/ARCHIVEID/cfg/cfg.d/branding.pl
  
 
Find the theme configuration setting:
 
Find the theme configuration setting:
  
# $c->{theme} = "green";
+
<source lang="perl">
 +
# $c->{theme} = "green";
 +
</source>
  
 
Change the setting to use the chosen theme.
 
Change the setting to use the chosen theme.
  
$c->{theme} = "green";
+
<source lang="perl">
 +
$c->{theme} = "green";
 +
</source>
  
 
''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.
Line 79: Line 81:
 
===Changing the page layout===
 
===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.
+
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.
 +
 
 +
Copy the default layout to your repository:
 +
 
 +
cp lib/templates/default.xml archives/ARCHIVEID/cfg/templates/default.xml
  
 
Open the template file for your repository:
 
Open the template file for your repository:
  
  /opt/eprints3/archives/ARCHIVEID/cfg/lang/en/templates/default.xml
+
  archives/ARCHIVEID/cfg/templates/default.xml
  
The template is an XHTML file with some additional syntax (see [[Template Format]]).
+
The template is an XHTML file with some additional syntax (see [[API:EPrints/Apache/Template]]).
  
 
====Pins====
 
====Pins====
Line 93: Line 99:
 
'''Example
 
'''Example
  
<pre>
+
<source lang="xml">
<div align="center">
+
    <div>
  <epc:pin ref="toolbar" />
+
      <div class="ep_tm_page_content">
  <table width="720" class="ep_tm_main"><tr><td align="left">
+
        <h1 class="ep_tm_pagetitle">
    <h1 class="ep_tm_pagetitle"><epc:pin ref="title"/></h1>
+
          <epc:pin ref="title"/>
    <epc:pin ref="page"/>
+
        </h1>
  </td></tr></table>
+
        <epc:pin ref="page"/>
</div>
+
      </div>
</pre>
+
    </div>
 +
</source>
  
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.
+
This part of the template lays out the main content area of the page (the ''page'' pin) which is centered on the page.
  
 
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).
 
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).
Line 113: Line 120:
 
'''Example
 
'''Example
  
<style type="text/css" media="screen">@import url(<epc:print expr="$config{base_url}"/>/style/auto.css);</style>
+
<source lang="html4strict">
 +
<style type="text/css" media="screen">@import url(<epc:print expr="$config{base_url}"/>/style/auto.css);</style>
 +
</source>
  
 
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).
 
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).
Line 121: Line 130:
 
'''Example
 
'''Example
  
<a href="{$config{frontpage}}"><img alt="Logo" src="{$config{site_logo}}" /></a>
+
<source lang="html4strict">
 +
<a href="{$config{frontpage}}"><img alt="Logo" src="{$config{site_logo}}" /></a>
 +
</source>
  
 
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.
 
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.
Line 127: Line 138:
 
====Template checklist====
 
====Template checklist====
  
Your new layout should include:
+
A typical repository page layout will include:
  
 
# the correct XML declaration at the top of the file
 
# the correct XML declaration at the top of the file
# a head section (load default and custom stylesheets)
+
# a head section (load default and custom stylesheets, ''title'' and ''head'' pins)
# a body section. containing:
+
# a body section, containing:
## a header (eg. repository title and logo)
+
## ''pagetop'' pin
## a navigation menu (links to browse, search etc.)
+
## header (repository title and logo)
## a quick search box
+
## navigation menu (links to browse, search etc.)
## a main content area (''page'' pin)
+
## quick search box
## a footer (eg. copyright notice)
+
## toolbar (''login_status'' and ''toolbar'' pins)
 +
## main content area (''title'' and ''page'' pins)
 +
## footer (copyright notice etc.)
 +
 
 +
====Loading the new template====
  
 
Load your new template by running:
 
Load your new template by running:
Line 142: Line 157:
 
  bin/epadmin reload ARCHIVEID
 
  bin/epadmin reload ARCHIVEID
  
===Adding extra images===
+
====Dealing with template errors====
  
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:
+
A common cause of errors when loading a new template is that the template is not ''well formed''. The template is in XHTML syntax, and therefore must follow the rules for writing well-formed XML documents:
  
/opt/eprints3/archives/ARCHIVEID/cfg/static/images/
+
* http://en.wikipedia.org/wiki/XML#Well-formed_documents
  
Process the images by running:
+
'''Example
  
  bin/generate_static ARCHIVEID
+
You get the following error when reloading the template:
 +
 
 +
  parser error : Opening and ending tag mismatch: img line 25 and div
 +
 
 +
Open the template file, and look for an img tag on line 25:
 +
 
 +
<img src="/images/mylogo.gif">
 +
 
 +
The problem is that the img tag is opened, but there is no closing img tag. The img element is empty, so we can add a self-closing tag to make the eleemtn well formed:
 +
 
 +
<img src="/images/mylogo.gif" />
 +
 
 +
'''Example
 +
 
 +
parser error : Opening and ending tag mismatch: p line 60 and body
 +
 
 +
Open the template file and look for the p tag on line 60:
 +
 
 +
<pre>
 +
<p>This repository is maintained by the <b>Library and Computing team</b>.
 +
</pre>
 +
 
 +
There is no closing p tag. The p element is not empty, so we add a closing p tag at the end of the paragraph to make the element well formed:
 +
 
 +
<pre>
 +
<p>This repository is maintained by the <b>Library and Computing team</b>.</p>
 +
</pre>
 +
 
 +
===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:
  
The image can then be used in the template.
+
archives/ARCHIVEID/cfg/static/images/
  
 
'''Example
 
'''Example
Line 158: Line 203:
 
Place a copy of small_logo.gif in:
 
Place a copy of small_logo.gif in:
  
  /opt/eprints3/archives/ARCHIVEID/cfg/static/images/
+
  archives/ARCHIVEID/cfg/static/images/
  
 
Use the image in the template:
 
Use the image in the template:
  
<img src="/images/small_logo.gif" />
+
<source lang="html4strict">
 +
<img src="{$config{base_url}}/images/small_logo.gif" />
 +
</source>
  
 
===Working with stylesheets===
 
===Working with stylesheets===
Line 170: Line 217:
 
The default stylesheets can be found here:
 
The default stylesheets can be found here:
  
  /opt/eprints3/lib/static/style/auto/
+
  lib/static/style/auto/
  
 
====Overriding default style rules====
 
====Overriding default style rules====
Line 176: Line 223:
 
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:
 
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
+
  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.
 
Remember that the stylesheets are applied in alphabetical order, so this file will be applied last.
Line 182: Line 229:
 
'''Example
 
'''Example
  
 +
<source lang="css">
 
  h1 {
 
  h1 {
 
         margin: 0px 0px 10px 0px;
 
         margin: 0px 0px 10px 0px;
Line 188: Line 236:
 
         color: #606060;
 
         color: #606060;
 
  }
 
  }
 +
</source>
  
 
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).
 
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).
Line 193: Line 242:
 
Edit the local overrides file for your repository:
 
Edit the local overrides file for your repository:
  
  /opt/eprints3/archives/ARCHIVEID/cfg/static/style/auto/zzz_local.css
+
  archives/ARCHIVEID/cfg/static/style/auto/zzz_local.css
  
 
Override the ''font'' part of the h1 style:
 
Override the ''font'' part of the h1 style:
  
 +
<source lang="css">
 
  h1 {
 
  h1 {
 
         font: bold 200% Arial,Sans-serif;
 
         font: bold 200% Arial,Sans-serif;
 
  }
 
  }
 
+
</source>
Apply the new style rules by running:
+
 
+
bin/generate_static ARCHIVEID
+
  
 
This renders the page title on each page in a larger font.
 
This renders the page title on each page in a larger font.
Line 215: Line 262:
 
Make a copy of the default stylesheet general.css:
 
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/
+
  cp lib/static/style/auto/general.css archives/ARCHIVEID/cfg/static/style/auto/
  
 
Edit the repository copy:
 
Edit the repository copy:
  
  /opt/eprints3/archives/ARCHIVEID/cfg/static/style/auto/general.css
+
  archives/ARCHIVEID/cfg/static/style/auto/general.css
  
 
After making changes to the repository copy of general.css, apply the new stylesheet by running:
 
After making changes to the repository copy of general.css, apply the new stylesheet by running:
Line 231: Line 278:
 
Copy the institutional stylesheets into your repository stylesheet directory:
 
Copy the institutional stylesheets into your repository stylesheet directory:
  
  /opt/eprints3/archives/ARCHIVEID/cfg/static/style/
+
  archives/ARCHIVEID/cfg/static/style/
  
 
Process the stylesheets by running:
 
Process the stylesheets by running:
Line 241: Line 288:
 
'''Example
 
'''Example
  
 +
<source lang="html4strict">
 
  <head>
 
  <head>
 
   ...
 
   ...
 
   <style type="text/css" media="screen">@import url(<epc:print expr="$config{base_url}"/>/style/auto.css);</style>
 
   <style type="text/css" media="screen">@import url(<epc:print expr="$config{base_url}"/>/style/auto.css);</style>
 
   <style type="text/css" media="screen">@import url(<epc:print expr="$config{base_url}"/>/style/my_inst.css);</style>
 
   <style type="text/css" media="screen">@import url(<epc:print expr="$config{base_url}"/>/style/my_inst.css);</style>
 +
</source>
  
 
Here we add a stylesheet link to our institutional stylesheet my_inst.css to the head section of the template. Note that we apply my_inst.css ''after'' the repository stylesheets (applied in order by auto.css) so that the institutional style rules override the repository style rules.
 
Here we add a stylesheet link to our institutional stylesheet my_inst.css to the head section of the template. Note that we apply my_inst.css ''after'' the repository stylesheets (applied in order by auto.css) so that the institutional style rules override the repository style rules.
Line 252: Line 301:
 
If your new stylesheet requires additional images (eg. background images for tables or divs), you need to place a copy of each image in your repository style/image directory:
 
If your new stylesheet requires additional images (eg. background images for tables or divs), you need to place a copy of each image in your repository style/image directory:
  
  /opt/eprints3/archives/ARCHIVEID/cfg/static/style/images/
+
  archives/ARCHIVEID/cfg/static/style/images/
  
 
Note that this keeps the style-related images separate from other images used by your repository pages, such as logos.
 
Note that this keeps the style-related images separate from other images used by your repository pages, such as logos.
 
Process the images by running:
 
 
bin/generate_static ARCHIVEID
 
  
 
The images can then be used in your stylesheet.
 
The images can then be used in your stylesheet.
Line 264: Line 309:
 
===Adding dynamic content===
 
===Adding dynamic content===
  
You can add dynamic content to the template by adding extra epc:pin elements. By default EPrints uses this technique to display the login status on the menu bar (note the ''login_status'' pin in the repository template).
+
You can add dynamic content to the template by adding extra epc:pin elements.
  
Open the repository template file:
+
Dynamic pins can be created in the dynamic template configuration file:
  
  /opt/eprints3/archives/ARCHIVEID/lang/en/templates/default.xml
+
  archives/ARCHIVEID/cfg/cfg.d/dynamic_template.pl
  
Locate the login_status pin:
+
'''Example
  
  <table class="ep_tm_searchbar" border="0" cellpadding="0" cellspacing="0" width="100%">
+
Open the template file for your repository:
    <tr>
+
      <td align="left"><epc:pin ref="login_status"/></td>
+
  
The content of this pin is dynamically generated according to the current user's login status.
+
archives/ARCHIVEID/cfg/lang/en/templates/default.xml
  
This pin is defined in the dynamic template configuration file:
+
Add a new pin called ''todays_date'' to the template; here we add the pin next to the user's login status:
  
/opt/eprints3/archives/ARCHIVEID/cfg/cfg.d/dynamic_template.pl
+
<source lang="html4strict">
 +
    <div>
 +
      <div class="ep_tm_page_content">
 +
        <h1 class="ep_tm_pagetitle">
 +
          <epc:pin ref="title"/>
 +
        </h1>
 +
        <epc:pin ref="page"/>
 +
        <epc:pin ref="todays_date"/>
 +
      </div>
 +
    </div>
 +
</source>
  
Open the
+
Open the dynamic template configuration file for your repository:
  
archives/devel/cfg/cfg.d/dynamic_template.pl
+
archives/ARCHIVEID/cfg/cfg.d/dynamic_template.pl
  
 +
Find and uncomment the function that creates the content for the dynamic pins:
  
 +
<source lang="perl">
 +
$c->{dynamic_template}->{function} = sub {
 +
    my( $repository, $parts ) = @_;
 +
};
 +
</source>
  
Add date_time pin.
+
Add a line which creates the content for the ''todays_date'' pin:
 +
 
 +
<source lang="perl">
 +
$c->{dynamic_template}->{function} = sub {
 +
my( $repository, $parts ) = @_;
 +
$parts->{todays_date} = $repository->make_text( scalar localtime );
 +
};
 +
</source>
 +
 
 +
Reload the dynamic template configuration:
 +
 
 +
bin/epadmin reload ARCHIVEID
  
===Branding checklist===
+
The date should now be displayed on your repository pages.
  
1 Design site layout, with logos etc. eg. take a candidate page from an existing site
+
== See also ==
Make XHTML - tidy might help
+
* [[Branding, the next level]]
2 Replace content with appropriate epc:pin elements
+
3 Add images and stylesheets to static dir
+

Latest revision as of 16:21, 27 February 2012


One of the most common EPrints customisations is to add your own institution's branding and "look and 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:

archives/ARCHIVEID/cfg/static/images/sitelogo.png

And refresh the page. 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 to the logo image on your institution's Web page.

Open the branding configuration file in a text editor:

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

Find the site_logo configuration setting:

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

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/mylogo.gif";

Reload the EPrints configuration by typing:

bin/epadmin reload ARCHIVEID

Changing the theme

Open the branding configuration file in a text editor:

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.

Copy the default layout to your repository:

cp lib/templates/default.xml archives/ARCHIVEID/cfg/templates/default.xml

Open the template file for your repository:

archives/ARCHIVEID/cfg/templates/default.xml

The template is an XHTML file with some additional syntax (see API:EPrints/Apache/Template).

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>
      <div class="ep_tm_page_content">
        <h1 class="ep_tm_pagetitle">
          <epc:pin ref="title"/>
        </h1>
        <epc:pin ref="page"/>
      </div>
    </div>

This part of the template lays out the main content area of the page (the page pin) which is centered on the page.

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

A typical repository page layout will include:

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

Loading the new template

Load your new template by running:

bin/epadmin reload ARCHIVEID

Dealing with template errors

A common cause of errors when loading a new template is that the template is not well formed. The template is in XHTML syntax, and therefore must follow the rules for writing well-formed XML documents:

Example

You get the following error when reloading the template:

parser error : Opening and ending tag mismatch: img line 25 and div

Open the template file, and look for an img tag on line 25:

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

The problem is that the img tag is opened, but there is no closing img tag. The img element is empty, so we can add a self-closing tag to make the eleemtn well formed:

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

Example

parser error : Opening and ending tag mismatch: p line 60 and body

Open the template file and look for the p tag on line 60:

 <p>This repository is maintained by the <b>Library and Computing team</b>.

There is no closing p tag. The p element is not empty, so we add a closing p tag at the end of the paragraph to make the element well formed:

 <p>This repository is maintained by the <b>Library and Computing team</b>.</p>

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:

archives/ARCHIVEID/cfg/static/images/

Example

Place a copy of small_logo.gif in:

archives/ARCHIVEID/cfg/static/images/

Use the image in the template:

<img src="{$config{base_url}}/images/small_logo.gif" />

Working with stylesheets

EPrints has 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:

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:

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:

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

Override the font part of the h1 style:

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

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 and edit it there.

Example

Make a copy of the default stylesheet general.css:

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

Edit the repository copy:

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 institutional stylesheets

Your institutional Web site may already have a stylesheet or set of stylesheets that you want to apply to your repository.

Copy the institutional stylesheets into your repository stylesheet directory:

archives/ARCHIVEID/cfg/static/style/

Process the stylesheets by running:

bin/generate_static ARCHIVEID

The stylesheets are then available to use in the template file.

Example

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

Here we add a stylesheet link to our institutional stylesheet my_inst.css to the head section of the template. Note that we apply my_inst.css after the repository stylesheets (applied in order by auto.css) so that the institutional style rules override the repository style rules.

Adding extra style-related images

If your new stylesheet requires additional images (eg. background images for tables or divs), you need to place a copy of each image in your repository style/image directory:

archives/ARCHIVEID/cfg/static/style/images/

Note that this keeps the style-related images separate from other images used by your repository pages, such as logos.

The images can then be used in your stylesheet.

Adding dynamic content

You can add dynamic content to the template by adding extra epc:pin elements.

Dynamic pins can be created in the dynamic template configuration file:

archives/ARCHIVEID/cfg/cfg.d/dynamic_template.pl

Example

Open the template file for your repository:

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

Add a new pin called todays_date to the template; here we add the pin next to the user's login status:

    <div>
      <div class="ep_tm_page_content">
        <h1 class="ep_tm_pagetitle">
          <epc:pin ref="title"/>
        </h1>
        <epc:pin ref="page"/>
        <epc:pin ref="todays_date"/>
      </div>
    </div>

Open the dynamic template configuration file for your repository:

archives/ARCHIVEID/cfg/cfg.d/dynamic_template.pl

Find and uncomment the function that creates the content for the dynamic pins:

 $c->{dynamic_template}->{function} = sub {
    my( $repository, $parts ) = @_;
 };

Add a line which creates the content for the todays_date pin:

$c->{dynamic_template}->{function} = sub {
 my( $repository, $parts ) = @_;
 $parts->{todays_date} = $repository->make_text( scalar localtime );
};

Reload the dynamic template configuration:

bin/epadmin reload ARCHIVEID

The date should now be displayed on your repository pages.

See also