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.
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.
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
siteparameter or default to the first array entry
- output some site specific CSS using the array values
There are 2 main issues:
- Missing image sprites
- 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:
- research centres
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)
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
Once the issues have been resolved, we just need to:
- Make sure everything is published in
- Find the homepages that currently use the old CSS (Check the
bath.scustomproperty using our property checker)
- Change the
bath.scustomproperty to use:
- Change the
bath.ie7properties to use:
- Remove any obsolete CSS files
- Publish changes to homepages
- Email the FWEs
- Delete the old folder at