Cant see for looking!

Help with installation and general calendar setttings

Cant see for looking!

Postby manamaga » Sun Aug 22, 2010 9:00 pm

I`m wanting to change the colour of 'Available' to green, and 'Special Offer' to an alternative colour. I have looked through the support board and checked the avail-calendar.css file but i cant seem to find where to make the changes? Thanks in advance.
manamaga
 
Posts: 9
Joined: Sat Aug 21, 2010 9:53 pm

Re: Cant see for looking!

Postby chris » Mon Aug 23, 2010 12:49 am

The "available" state is infact the default state of the dates so just change the "li" class background color.
Code: Select all
.cal_month ul li

For the "special" state, you need to define the class name in the admin (where the states are defined and adminstered) then create a new class in the style sheet with this name like this:
Code: Select all
.cal_month ul li.special   {background-color:green;}

I think that in the download version the "special" state is actually called "offer":
.cal_month ul li.offer

Chris
User avatar
chris
Site Admin
 
Posts: 1089
Joined: Mon Dec 17, 2007 7:42 pm
Location: Málaga, Spain

Re: Cant see for looking!

Postby manamaga » Tue Aug 24, 2010 9:04 pm

Thanks for that, i tried to follow but i think i ballsed it up :?

I have the calendar on another site where i can play around with it a bit more, now i changed something and all have gone to green
http://web.nabwoodschool.org.uk/calendar
I just cant get my head around css :x

Is it possible to have each of the 'keys' on the above site, a different colour, with 'Available' being Green to start with.
manamaga
 
Posts: 9
Joined: Sat Aug 21, 2010 9:53 pm

Re: Cant see for looking!

Postby chris » Tue Aug 24, 2010 9:17 pm

Yes,
You now have "lime" as your default (available) state.
You now just need to add classes in the style sheet for each of the "states" that you have created.

eg.
Code: Select all
.booked_p2 { background-color: red;}
.booked_p3 { background-color: blue;}
.booked_p4 { background-color: yellow;}
.booked_p5 { background-color: orange;}
.booked_break { background-color: grey;}
etc.

Note - these must go AFTER you have defined the default style in the style sheet.
You should see this comment in the style sheet:
Code: Select all
/*
calendar date styles
class name must be the same as defined in admin panel
***************************/

Here is where you add your state styles.

Chris
User avatar
chris
Site Admin
 
Posts: 1089
Joined: Mon Dec 17, 2007 7:42 pm
Location: Málaga, Spain

Re: Cant see for looking!

Postby manamaga » Tue Aug 24, 2010 11:56 pm

OK, i have done that but all are still green, here is what my code looks like now, i wonder if they are still green because i have used hex colour codes and not actual words like 'red' or 'green' etc??

/*calendar date styles
class name must be the same as defined in admin panel
***************************/
.booked_all_day {background-color: #FF0;}
.booked_p1 {background-color: #F90;}
.booked_p2 { background-color: #F30;}
.booked_p3 { background-color: #F06;}
.booked_p4 { background-color: #3CF;}
.booked_p5 { background-color: #3C0
.booked_break { background-color: #660;}
.booked_lunch {background-color: #9CF;}
.booked_after_school {background-color: #C99;}
.cal_month ul li.offer { background-color:lime; }
.cal_month ul li.changeover { background-color:#fa0f09; }
manamaga
 
Posts: 9
Joined: Sat Aug 21, 2010 9:53 pm

Re: Cant see for looking!

Postby chris » Wed Aug 25, 2010 1:08 am

Can you try it like this:
Code: Select all
.cal_month ul li.booked_all_day {background-color: #FF0;}
.cal_month ul li.booked_p1 {background-color: #F90;}
.cal_month ul li.booked_p2 { background-color: #F30;}
.cal_month ul li.booked_p3 { background-color: #F06;}
.cal_month ul li.booked_p4 { background-color: #3CF;}
.cal_month ul li.booked_p5 { background-color: #3C0
.cal_month ul li.booked_break { background-color: #660;}
.cal_month ul li.booked_lunch {background-color: #9CF;}
.cal_month ul li.booked_after_school {background-color: #C99;}
.cal_month ul li.offer { background-color:lime; }
.cal_month ul li.changeover { background-color:#fa0f09; }

Chris
User avatar
chris
Site Admin
 
Posts: 1089
Joined: Mon Dec 17, 2007 7:42 pm
Location: Málaga, Spain

Re: Cant see for looking!

Postby manamaga » Wed Aug 25, 2010 11:21 am

I just did a semi WHOOP WHOOP!! Most have changed having used your code but the bottom 4 are still green:
http://web.nabwoodschool.org.uk/
manamaga
 
Posts: 9
Joined: Sat Aug 21, 2010 9:53 pm

Re: Cant see for looking!

Postby chris » Wed Aug 25, 2010 11:29 am

You are missing the closing brackets on this line:
Code: Select all
.cal_month ul li.booked_p5 { background-color: #3C0


Chris
User avatar
chris
Site Admin
 
Posts: 1089
Joined: Mon Dec 17, 2007 7:42 pm
Location: Málaga, Spain

Re: Cant see for looking!

Postby manamaga » Wed Aug 25, 2010 12:02 pm

I wont swear but......YOU EFFING BEAUTY!!! Big big thanks Chris.
Was it my code that was all over the place? It seemed tat when i copied / pasted your code it looked to be all neat and tidy for want of a better description.
manamaga
 
Posts: 9
Joined: Sat Aug 21, 2010 9:53 pm

Re: Cant see for looking!

Postby chris » Wed Aug 25, 2010 12:04 pm

Yes, I think that the error was actually in your code that I copied and pasted here.
Anyway, it is solved now :)

Chris
User avatar
chris
Site Admin
 
Posts: 1089
Joined: Mon Dec 17, 2007 7:42 pm
Location: Málaga, Spain

Next

Return to Support

Who is online

Users browsing this forum: No registered users and 2 guests

cron