Editing Branding with confidence (section)

===Working with stylesheets===

EPrints has [[EPrints_Directory_Structure/eprints3/lib/static/style/auto|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

<source lang="css">
 h1 {
         margin: 0px 0px 10px 0px;
         font: bold 130% Arial,Sans-serif;
         text-align: center;
         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).

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:

<source lang="css">
 h1 {
         font: bold 200% Arial,Sans-serif;
 }
</source>

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

<source lang="html4strict">
 <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>
</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.

====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.