phpicalendar style helper

phpicalendar template css helper

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.

Calendar time background Printer icon day minical week minical month minical
year minical
search
r:100
g:100
b:255
For calendar number 1
Allday eventallday image
Event header 4679ac Calendar legend dot

Calendar legend dot

Calendar legend dot

Calendar legend dot

Calendar legend dot

Calendar legend dot

Calendar legend dot

r
g
b
Event text: 6699cc




For calendar number 2
Allday eventallday image
Event header 2fa444 Calendar legend dot

Calendar legend dot

Calendar legend dot

Calendar legend dot

Calendar legend dot

Calendar legend dot

Calendar legend dot

r
g
b
Event text: 4fc464




For calendar number 3
Allday eventallday image
Event header df4d1b Calendar legend dot

Calendar legend dot

Calendar legend dot

Calendar legend dot

Calendar legend dot

Calendar legend dot

Calendar legend dot

r
g
b
Event text: ff6d3b




For calendar number 4
Allday eventallday image
Event header ca42b4 Calendar legend dot

Calendar legend dot

Calendar legend dot

Calendar legend dot

Calendar legend dot

Calendar legend dot

Calendar legend dot

r
g
b
Event text: ea62d4




For calendar number 5
Allday eventallday image
Event header df3e36 Calendar legend dot

Calendar legend dot

Calendar legend dot

Calendar legend dot

Calendar legend dot

Calendar legend dot

Calendar legend dot

r
g
b
Event text: ff5e56




For calendar number 6
Allday eventallday image
Event header ac9200 Calendar legend dot

Calendar legend dot

Calendar legend dot

Calendar legend dot

Calendar legend dot

Calendar legend dot

Calendar legend dot

r
g
b
Event text: ccb21f




For calendar number 7
Allday eventallday image
Event header 727281 Calendar legend dot

Calendar legend dot

Calendar legend dot

Calendar legend dot

Calendar legend dot

Calendar legend dot

Calendar legend dot

r
g
b
Event text: 9292a1





/* 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; }