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>
Coloured box class box:
<div class="box">
Content.
</div>
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.