[Bodington-developers] CSS and Colours in Bodington

[Matthew B. <mat...@ou...>]

Background
==========

Bodington allows the colours used in the site to be changed in the
resource properties page. This page is only accessible to the sysadmin.
There are two sets of colours document ones which are used for the
majority of the site and navigation page colours that are used for the
resource tree display (basically just menu.html). Some colours only
exist in one of these sets.

Resource Properties are set as metadata on the resource and most lookups
go through Resource.getProperty() which searches up through the resource
tree until it finds a match, it starts at the current resource.

The colours in the resource properties page will only be used if
"Generate Style Sheet" is set to something other than empty or false.
Although changing this option doesn't seem to force the stylesheet stuff
to get rebuilt so you probably won't see the changes without getting rid
of your session.

There are allot of possible colours to set so here goes at some
documentation of them.

Background Colour (D,N): The background color for the page.

Background Image (D,N): The background image to place on the page.

Foreground Colour (D,N): The colour of the text on the page.

Emphasis Colour (D,N): The colour of emphsised text on the page
(typically <em> and <strong> tags).

Link Colour (D,N): There are a whole host of link (unvisited, visited,
active, hover) options that specify how links should look.

Graphic Colours (D,N): These (foreground/background) colours allow you
to specify the colours that should be used for the navigation icons or
any icon process by processgif servlet. If these are left empty then the
colours #eeeeee and #111111 are used (hardcoded in
Facility.getTemplateGifColourMapper()).

Then there are some resource menu only colours:

Background Colour (N): The two background colours that are used for
resource menu items.

Header Background Colour (N): The resource menu has some headers and
this is the colour that is used to display them.

Border Colour (N): This is the colour of the border that surrounds the
resource menu items and the containing table.

There are also some unaccessible colours that are set in the Bodington
database but are not editable through the web interface:

Table Background Colour (D): This is used to set the background colour
for all the tables used in Bodington that specify the correct CSS class.

Table Background Emphasis Colour (D): This is used to emphasis some
cells of a table, typically the headers.

Extra Emphasis Colour (D): This is the colour used when we really need
to tell the user about something.

Questions
=========

First of all why do we have a different set of colours for the
navigation display?

With Bodington always displaying the resource tree in the context of
other pages (frames) having different colours set for the resource tree
compared to the rest of the site looks strange. What might make sense
would be to have containers displayed in a different set of colours to
the tools so that it was clearer to a user when he had reached a tool,
although I'm not convinced that this is worth it.

Should the the graphic colours not fallback to the standard foreground
and background colours?

If someone wants to quickly customize the colours of the site they might
expect to be able to just change the foreground and background colours
and have everything update. If the graphics followed these colours then
this would be possible but at the moment they just continue to use light
and dark grey.

Why is there table emphasis (<td class="blah">) instead of using the
table heading tag (<th>)?

Most tables should probably use the <th> to denote the emphasises cells
as this shows more clearly that these cells are the headings. There may
still be a call for emphasis in tables (eg the total of your bank
balance) but why not just use the standard emphasis?

Is it acceptable to use the Navigation Colours outside the navigation page?

In the UHI L&F colours such as the Header Background Colour are used for
things like the header in the creation page and management pages.

Should the Graphic Colour in the breadcrumb trail follows the graphic
colours  to which they pertain?

The breadcrumb trail in the top frame show the resource as these icons
represent resources higher up the tree wouldn't it make sense if they
followed the colours of the their own resources? This way it would be
easier to use colours to signify different parts of the tree.

I'll leave it there for now.

Notes
=====

The reason I am looking at this is that we are trying to merge the UHI
creation changes onto WebLearn and there are lots of colours fixed in
the style.css file which means that being able to change the colours no
longer works consistently. It also seems that at the moment more colours
are used that are available in the resource properties.

-- 
 -- Matthew Buckett, VLE Developer
 -- Learning Technologies Group, Oxford University Computing Services
 -- Tel: +44 (0)1865 283660 http://www.oucs.ox.ac.uk/ltg/