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":

 .tile-color, #datepicker .ui-datepicker-header { background: [color="#FF0000"]#06513A[/color]; border-color: #0060a6; }

On Line 51, change the image URL to your custom one:

 #loginformside, #hapHomeSide { position: absolute; left: 0; width: 30%; top: 0; bottom: 0; background-image: url([color="#FF0000"]../images/icons/metro/hap-logo-128.png[/color]); background-repeat: no-repeat; background-position: center 30%; overflow: hidden; }

On Line 65, Change the "Color" to be your Secondary Lighter Colour (or your bold one, whichever suits better):

#loginform h1 a, #title h1 a { color: [color="#FF0000"]#09805C[/color]; text-decoration: none; }

 

To change the top menu and the top right username panel:

On line 149 change the "background-color" to be your SECONDARY colour:

#hapHeader a:hover { background-color: [color="#FF0000"]#09805C[/color]; }

On line 150 change the "background-color" to be your PRIMARY colour:

#hapHeader a:active { background-color: [color="#FF0000"]#06513A[/color]; }

On line 152 change the "background-color" to be your SECONDARY colour:

#hapHeader #hapTitle:hover { background-color: [color="#FF0000"]#09805C[/color]; }

On Line 155 change both entries to your PRIMARY colour choice:

#hapUserTitle { position: fixed; right: 0; height: 40px; line-height: 40px; top: 0; z-index: 310; background-color: [color="#FF0000"]#06513A[/color]; border-right: solid 10px [color="#FF0000"]#06513A[/color]; color: #fff; text-decoration: none; padding: 0 10px; font-size:16px; }

On Line 156 change "background-color" to your SECONDARY colour:

#hapUserTitle:hover { background-color: [color="#FF0000"]#09805C[/color]; text-decoration: none; }

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:

#bookingday .head #picker { border: 0; border-radius: 0; width: 100%; height: 30px; line-height: 30px; font-size: 110%; background: [color="#FF0000"]#06513A[/color]; color: #fff; padding: 0; font-size: 18px; }

On line 22 change the "background-color" colour to your SECONDARY colour:

#bookingday .head #picker:hover { background-color: [color="#FF0000"]#09805C[/color]; }

On line 23 change the "background-color" colour to your PRIMARY colour:

#bookingday .head #picker:active { background-color: [color="#FF0000"]#06513A[/color]; }

On line 45 change the "background" colour to your PRIMARY colour:

#bookingday .head, #bookingday .body.head .col div { height: 30px!important; line-height: 30px!important; background: [color="#FF0000"]#06513A[/color]!important; color: #fff; min-height: 30px!important; }

On line 47 change the "background" colour to your SECONDARY colour:

#bookingday #resources div { background: [color="#FF0000"]#09805C[/color]; text-align: center; line-height: 60px; }

 

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

 

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).