This is a very basic guide on how to change the fundamental colour scheme in HAP+ using CSS. This is far from comprehensive and only changes a few of the colours, but if you were wondering how it might get you started :) It will perhaps be useful to no-one else but me.. :)

What you will need:

1. A logo for the Left-hand block. (i made mine 350 pixels wide - but i havent tested the impact of this in mobile view etc. Any bigger and it was only showing partially)
2. A Primary bold colour for the website (in hex)
3. A Secondary lighter version of the colour above (i used PaletteBuilder -- Online color scheme picker using the color wheel entered the above bold colour and chose the next lighter in the Monochromatic table.

In my example, i will be using the colours from my school website:

Some other examples are:
█████ 004577 / █████ 3286C1 - Default HAP Colours
█████ 06513A / █████ 09805C - My Colour Scheme
█████ 802109 / █████ AF2D0C - Nice Red Scheme
█████ 7F5B07 / █████ AF7E0A - Mustardy Yellow/Brown Scheme


-----------------------------------------------------------------------------

First, edit the "basestyle.css" file in "~\styles\"

To change the left-hand Blue panel, the HAP logo and the HAP title text colour:
On Line 7 change the "background:" colour to be your "Primary Bold colour":
On Line 51, change the image URL to your custom one:
On Line 65, Change the "Color" to be your Secondary Lighter Colour (or your bold one, whichever suits better):
To change the top menu and the top right username panel:
On line 149 change the "background-color" to be your SECONDARY colour:
On line 150 change the "background-color" to be your PRIMARY colour:
On line 152 change the "background-color" to be your SECONDARY colour:
On Line 155 change both entries to your PRIMARY colour choice:
On Line 156 change "background-color" to your SECONDARY colour:
On Line 157 change the "background-color" to your PRIMARY colour:
#hapUserTitle:active { background-color: #06513A; }

Next, to unify the calendar colouring in the booking system, edit the "Bookingstyle.css" also in the ~\style\ folder:

On line 21 change the "background" colour to your PRIMARY colour:
On line 22 change the "background-color" colour to your SECONDARY colour:
On line 23 change the "background-color" colour to your PRIMARY colour:
On line 45 change the "background" colour to your PRIMARY colour:
On line 47 change the "background" colour to your SECONDARY colour:
-----------------------------------------------------------------------------

That will give you a fairly good interface change covering the menu's and the main pages. Lot's of other stuff can still be changed, but i'll leave you to worry about that. Remember, every time a big upgrade happens which effects this CSS file, you will need to re-apply these changes (if you keep your changes in-line with this post, then at least there is a record).