Website Colours

Colourization of the pager display on your project's website is facilitated by a simple configuration file and a special rebuild option. This page describes how to set and change those colours.

General principles | Colour definitions | Colour bindings | Colour defaults

General principles

The colours of your project website are given in the file 00lib/p3colours.txt, which you can open and edit with Emacs. First, choose your colour palate with the colour definitions options. Then decide which colours to associate with each element of your portal and/or corpus with the colour bindings options.

Here is a sample p3colours.txt file:

colour-def-dark   	#333366
colour-def-mid   	#777b9d
colour-def-light   	#ffcc00
colour-def-very-light  	#fefefe
colour-def-bright 	#33627d
colour-def-pale  	#ffcc00
colour-def-gray	#3c3c3c

colour-bind-dark	banner-bg 
colour-bind-mid 	border bborder
colour-bind-light	banner-fg heading-bg
colour-bind-very-light  
colour-bind-bright 	hover-bg
colour-bind-pale	hover-fg
colour-bind-gray    heading-fg href-fg

The colours of some elements are set to defaults. These are listed at the end of this page.

You can update the colours any time you change the colour configuration simply by saying:

oracc colours

Then you need to reload the page you are viewing in your browser.

Colour definitions

Each project may use a palate of up to seven different colours. You do not need to use all seven but you will find it helpful to use at least four, or your website will be difficult for visitors to use.

As you can see from the sample file above, each colour definition is entered on a single line. The first part specifies the type of colour -  dark, mid, light, very light, bright, pale and grey - in the format, e.g., colour-def-very-light. Then there is white space followed by a hashmark and three or six digits, the HTML/CSS notation for colours.

In this scheme, #fff (or #ffffff) is white; #000 (or #000000) is black. There are several colourr maps and wheels on the web, of which one of the nicer examples is Jemima Pereira's [http://ficml.org/jemimap/style/color/wheel.html] which is also locally cached on the Oracc server [/doc/downloads/jemimap/wheel.html].

Colour bindings

Once you have chosen the colour palette, you then need to decide which elements of your website will use each colour. Again, there are up to seven lines, one for each colour. But instead of the hexadecimal colour codes, you specify the element(s) to be coloured. These are listed below.

Colour specification for regions is always done in pairs, with both text/foreground (-fg) and background (-bg) elements being required. Border colours are given as singletons.

Region colours

logo-fg logo-bg
Colours for the logo patch in the top left corner of the pager display.
banner-fg banner-bg
Colours for the banner across the top of the pager display. Defaults to the same as the logo colours.
banner-borders
Colour for the banner borders.
other-borders
Colour for all borders except the banner.
alt-fg alt-bg
Alternative colours which are used for example in the headings the pager uses for text titles and for the outline-based headings that come between lists of paged items and references.
h3-fg h3-bg
Colours for HTML H3 headings; presently only used in the metadata panel of a text display.

Link Colours

Links may involve six colour specifications because they have foreground and background for unvisited, visited and hover states. Each link set name described below thus expands to six options, formed on the pattern NAME-STATE-FGBG. The name logo implies the existence of logo-unvisited-bg logo-unvisited-fg logo-visited-bg logo-visited-fg logo-hover-bg logo-hover-fg.

logo
Links in the logo.
banner
Links in the banner.
alt
Links when the background is the alternative colour.
lemm
Links from lemmatized words in texts.
score
Links from the numbers in a composite text to the score blocks.

Colour defaults

There are some elements that are coloured consistently across Oracc. You cannot change them within a project. The most important of theses are as follows:

page: #ffffff
Page backgrounds are always white.
text: #000000
Main text is always black.
PGP and Techterms links: #333333
In portal pages, lines surrounding links to entries in People, Gods and Places and Technical Terms lists are always light grey.
28 May 2015 osc at oracc dot org

Eleanor Robson & Steve Tinney

Eleanor Robson & Steve Tinney, 'Website Colours', Oracc: The Open Richly Annotated Cuneiform Corpus, Oracc, 2015 [http://oracc.museum.upenn.edu/doc/help/managingprojects/configuration/webcolours/]

 
Back to top ^^
 

Released under a Creative Commons Attribution Share-Alike license 3.0, 2014. [http://www.facebook.com/opencuneiform] [http://oracc.blogspot.com] [http://www.twitter.com/oracctivity]
Oracc uses cookies only to collect Google Analytics data. Read more here; see the stats here [http://www.seethestats.com/site/oracc.museum.upenn.edu]; opt out here.

http://oracc.museum.upenn.edu/doc/help/managingprojects/configuration/webcolours/