Default theme colours
Hex colours:
<span>text</span>
<a href="./url">links</a> (and nav menu mouseover underline – desktops):
Nav menu 'page on' underline and site name (desktops):
Coloured divs:
Coloured box class bg1:
<div class="bg1">
Content.
</div>
Coloured box class bg2:
<div class="bg2">
Content.
</div>
Coloured box class bg3:
<div class="bg3">
Content.
</div>
Coloured box class bg4:
<div class="bg4">
Content.
</div>
White box class bg5:
<div class="bg5">
Content.
</div>
Light grey box class box:
<div class="box">
Content.
</div>
Theme images
The following five 'system' images can't be viewed in /admin/images because they are required as part of the website theme:
bg-dots1.gif 20px wide x 20px high
bg_footer.gif 30px wide x 28px high
bg_footer_monochrome.gif 30px wide x 28px high
loader.gif 84px wide x 84px high
og.jpg 200px wide x 200px high
You might want to change og.jpg but make sure the image you replace it with remains at 200 pixels square.
Change navigation bar from dark to light
White navigation bar (desktops and laptops only):
@media screen and (min-width: 798px) {
nav {
color: #000;
text-transform: capitalize;
background: #fff;
border-bottom: 1px solid #ddd;
opacity: 0.9;
}
nav ul {
font-size: 0.9em;
}
nav li a,
nav strong {
color: #000;
}
nav li a:hover {
color: #ff0099;
}
p#sitename { /* Removes site name (optional) */
display: none;
}
}
Dark footer (desktops and laptops only)
footer {
border-top: 1px solid #333;
border-bottom: 2.4em solid #333;
color: #fff;
background: #333 url('../img/bg_footer_monochrome.gif') no-repeat;
background-position: center bottom;
/* x-value y-value blur spread color */
-webkit-box-shadow: 0 700px 0 700px #333;
-moz-box-shadow: 0 700px 0 700px #333;
box-shadow: 0 700px 0 700px #333;
}
footer a {
color: #fff;
}
footer p a:hover {
color: #fff;
border-bottom: 1px solid #ddd;
}
footer span {
color: #666;
}
Paste into extra.css and update styles.
Change dark colour of navigation bar
@media screen and (min-width: 798px) {
nav {
text-transform: uppercase;
background: #d44117; /* example dark colour */
opacity: 0.9;
}
}
@media screen and (max-width: 797px) {
p#sitename {
background: #d44117; /* example dark colour */
border-bottom: 1px solid #d44117; /* example dark colour */
opacity: 0.9;
}
}
Paste into extra.css and update styles.