Having just officially passed into spring here, it feels appropriate to provide a lesson on creating seasonal themes for web sites. Regularly changing the appearance of a site in tune with the seasons can help keep the site looking fresh and current; to me, there’s something homely and warm about a web page that reflects the changes in hue and tone of the world outside. Of course, that’s true of only half the world, the seasons are reversed between the northern and southern hemispheres: when Canada is locked in the icy depths of winter, my birthplace of New Zealand is enjoying the heights of summer. In addition, the change of season is calculated in different ways in each hemisphere.

Whatever system you decide to follow, and whatever season you choose to reflect, you don't want to switch your site theme by hand four times a year. It’s much more efficient to let a script calculate the date and apply the necessary changes to your CSS.

The technology you use to create this script depend on your needs. A server-side technology such as PHP will always work, but it will use the server’s date. That time will always be correct for the server’s location, but will not match the visitor’s experience if they are from the opposite hemisphere. I will cover the JavaScript solution in a later article, but it has its own advantages and downsides.

Using PHP, you’ll have to start with the technique I referenced earlier in tricking PHP into believing it is a CSS page. This script will be written in this styles.php page:

<?php
	header('Content-type: text/css');
	$ss = array('winter','spring','summer','autumn', 'winter');
	$m = intval(date('m'));
	$season = $ss[$m/3];
?>

Very simply: $ss is an array that contains the name of the seasons; $m calculates an integer from the current month. We divide $m by 3 to get the nearest round number, and use that number to get the appropriate season from the $ss array (remember that array slots start from 0). For example, if it were December, the numeric month would be 12; divided by three, the result is 4, which would be the last slot in the array. March will be month three, divided by 3, the result is 1, which would match spring in the array.

While this isn’t perfectly accurate for traditional northern hemisphere calculation of the seasons (more precise vernal equinox PHP scripts are available), it’s entirely acceptable for most sites.

Once we have a value for $season, we can use it for all kinds of purposes in the styles.php page:

h1 {
	background: url("images/<?=$season?>.jpg");
}

This will place the appropriate image for the season (summer.jpg, etc) as a background image for the h1 element of all pages that link to styles.php.

Taking this a step further, you could add something like the following:

<?
	if ($season == "spring" || $season == "summer" ) { ?>
body { background: #97a349; }
/* other styles associated with spring and summer */
	<? } else { ?>
body { background: #bebebe; }
/* other styles associated with winter and autumn */
<? } ?>

A thorough theme switch would address site colors for every season separately (cold, bleak whites, greys and light blues for winter, oranges and reds for fall) perhaps including animations (subtle falling snowflakes or leaves in backgrounds, for example).

Photograph by Toni Verdú Carbó, licensed under Creative Commons.

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.