Zones are areas of the site that are identified by a particular colour. Pasteup implements the following zone colours:
| Name | CSS class value | Colour hex value | Colour |
|---|---|---|---|
| news | zone-news | #D61D00 | red |
| sport | zone-sport | #008000 | green |
| comment | zone-commentisfree, | #0061A6 | blue |
| culture | zone-culture | #D1008B | pink |
| business | zone-business | #3246AB | navy blue |
| money | zone-money | #8F1AB6 | purple |
| lifestyle | zone-lifeandstyle, | #AD532F | yellow |
| travel | zone-travel | #066EC9 | light blue |
| environment | zone-environment | #4A7801 | eco green |
These can be used by applying the class value shown above 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.
<body class="zone-culture">
Change the text colour of the text in any element to the appropriate zone colour, by adding a class value of zone-color.
<div class="zone-news">
<p class="zone-color">
</div>
News text colour
<div class="zone-environment">
<p class="zone-color">
</div>
Environment text colour
<div class="zone-culture">
<p class="zone-color">
</div>
Culture text colour
Show a border on the top of any element by adding a class value of zone-border. This will add a 1px border of the appropriate zone colour, or if no zone is defined it will show the default blue (#0061A6) as seen on this page.
This can be extended by adding some additional class values:
zone-border-medium - will increase the border width to 3px.zone-border-large - will increase the border width to 10px.<p class="zone-border">
Normal zone border
<p class="zone-border zone-border-medium">
Medium zone border
<p class="zone-border zone-border-large">
Large zone border
Change the background colour of any element to the appropriate zone colour, by adding a class value of zone-background.
<div class="zone-news">
<p class="zone-background">
</div>
News zone background
<div class="zone-environment">
<p class="zone-background">
</div>
Element zone background
<div class="zone-culture">
<p class="zone-background">
</div>
Culture zone background