Adjust the colors by clicking to add or subtract from the red, green, and blue intensities for each calendar. Links will allow you to download allday and monthdot images for your custom style (be sure to name them correctly). Copy the text below as a css file for your custom template. Be sure to adjust the number of calendars in your config.inc.php file too.
/* Custom Style sheet for phpicalendar */
table, td {font: 11px Verdana, Arial, sans-serif; color: #000;}
/* Background images for tables */
.tbll {background: url(images/shadow_l.gif) no-repeat; width:8px}
.tblbot {background: url(images/shadow_m.gif) repeat-x; width:100%}
.tblr {background: url(images/shadow_r.gif) no-repeat; width:8px}
.alldaybg_1 {background: url(images/allday_1.gif) repeat-x; height: 19px; padding-top: 5px; text-align: center;}
.alldaybg_2 {background: url(images/allday_2.gif) repeat-x; height: 19px; padding-top: 5px; text-align: center;}
.alldaybg_3 {background: url(images/allday_3.gif) repeat-x; height: 19px; padding-top: 5px; text-align: center;}
.alldaybg_4 {background: url(images/allday_4.gif) repeat-x; height: 19px; padding-top: 5px; text-align: center;}
.alldaybg_5 {background: url(images/allday_5.gif) repeat-x; height: 19px; padding-top: 5px; text-align: center;}
.alldaybg_6 {background: url(images/allday_6.gif) repeat-x; height: 19px; padding-top: 5px; text-align: center;}
.alldaybg_7 {background: url(images/allday_7.gif) repeat-x; height: 19px; padding-top: 5px; text-align: center;}
.rowOn { background-color: #cfc; border-top: 1px solid #fff; border-left: 1px solid #fff; }
.rowOn2 { background-color: #cfc; border-top: 1px solid #fff; }
.rowOff { background-color: #E1E8F1; border-top: 1px solid #fff; border-left: 1px solid #fff; }
.rowOff2 { background-color: #E1E8F1; border-top: 1px solid #fff; }
.rowToday { background-color: #cff; border-top: 1px solid #fff; border-left: 1px solid #fff; }
.padd { padding: 2px; }
/* Styles for day and week events */.eventbg_1 { background-color: #4679ac; padding: 2px;}
.eventbg_2 { background-color: #2fa444; padding: 2px;}
.eventbg_3 { background-color: #df4d1b; padding: 2px;}
.eventbg_4 { background-color: #ca42b4; padding: 2px;}
.eventbg_5 { background-color: #df3e36; padding: 2px;}
.eventbg_6 { background-color: #ac9200; padding: 2px;}
.eventbg_7 { background-color: #727281; padding: 2px;}
.eventbg2_1 { background-color: #6699cc; border: 1px solid #4679ac; }
.eventbg2_2 { background-color: #4fc464; border: 1px solid #2fa444; }
.eventbg2_3 { background-color: #ff6d3b; border: 1px solid #df4d1b; }
.eventbg2_4 { background-color: #ea62d4; border: 1px solid #ca42b4; }
.eventbg2_5 { background-color: #ff5e56; border: 1px solid #df3e36; }
.eventbg2_6 { background-color: #ccb21f; border: 1px solid #ac9200; }
.eventbg2_7 { background-color: #9292a1; border: 1px solid #727281; }
{ background-color: #9292A1; border: 1px solid #73738C; }
.dayborder { background-color: #fff; border-top: 1px solid #A1A5A9; }
.dayborder2 { background-color: #fff; border-top: 1px dashed #ccc; }
.title { background-image: url(images/time_bg.gif); padding: 5px; }
.title h1 { font-family: Helvetica, sans-serif; font-size: 18px; color: #000; margin: 0px;}
/* Month View */
.monthback { background-color: #A1A5A9; }
.monthreg { background-color: #fff; height: 105px; width: 105px; text-align: left; vertical-align: top; }
.monthoff { background-color: #F2F2F2; height: 105px; width: 105px; text-align: left; vertical-align: top; }
.monthon { background-color: #F2F9FF; height: 105px; width: 105px; text-align: left; vertical-align: top; }
.montheventtop { background-image: url(images/side_bg.gif); border-top: 1px solid #A1A5A9; }
.montheventline { border-right: 1px dotted #A1A5A9; }
/* Year View */
.medtitle { background-image: url(images/side_bg.gif); height: 20px; margin-top: 3px; font-weight: 900; }
.yearreg { background-color: #fff; height: 30px; width: 30px; text-align: right; vertical-align: top; font-size: 9px; }
.yearoff { background-color: #F2F2F2; height: 30px; width: 30px; text-align: right; vertical-align: top; font-size: 9px; }
.yearon { background-color: #F2F9FF; height: 30px; width: 30px; text-align: right; vertical-align: top; font-size: 9px; }
.yearmonth { background-color: #ccc; }
.yearweek { background-color: #eee; width: 30px; font-size: 9px; font-weight: 900; text-align: center; height: 15px; }
/* older styles */
.eventborder { background-image: url(images/day_title.gif); border: 1px #006699 solid; }
.eventbg { background-color: #6699CC; }
.calborder { background-color: #fff; border: 1px #A1A5A9 solid; }
.dateback { background-color: #eee; }
.weekborder { border-top: 1px dashed #A1A5A9; border-right: 1px solid #A1A5A9; }
.weekborder2 { border-right: 1px solid #A1A5A9; }
.timeborder { border-right: 2px solid #A1A5A9; border-top: 1px dashed #A1A5A9; background-image: url(images/time_bg.gif); }
.timeborder2 { border-right: 2px solid #A1A5A9; border-top: 1px solid #A1A5A9; background-image: url(images/time_bg.gif); }
.navback { background-image: url(images/time_bg.gif); }
.sideback { background-image: url(images/side_bg.gif); }
/* Link colors and attributes */
/* This is the main link style */
a.psf { text-decoration: none; }
a.psf:link { color: #0066FF; }
a.psf:visited { color: #0066FF; }
a.psf:active { color: #3366CC; }
a.psf:hover { color: #000099; text-decoration: underline; }
/* This is the link style for the mini-cals */
a.ps2 { text-decoration: underline; }
a.ps2:link { color: #0066FF; }
a.ps2:visited { color: #0066FF; }
a.ps2:active { color: #3366CC; }
a.ps2:hover { color: #000099; }
/* This is the link style for year months */
a.ps3 { text-decoration: none; }
a.ps3:link { color: #000; }
a.ps3:visited { color: #000; }
a.ps3:active { color: #000; }
a.ps3:hover { color: #000; text-decoration: underline; }
/* This is the link style for events */
a.ps { text-decoration: none; }
a.ps:link { color: #fff; }
a.ps:visited { color: #fff; }
a.ps:active { color: #fff; }
a.ps:hover { color: #fff; text-decoration: underline; }
/* Body attributes */
body { background-color: #E5E5E5; }
/* CSS definitions for fonts */
.V9 { font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 9px; color: #000000; }
.V10W { font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 10px; color: #FFFFFF; text-decoration: none;}
.V9W { font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 9px; color: #FFFFFF; text-decoration: none;}
.V10WB { font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 10px; color: #FFFFFF; font-weight: 900; }
.V9G { font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 9px; color: #666666; }
.V10 { font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 10px; color: #000000; }
.V9BOLD { font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 9px; font-weight: 900; }
.G10 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: #0066FF; }
.G10B { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: #000000; }
.G10BOLD { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; font-weight: 900; }
.G10G { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: #A1A5A9; }
.V12 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #000000; }
/*h1 { font-family: Helvetica, sans-serif; font-size: 18px; color: #000000; }*/
.eventfont { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: #FFFFFF; }
/* Length of the form drop downs */
.query_style { font-size: 11px; font-family: verdana, geneva, arial, sans-serif; width: 156px; margin-bottom: 0; }
.search_style { font-size: 12px; font-family: verdana, geneva, arial, sans-serif; width: 134px; margin-bottom: 0; }
.login_style { font-size: 11px; font-family: verdana, geneva, arial, sans-serif; width: 80px; margin-bottom: 0; }
|