[PHPiCalendar-DEV] Something different - dynamic CSS

[Jim Hu <ji...@ta...>]

On the bbs, someone was asking about changing the colors and such.   
This reminded me of the variety of user-selectable styles in version  
1.x and led me to play with migrating the old styles into 2.x, but it  
quickly became a pain to think about matching the colors of event  
backgrounds, month dots, allday backgrounds and so on.  So it  
occurred to me that it might be cool to do this more dynamically,  
based on this article I found:

http://digital-web.com/articles/generating_dynamic_css_with_php/

So I started playing with this idea.  I created a new function  
script, called functions/css.php.  Then I changed header.tpl so that  
the css link looks like this:

   	<link rel="stylesheet" type="text/css" href="functions/css.php" />

Inside css.php, I placed an include statement to grab a  
css_settings.php file from inside the templates/$template directory.   
So far, this just defines a list of colors to use for each template.   
For example

<?php
$calcolors = array();
$cal_colors[] = '6876E7';
$cal_colors[] = '666699';
$cal_colors[] = '999999';
$cal_colors[] = 'CC6633';
$cal_colors[] = '9999CC';
$cal_colors[] = 'CC9933';
$cal_colors[] = '73738C';
?>

css.php just prints the stuff in default.php, but I replaced parts of  
that with:

foreach ($cal_colors as $key=>$val){
	print ".alldaybg_$key    { background-color: #".$val."; padding:  
2px;}\n";
	print ".eventbg_$key     { background-color: #".$val."; padding:  
2px;}\n";
	print ".eventbg2_$key	  { background-color: #".$val."; padding: 2px;} 
\n";
	print ".dot_$key              { font-family: Verdana, Geneva, Arial,  
Helvetica, sans-serif; font-size: 16px; color: #".$val."; }\n";
}

Then I changed list_calcolors() in list_functions.php

      $return .= '<span class="dot_'.$i.'">&bull;</span> '.$val.'<br / 
 >';

To deal with the month view I changed draw_month() in template.php

if (!isset($val['event_start'])) {
	if ($type == 'large') {
		$switch['ALLDAY'] .= '<span class="dot_'.$event_calno.'">&bull;</ 
span><span class="V9">';
		$switch['ALLDAY'] .= openevent($daylink, $cal_time, $uid, $val,  
$month_event_lines, 15, 'psf').'<br />';
		$switch['ALLDAY'] .= '</span>';
	} else {
		$switch['ALLDAY'] .= '<img src="templates/'.$template.'/images/ 
allday_dot.gif" alt=" " width="11" height="10" border="0" />';
	}
} else {	
	$start2		 = date($timeFormat_small, $val['start_unixtime']);
	if ($type == 'large') {
		$switch['EVENT'] .= '<span class="dot_'.$event_calno.'">&bull;</ 
span><span class="V9">';
		$switch['EVENT'] .= openevent($daylink, $cal_time, $uid, $val,  
$month_event_lines, 10, 'ps3', "$start2 ").'<br />';
		$switch['EVENT'] .= '</span>';
	} else {
		$switch['EVENT'] = '<img src="templates/'.$template.'/images/ 
event_dot.gif" alt=" " width="11" height="10" border="0" />';
	}
}


The very crude result is here:

http://dimer.tamu.edu/phpical-x/

This works in IE and Safari on my OSX mac, but not in Firefox...so  
it's definitely not worked out.  Note that an alternative would be to  
use the script to generate css files that could be used as static  
files....this should work for Firefox.

Use the preferences to change color schemes.  What you can see is  
that the dot colors on the legend change automatically to match the  
event colors.  I haven't figured out how to do the borders or spacing  
properly, and the blocks aren't nearly as pretty as the gradient ones  
that happen with the images in the allday events.  I'm thinking that  
this could actually be handled by making a series of allday_xxx.gif  
images, where instead of being calendar numbers, the xxx represents  
color codes.  We obviously wouldn't do thousands of these, but it  
shouldn't be too hard to do a nice selection. What would be better  
would be some kind of CSS trick to overlay an image over an  
arbitrarily colored background.  I think this can be done, but I'm  
not sure how.

Anyway, I think it would be cool to allow rapid color changing.  What  
do people think?

Jim Hu