demosthenes.info

I’m Dudley Storey, the author of Pro CSS3 Animation. This is my blog, where I talk about web design and development with , and . To receive more information, including news, updates, and tips, you should follow me on Twitter or add me on Google+.

web developer guide

my books

Book cover of Pro CSS3 AnimationPro CSS3 Animation, Apress, 2013

my projects

CSSslidy: an auto-generated #RWD image slider. 1.5K of JS, no JQuery. Drop in images, add a line of CSS. Done.

tipster.ioAutomatically provides local tipping customs and percentages for services anywhere.

Tree in four seasons

Four Seasons In One Script: Creating Seasonal Site Themes With PHP

php / time

Estimated reading time: 2 minutes, 47 seconds

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 .

The technology you use to create this script depend on your needs. A server-side technology such as 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).

comments powered by Disqus

This site helps millions of visitors while remaining ad-free. For less than the price of a cup of coffee, you can help pay for bandwidth and server costs while encouraging further articles.