@(metaData:Page, zoneList: Seq[ZoneColour])(implicit request: RequestHeader) @main(metaData, Switches.all){ }{

@metaData.webTitle

Zones are areas of the site that are identified by a particular colour. These can be used by applying the class value shown below to a containing element of the area of the page you want to styled as a particular zone. This is typically on the <body> element of the page, eg. <body class="zone-culture">

Zone colours

Change the text colour of the text in any element to the appropriate zone colour, by adding a class value of .zone-color.

  1. Output
  2. Source code

I'm an environmental paragraph

    <div class="zone-environment">
        <p class="zone-color">I'm an environmental paragraph</p>
    </div>
                        

Zone backgrounds

Change the background colour of any element to the appropriate zone colour, by adding a class value of .zone-background.

  1. Output
  2. Source code

I have a life and style background

<div class="zone-lifeandstyle">
    <p class="zone-background">I have a life and style background</p>
</div>
                    

Zone choices

Below are all of the current zone colours, plus their CSS aliases. Many sections and tags of the site are grouped into related zones (eg. Music, Art and Film are all part of the Culture zone). These zones aren't linked in any technical sense (no API representation etc) so we alias them together using CSS to group related sections.

@zoneList.map{ zone => }
Hue Zone name CSS selector(s) Hex code
@zone.zoneName @Html(zone.selectors.mkString(", ")) @zone.hexCode
}