HAP+ v9 - Basic CSS - Tweaking the colour scheme

[mattgrimley]

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

[mattgrimley]

Basestyle.css

 

To change the Tile group navigation names (Resources / Management / Me etc)

Line 81 - change "color" to your PRIMARY choice

#HomeButtonsHeader h1.active a { color: #06513A; }

[TheScarfedOne]

Having a DOH moment... where were the options for FREE, BOOKED, UNAVAILABLE and CHARGING for different colours. After upgrading to the split resources - I dont want to break it!

[TheScarfedOne]

All sorted...was having a moment!

[calwyn]

Ok @TheScarfedOne where are they then ? I can't find them any where..

 

Calwyn

[TheScarfedOne]

Notepad, do a find - its easier!

[calwyn]

Still can't find it anywhere, is it different in v9 ?

[calwyn]

Hi again @TheScarfedOne could you tell me which file I should be looking at to change these colours for FREE, BOOKED, UNAVAILABLE and CHARGING. I can't find any mention of FREE, BOOKED, UNAVAILABLE or CHARGING in the bookingstyle.css

 

Cheers, Calwyn

[Squelch]

I added the following two lines into the bookingsystem.css file

 

#bookingday .body .col a.free { background-color: #58fa58 }

#bookingday .body .col a.booked { background-color: #fa5858 }

 

That shows a light red background for a booked period and a light green colour for a free period.

 

I had to hunt around these forums to find a few clues how to do it, I know virtually nothing about what I'm doing here so I wouldn't be surprised to find a much easier way to achieve the same thing!

[mattgrimley]

Thanks for sharing @Squelch

I must admit i hunted round myself for those and couldn't find them!

[calwyn]

Thanks @Squelch that did the trick....

[Jaan]

Everytime i upgrade HAP, i have to reapply these settings.......can i get around that?

[mattgrimley]

Afraid that's correct @jahilton2002 - I tend to upgrade using "beyond compare" which does a file contents comparison as well as a straight file comparison.. Normally the CSS doesnt have any changes.. but of course you can't guarantee that!

[SeanVin]

We wanted to keep all the Booking system time slots on-screen without having to scroll. It can be done in ~\BookingSystem\default.aspx.

 

  style="min-width: <%=(188 * (config.BookingSystem.Lessons.Count + 1)) + 2 %>px">

[SeanVin]

We wanted to keep all the Booking system time slots on-screen without having to scroll. It can be done in ~\BookingSystem\default.aspx.

 

  style="min-width: <%=(188 * (config.BookingSystem.Lessons.Count + 1)) + 2 %>px">

[lholland421]

Hi is there any way of making the left hand bar in the booking system static. so no matter if the user has to scroll to view the Periods they can still see the rooms on the left?

 

Thanks

[nickbro]

I'll look into it

[lholland421]

Thanks Nick !

[mattgrimley]

Hey Nick,

I'm thinking of adding pre-school, break, lunch and after-school columns to our bookings, but they make the display fairly unwieldy.. is it possible to change (a) the width of the columns which are not "lessons"? i.e. i'd like to reduce them as the content is not so important.. possibly to about 50% of their current width.. and (b) the background colour in the css to differentiate them from regular "lessons"?

 

TA!