View RSS Feed

mattgrimley

HAP+ v9 - Basic CSS - Tweaking the colour scheme

Rate this Entry
by , 23rd April 2013 at 12:03 PM (5006 Views)
Quote Originally Posted by mattgrimley View Post
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":
Code:
 .tile-color, #datepicker .ui-datepicker-header { background: #06513A; border-color: #0060a6; }
On Line 51, change the image URL to your custom one:
Code:
 #loginformside, #hapHomeSide { position: absolute; left: 0; width: 30%; top: 0; bottom: 0; background-image: url(../images/icons/metro/hap-logo-128.png); 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):
Code:
#loginform h1 a, #title h1 a { color: #09805C; 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:
Code:
#hapHeader a:hover { background-color: #09805C; }
On line 150 change the "background-color" to be your PRIMARY colour:
Code:
#hapHeader a:active { background-color: #06513A; }
On line 152 change the "background-color" to be your SECONDARY colour:
Code:
#hapHeader #hapTitle:hover { background-color: #09805C; }
On Line 155 change both entries to your PRIMARY colour choice:
Code:
#hapUserTitle { position: fixed; right: 0; height: 40px; line-height: 40px; top: 0; z-index: 310; background-color: #06513A; border-right: solid 10px #06513A; color: #fff; text-decoration: none; padding: 0 10px; font-size:16px; }
On Line 156 change "background-color" to your SECONDARY colour:
Code:
#hapUserTitle:hover { background-color: #09805C; 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:
Code:
#bookingday .head #picker { border: 0; border-radius: 0; width: 100%; height: 30px; line-height: 30px; font-size: 110%; background: #06513A; color: #fff; padding: 0; font-size: 18px; }
On line 22 change the "background-color" colour to your SECONDARY colour:
Code:
#bookingday .head #picker:hover { background-color: #09805C; }
On line 23 change the "background-color" colour to your PRIMARY colour:
Code:
#bookingday .head #picker:active { background-color: #06513A; }
On line 45 change the "background" colour to your PRIMARY colour:
Code:
#bookingday .head, #bookingday .body.head .col div { height: 30px!important; line-height: 30px!important; background: #06513A!important; color: #fff; min-height: 30px!important; }
On line 47 change the "background" colour to your SECONDARY colour:
Code:
#bookingday #resources div { background: #09805C; 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).

Comments

Trackbacks

Total Trackbacks 0
Trackback URL: