calendar view

mrhankey
Posts: 45
Joined: 2010-07-31 18:20

calendar view

Post by mrhankey » 2010-10-14 15:31

hi,

i would like to use the colour scheme with the arrow buttons in the second image on your link:

http://www.interaktonline.info/files/49 ... Fixed.html

can you post css files?

many thanks

User avatar
Fred
Site Admin
Posts: 491
Joined: 2010-02-15 12:10
Location: Armagh, Northern Ireland
Contact:

Re: calendar view

Post by Fred » 2010-10-16 15:01

It is heavily customised but here is the important bits.
The heading backgrounds are dynamically generated images but the background-colour in each case will give you an idea of the colour.

Code: Select all

.past_days {
    background-color: #e0e0e0;
} 
.nav_cal {
    background-position:center;
    background-color: #00557d;
    -moz-border-radius-topleft: 8px;
    -moz-border-radius-topright: 8px;
    -webkit-border-top-left-radius: 8px;
    -webkit-border-top-right-radius: 8px;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;    
    height: 21px;
    color: #ffffff;
} 
.main_cal {
    font-size: 11px;
    color: #000000;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px;    
    width: 100%;
    background-color: #ffffff;
    border: 2px solid #393766!important;
} 
.year_cal .nav_cal {
  border: 5px solid #00ff11;
  font-size: 12px;
  color: #ffffff !important;
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-top-radius: 8px;
} 
.nugget_cal a {
    text-decoration: none;
    color:#ffffff;
} 
.nugget_cal a:hover {
    text-decoration: none;
    color: #ffffff;
} 
.hasevent_cal {
  background-color:#ffd7d7;
} 
.hasevent_cal a {
  color: #0000ff;
  font-weight: bold;
  text-decoration:  none;
} 
.nugget_cal .weekend_cal, .nugget_cal .weekend_cal a {
  color: #ff0000;
} 
.year_cal {
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
  border-radius: 8px;
    border: 2px solid #00557d;
    width: 99%;
    background-color: #ccfcff;
}  
To get the arrows you will have to edit the CAL.res.php file in the resources folder.
Change line 40 and 41 to this:

Code: Select all

'PREV_CALENDAR' => '<img src="arrow_left_green.png" alt="Previous" border="0" align="left">',
'NEXT_CALENDAR' => '<img src="arrow_right_blue.png" alt="Next" border="0" align="right">',
Hope this helps

mrhankey
Posts: 45
Joined: 2010-07-31 18:20

Re: calendar view

Post by mrhankey » 2011-01-11 12:28

thanks so much for this, the first part of code you gave. where do you add this css to?

the calendar page or another calendar css page somewhere?

many thanks again

User avatar
Fred
Site Admin
Posts: 491
Joined: 2010-02-15 12:10
Location: Armagh, Northern Ireland
Contact:

Re: calendar view

Post by Fred » 2011-01-11 12:44

I have mine all in a different css file but I think it was originally in the cal.css file in the includes/skins folder.

Post Reply