Zone CSS

Zone colours

Zones are areas of the site that are identified by a particular colour. Pasteup implements the following zone colours:

NameCSS class valueColour hex valueColour
newszone-news#D61D00red
sportzone-sport#008000green
commentzone-commentisfree, #0061A6blue
culturezone-culture#D1008Bpink
businesszone-business#3246ABnavy blue
moneyzone-money#8F1AB6purple
lifestylezone-lifeandstyle, #AD532Fyellow
travelzone-travel#066EC9light blue
environmentzone-environment#4A7801eco 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">

Zone text colour

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

News text colour

<div class="zone-news">
    <p class="zone-color">
</div>

News text colour

Environment text colour

<div class="zone-environment">
    <p class="zone-color">
</div>

Environment text colour

Culture text colour

<div class="zone-culture">
    <p class="zone-color">
</div>

Culture text colour

Zone borders

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:

Normal zone border

<p class="zone-border">

Normal zone border

Medium zone border

<p class="zone-border zone-border-medium">

Medium zone border

Large zone border

<p class="zone-border zone-border-large">

Large zone border

Zone background colour

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

News zone background

<div class="zone-news">
    <p class="zone-background">
</div>

News zone background

Environment zone background

<div class="zone-environment">
    <p class="zone-background">
</div>

Element zone background

Culture zone background

<div class="zone-culture">
    <p class="zone-background">
</div>

Culture zone background