Page 1 of 1

calendar view

Posted: 2010-10-14 15:31
by mrhankey
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

Re: calendar view

Posted: 2010-10-16 15:01
by Fred
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

Re: calendar view

Posted: 2011-01-11 12:28
by mrhankey
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

Re: calendar view

Posted: 2011-01-11 12:44
by Fred
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.