Default theme colours
<span>HEX colours</span>
<span>text colour #649300</span>
<span class="red">text colour #3e4bd8</span>
<span class="blue">text colour #3399ff</span>
<span class="orange">text colour #e18d08</span>
<span class="grey">text colour #999999</span>
Default link color
<a href="./url">links</a> (and nav menu mouseover underline – 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 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_dark_footer.png 30px wide x 28px high
bg_light_footer.png 30px wide x 28px high
loader.gif 84px wide x 84px high
og.png 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.
Light footer (desktops and laptops)
@media screen and (min-width: 798px) {
footer {
border-top: 1px solid #ddd;
border-bottom: 2.4em solid var(--white);
color: var(--black);
background: var(--white) url('../img/bg_light_footer.png') no-repeat;
background-position: center bottom;
-webkit-box-shadow: 0 700px 0 700px var(--white);
-moz-box-shadow: 0 700px 0 700px var(--white);
box-shadow: 0 700px 0 700px var(--white);
}
footer a {
color: var(--black);
padding-bottom: 1px;
border-bottom: 1px solid #ddd;
}
footer p a:hover {
color: var(--link);
}
footer span {
color: #666;
}
}
Paste into extra.css and update styles.
Version 5.6 onwards adds an option in 'admin/setup' to select a light footer automatically.