Rebranding
The rebranding of the HSE Website is complete. The remaining unbranded pages will not have the brand applied, usually because they are campaign pages.
Styleguide updates
To request updates
- First read the process checklist.
- Then use the request changes database to add suggestions, and please use the system to notify members of requests for change.
As a rule changes will be processed as a batch, rather than on a " as and when basis". An exception to this is where bug fixes have been identified that have no adverse effects.
History
- Version & release date
- Notes
- v2.4.10 - 8 Oct'08
- .boxsilver - light grey border
Use this to add a neutral, light coloured border
- .hidebg - for alternate CSS, hides background images
If you use CSS to add a background image to a block level element, you MUST also add this class. This keeps the style accessible in the yellow-on-black etc CSS
- .highlight - added height:1%, more robust in IE6
Bug fix
- .headlineinverted - top and bottom margin uniformed
Layout tweak
- v2.4.9 - 30 Jul'08
- Search box in banner made accessible by default to non javascript users [template and js changes]
- link to what's new now points to news.hse.gov.uk
- version number added to html - just after <head> tag
- .gradient style as first used on aboutus/index.htm made available accross different colour schemes
- minor changes to hseColumnLeft, hseColumnRight and .news styles
- font size in tables reduced for ie5 and ie5.5
- v2.4.8 - 8 Apr'08
- Horizontal rules made darker.
- Icons for expand and collapse changed.
- Icons for nested list items changed.
- Text in nested lists smaller and indented.
- Provision made for "Get newsfeed" in subnav.
- Search HSE website truncated to Search.
- Link to feedback (hse.gov.uk/feedback.htm) now to https.
- Template more flexible - can incorporate dual branding (see hse.gov.uk/section18/ for example).
- Use compression on JS files.
- Opera print view bug fix.
- Fewer CSS warnings.
- v2.4.7 - 19 Nov'07
- javascript for open in new window expanded to cover: pdf, doc, rtf, ppt and xls
- also includes browser chrome
- print firendly links in footer included (intranet only)
- link to xml provider made relative (intranet only)
- text in search box reduced to just "search" (intranet only)
- v2.4.6 - 3 Aug'07
- Minor tweaks
- v2.4.5 - 3 Aug'07
- Headings in banner demoted to <p><strong>
- Links given an active and focus state for tabbing through.
- DirectGov had rel="nofollow" added.
- Gutter added below footer for javascript snippets that need to run before onload event.
- v2.4.4 - 13 Jul'07
- Drop downs changed from Javascript to progressive javascript
- Now is a long list
- CSS styles and makes a small box
- JavaScript converts to a drop down
- v2.4.3 - 23 May'07
- CSS changes
- class "hide" altered to move content off screen in addition to what it does already
- height attribute removed from banner to make more accessible
- Definition lists have line-height added to make better viewing at text-size larger
- better support for superscript and subscript styles by specifying line-height in <p> and <li> elements
Template changes
- custome search feature added for IE7 and FF2
- eGMS.subject.category removed from template (deprecated eGMS tag)
- DirectGov link added to footer
Other
- DDM.JS will be rolled out, but styles and HTML changes will wait
- v2.4.2 - 8 Mar'07
- Minor bug fixes for boxes such as b1,b2,b3 and b4.
- Additional rules for alignment of images inside class="headlinehighlight" where you want the image inline. For example a pdf or word Icon.
- v2.4.1 - 5 Mar'07
- Minor fixes only:
- Centre coloumn widened to allow for IE bug with italicised text and line wrapping
- Padding reduced on bottom of headlinehighlight
- Search box in left column fixed to display on one line
- v2.4.0 - 28 Feb'07
-
- Order of code layout changed to optimise output for handhelds and increased SEO
code order now goes: banner, content, left navigation, right navigation, footer.
- Print output optimised to look more like CDS3 products, bigger headings, header images blanked out.
- A knock-on effect of this (and associated cross browser support) is that H1 on the homepage is now the same size as H1 elsewhere i.e. big.
- Due to the amount of optimisation gone into the class headlinehighlight, I would prefer that developers left it for headline highlighting, and look at options such as highlight or highlightBox for other areas of the page.
- Boxes like those used on the risk index page are now %age based rather than pixel based. Again the primary driver for this was print optimisation.
- class="hide" now hides the text rather than using display:none and is readable by Screen Readers.
- v2.3.1 - 4 Dec'06
- Minor bug fixes:
- Table sorting JS changed
- Padding on headlinhighlight on h2
- v2.3.0 - 17 Nov'06
- Change from XHTML Transitional to XHTML Strict.
- Change JavaScript browser sniffer to function detection.
- Many minor CSS changes which basically are a loosening-up of few styles,
allowing some others to develop.
- Deeper colour for keymessage in right column.
- v2.2.4 - 10 July'06
- Minor updates
- Image alignment in arrow lists
- New style to implement on images only class="textalign" use when adding PDF.gif
in a paragragh.
- v2.2.3 - 30 Jun'06
- Additional styles with feeds with div class="feed"
- v2.2.2 - 26 Jun'06
- Empty
- v2.2.1 - 26 Jun'06
- Minor changes:
- 1 column content area 98% /horizontal scroll fix
- Gaps in hse2column left and right 1% instead of 2% /print error fix
- Added td border colors in grid tables /minor style improvement
- Introduced white-space:no-wrap as a standalone tag and by default in ftoot td for *num* tables
/needs monitoring!
- v2.2.0 - 5 May'06
-
- Homepage boxes incorporated into main CSS, height is specified separately by inclusion of hlow (shallow) hmed (medium) and hhigh (tall).
- There are 4 types of homepage box (not exculsively for homepages)
.b1 - for right column
.b2 - 2 boxes side by side
.b3 - 3 boxes side by side, and
.b4 - 4 boxes side by side
All are designed to work on 2 and 3 column pages. The image is always inside an <h2&g this allows one link for both the image and the text.
- Tables - grid tables such as tablealphagrid and tablenumgrid have different styling.
- Print - print CSS aligned more to recent PDF output from CDS3, print banner made fatter, print view of dl.pretty improved, <li>s made outside the box.
- Footer - padding above footer provided (0.5em).
- P3P - link rel added to Template for machine readable privacy policy statement.
- Search box in LH navigation increased by approx 15 pixels.
- <ul class="cross"> developed for X lists (can also use this style inside another list type with <li class="cross">.
- v2.1.9 - 10 Nov'05
- Mando JavaScript with improved You Are Here feature
- Links and H3 made slightly darker
- Justification taken off text
- Added emphasis given to styles .left and .right
- Serifs removed from printed text
- Size of heading on printed text reduced
- size of text in one column pages in tables is reduced
- v2.1.8 - 10 Aug'05
- Select box in ddm expanded by 5 pixals.
- v 2.1.7 - 5 Aug'05
- Includes Intranet templates.
- v2.1.6 - 5 Aug'05
- Changed padding arond <strong> elements in the headlinehighlight region.
- Introduces: intranet2005.css; tbluegreen2005.css; tscotland2005.css.
- v2.1.5 - 1 Jul'05
- Empty
- v2.1.4 - 1 Jul'05
- Changed character set from ISO-88599-1 to UTF-8
- v2.1.3 - 30 Jun'05
- Added Excel spreadsheets to the exclude list for hseid YAH tagging.
- v2.1.2 - 29 Jun'05
- JavaScript changes
- Styleswitcher now uses default stylesheet if there are multiple alternative options but none is selected.
- Persistence code now uses cookies or updates all "appropriate" links on the page with querystring information.
- Appropriate links are defined by patterns in the array document.sitePatterns.
- Inappropriate link patterns (e.g. pdfs) are defined in document.siteExclusions.
- Sniffer now recognizes opera 8 and firefox
- v2.0.0
- Notes from earlier version not available
