Changing the appearance of your Ensembl website

Here at the Ensembl project, in addition to www.ensembl.org we run many different websites based on Ensembl code, including public sites such as pre!, Vega and the Ensembl archives, and private sites used for internal development. In order to distinguish these sites we use plugins to alter the colour scheme and/or site logo, in addition to the changes in content. For example, the Vega site is blue, pre! is turquoise, and the archives are lilac.

You may find it useful to do something similar with an Ensembl mirror, so that your users know they are looking at a local copy and not the actual Ensembl site.

In the examples below, we'll assume that you are adding these changes to the normal /public-plugins/mirror directory.

Important note: if you make any changes to .ini files, you need to remove /conf/config.packed before restarting the server, to ensure your changes are recompiled.

Changing the site logo

The Ensembl logo graphic can be found in /htdocs/i/ directory. First you should make a directory

/public-plugins/mirror/htdocs/i/

and copy your logo into it. Ideally your logo should be around 40 pixels high, so that it does not break the template layout.

You will then need to add the following lines to your /public-plugins/mirror/conf/ini-files/DEFAULTS.ini file, substituting the appropriate parameters:

[ENSEMBL_STYLE]
SITE_LOGO        = e-ensembl.gif
SITE_LOGO_ALT    = Ensembl Home
SITE_LOGO_WIDTH  = 150
SITE_LOGO_HEIGHT = 40
SITE_LOGO_HREF   = /

The SITE_LOGO_HREF parameter is only needed if your Ensembl mirror does not occupy the root of the host domain - omit this line to use the default link "/"

Changing the colour scheme

The colour scheme can be altered by adding the following to /public-plugins/mirror/conf/ini-files/DEFAULTS.ini (you can omit the [ENSEMBL_STYLE] header if you already have a custom logo defined, as above):

[ENSEMBL_STYLE]
# Main template colours

# General
PAGE_BG         = ffffff
PAGE_TEXT       = 555555
PAGE_HEADER     = 666666
PAGE_LINK       = 3366bb
PAGE_VISITED    = 000066
PAGE_HOVER      = cc0000

# Masthead
MH_BG           = 333366
MH_BORDER       = 336699
MH_TEXT         = ccddff
MH_LINK         = ffffff
MH_VISITED      = ffffff
MH_HOVER        = cc0000

# Extras
TINT_BG         = eaeeff ; used as 'tint' colour on spreadsheets [1]
TINT_BORDER     = bbccff
CONTRAST_TEXT   = 333333
CONTRAST_BG     = ffffdd ; used as 'tint' colour on spreadsheets [1]
CONTRAST_BORDER = ffee99 ; [2]
CONTRAST_HEADER = 993333

# These probably won't need customising on your site unless your
# colour scheme is very strange!

PANEL_BG        = ffffff ; normally same as PAGE_BG [1]
PANEL_BORDER    = cccccc ; [2]
PANEL_TEXT      = 555555 ; normally same as PAGE_TEXT

NEUTRAL_BG      = f0f0f0 ; used for spreadsheet table stripes [1]
NEUTRAL_BORDER  = cccccc ; [2]

REVERSE_TEXT    = ffffff ; normally white

ALERT_BG        = ffcccc ; [1]
ALERT_BORDER    = 993333 ; [2]
ALERT_TEXT      = 333333

# [1] needs to be pale enough for links to show
# [2] needs to be dark enough for REVERSE_TEXT to show

# Styles for auto-generated images

IMAGE_BG1       = ffffe7 ; default background color for image
IMAGE_BG2       = ffffcc ; color for alternating stripes..

HIGHLIGHT1      = e8ffcc ; Highlight colour (pale)
HIGHLIGHT2      = ccff99 ; Highlight colour (vivid)

CONTIGBLUE1     = 368ec9 ; Contig-colours (light)
CONTIGBLUE2     = 02599c ; Contig-colours (dark)

Simply alter the hex values to the colours you want. These placeholder values will be compiled into the Ensembl css files on server startup.

Note: we recommend not changing the font sizes, or you may have problems with your graphics!