Page tree
Skip to end of metadata
Go to start of metadata

Goal

We want to reduce the number of CSS files used by site homepages based on the Alienation homepage designs. We want to make it easier to create new homepages.

Background

The homepages delivered by Alienation use several CSS files per homepage including a site specific CSS file for each site. There are 21 site specific files. The site specific files override rules in the general CSS to change colours and image sprites. This means it is very time consuming to make changes across all the homepages.

We have also been creating homepages for new sites based on the Alienation homepages so the problem is getting worse.

We will also need to provide CSS for research homepages and some research centres are already using variants of the homepages.

Kelvin did the initial investigation on the project.

First pass solution

This solution has been implemented in the live CMS but no homepages are using it at the moment due to the issues listed below

There are 2 JSPs which output the homepage CSS and accept a parameter to determine the site specific values to output. One JSP is for faculty homepages, one for other sites.

http://www.bath.ac.uk/common/css/homepages/faculty.css?site=science
http://www.bath.ac.uk/common/css/homepages/style.css?site=education

The JSPs each:

  • define an array of properties for a given identifier (e.g. "mech-eng")
  • include the core CSS (e.g. core-dept.css)
  • look for a site parameter or default to the first array entry
  • output some site specific CSS using the array values

Issues

There are 2 main issues:

  1. Missing image sprites
  2. Missing colour palettes

Missing image sprites

Alienation delivered 4 image sprites (promo_cta_btm.gif, promo_cta_top.gif, promo_notice_bg.gif, promo_zig_zag.gif) for the hpPromo area with 17 different colours. These corresponded to the 17 academic departments (excluding the faculty level School of Management). The problem is that we are missing sprites for:

  • 2 departments whose colours have since changed (ace, mech-eng)
  • Faculties who are starting to use the hpPromo box (engineering, hss, science)
  • Any other sites (management, campus-investments, olympics, sport, research-centres)

It appears that we don't have the source images to create new sprites from either.

We could potentially solve this by:

  • creating new sprites from scratch
  • reimplementing with white image masks and background colours
  • reimplementing with CSS borders

Missing colour palettes

The new sites that are using the Alienation homepages do not have colour palettes defined:

Test pages

Some testing has been done with the Olympics homepage. It appears to be a hybrid of a faculty homepage and a department homepage with extra custom CSS which makes it difficult to test.

https://cms.bath.ac.uk/olympics/index-test-css.html - Missing hpPromo sprites, using custom CSS at the moment

All the academic department and faculty home pages have been tested in the test CMS. An example of the sprite issues is mech-eng:

https://cms.bath.ac.uk/mech-eng/index-test-css.html - Missing hpPromo sprites (original colour, live site)

Recommended actions

To go live with this solution

  • Fix the sprites
  • Define colour palettes for new homepages

To help others create new homepages

  • Document how to create a new homepage from scratch

To improve the maintainability

  • Merge faculty CSS into styles.css
  • Reduce the amount of CSS
  • Better modularise the elements, serve up smaller files depending on modules used

Go-live plan

Once the issues have been resolved, we just need to:

  1. Make sure everything is published in /common/css/homepages/
  2. Find the homepages that currently use the old CSS (Check the bath.scustom property using our property checker)
  3. Change the bath.scustom property to use:
    • /common/css/homepages/style.css?site=$siteName rather than /common/css/depthomepages/styles.css,/common/css/depthomepages/depts/$siteName.css
    • /common/css/homepages/faculty.css?site=$siteName rather than /common/css/depthomepages/styles.css,/common/css/depthomepages/faculty.css,/common/css/depthomepages/faculty/$siteName.css
  4. Change the bath.ie6 and bath.ie7 properties to use:
    • /common/css/homepages/ie6.css and /common/css/homepages/ie7.css
  5. Remove any obsolete CSS files
  6. Test
  7. Publish changes to homepages
  8. Email the FWEs
  9. Delete the old folder at /common/css/depthomepages/