+ Post New Thread
Results 1 to 15 of 15
Home Access Plus+ Thread, HAP+ v9 - Basic CSS - Tweaking the colour scheme in Projects:; This is a very basic guide on how to change the fundamental colour scheme in HAP+ using CSS. This is ...
  1. #1
    mattgrimley's Avatar
    Join Date
    Jun 2011
    Location
    Bedfordshire
    Posts
    316
    Thank Post
    35
    Thanked 21 Times in 19 Posts
    Blog Entries
    1
    Rep Power
    10

    HAP+ v9 - Basic CSS - Tweaking the colour scheme

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

  2. 2 Thanks to mattgrimley:

    Marshall_IT (29th April 2013), nickbro (23rd April 2013)

  3. #2
    mattgrimley's Avatar
    Join Date
    Jun 2011
    Location
    Bedfordshire
    Posts
    316
    Thank Post
    35
    Thanked 21 Times in 19 Posts
    Blog Entries
    1
    Rep Power
    10
    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; }

  4. Thanks to mattgrimley from:

    nickbro (23rd April 2013)

  5. #3
    TheScarfedOne's Avatar
    Join Date
    Apr 2007
    Location
    Plymouth, Devon
    Posts
    1,176
    Thank Post
    570
    Thanked 153 Times in 139 Posts
    Blog Entries
    78
    Rep Power
    80
    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!

  6. #4
    TheScarfedOne's Avatar
    Join Date
    Apr 2007
    Location
    Plymouth, Devon
    Posts
    1,176
    Thank Post
    570
    Thanked 153 Times in 139 Posts
    Blog Entries
    78
    Rep Power
    80
    All sorted...was having a moment!

  7. #5

    Join Date
    Apr 2012
    Location
    Scunthorpe
    Posts
    38
    Thank Post
    4
    Thanked 0 Times in 0 Posts
    Rep Power
    0
    Ok @TheScarfedOne where are they then ? I can't find them any where..

    Calwyn

  8. #6
    TheScarfedOne's Avatar
    Join Date
    Apr 2007
    Location
    Plymouth, Devon
    Posts
    1,176
    Thank Post
    570
    Thanked 153 Times in 139 Posts
    Blog Entries
    78
    Rep Power
    80
    Notepad, do a find - its easier!

  9. #7

    Join Date
    Apr 2012
    Location
    Scunthorpe
    Posts
    38
    Thank Post
    4
    Thanked 0 Times in 0 Posts
    Rep Power
    0
    Still can't find it anywhere, is it different in v9 ?

  10. #8

    Join Date
    Apr 2012
    Location
    Scunthorpe
    Posts
    38
    Thank Post
    4
    Thanked 0 Times in 0 Posts
    Rep Power
    0
    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

  11. #9

    Join Date
    Feb 2008
    Location
    South East Kent
    Posts
    46
    Thank Post
    13
    Thanked 7 Times in 4 Posts
    Rep Power
    15
    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!

  12. 4 Thanks to Squelch:

    calwyn (23rd July 2013), D0liver (2nd April 2014), mattgrimley (22nd July 2013), SeanVin (2nd April 2014)

  13. #10
    mattgrimley's Avatar
    Join Date
    Jun 2011
    Location
    Bedfordshire
    Posts
    316
    Thank Post
    35
    Thanked 21 Times in 19 Posts
    Blog Entries
    1
    Rep Power
    10
    Thanks for sharing @Squelch
    I must admit i hunted round myself for those and couldn't find them!

  14. #11

    Join Date
    Apr 2012
    Location
    Scunthorpe
    Posts
    38
    Thank Post
    4
    Thanked 0 Times in 0 Posts
    Rep Power
    0
    Thanks @Squelch that did the trick....

  15. #12

    Join Date
    Jun 2011
    Location
    Atherton
    Posts
    112
    Thank Post
    13
    Thanked 6 Times in 1 Post
    Rep Power
    8
    Everytime i upgrade HAP, i have to reapply these settings.......can i get around that?

  16. #13
    mattgrimley's Avatar
    Join Date
    Jun 2011
    Location
    Bedfordshire
    Posts
    316
    Thank Post
    35
    Thanked 21 Times in 19 Posts
    Blog Entries
    1
    Rep Power
    10
    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!

  17. #14
    SeanVin's Avatar
    Join Date
    Dec 2006
    Location
    Northgate High School, Ipswich
    Posts
    78
    Thank Post
    29
    Thanked 13 Times in 9 Posts
    Rep Power
    18

    HAP+ BookingSystem cell width

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

    Code:
     <div class="body"<%=BodyCode[0] %> style="min-width: <%=(188 * (config.BookingSystem.Lessons.Count + 1)) + 2 %>px">
    188 was originally set at 200. It is of course dependent on screen resolution, however we control that on-site.

  18. #15
    SeanVin's Avatar
    Join Date
    Dec 2006
    Location
    Northgate High School, Ipswich
    Posts
    78
    Thank Post
    29
    Thanked 13 Times in 9 Posts
    Rep Power
    18
    We wanted to keep all the Booking system time slots on-screen without having to scroll. It can be done in ~\BookingSystem\default.aspx.

    Code:
     <div class="body"<%=BodyCode[0] %> style="min-width: <%=(188 * (config.BookingSystem.Lessons.Count + 1)) + 2 %>px">
    188 was originally set at 200. It is of course dependent on screen resolution, however we control that on-site.

SHARE:
+ Post New Thread

Similar Threads

  1. [CSS] Webpage not following basic CSS in IE
    By SimpleSi in forum Web Development
    Replies: 17
    Last Post: 25th June 2011, 09:02 PM
  2. Replies: 0
    Last Post: 18th May 2011, 12:52 PM
  3. Changing the colour of the menu bar
    By FN-GM in forum EduGeek Joomla 1.0 Package
    Replies: 4
    Last Post: 12th March 2008, 10:55 PM
  4. Any one running the ECDL scheme?
    By Kyle in forum Educational Software
    Replies: 8
    Last Post: 10th March 2006, 09:30 AM
  5. Replies: 8
    Last Post: 5th November 2005, 07:13 PM

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •