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.