Simple Time Sensitive CSS
With the most recent redesign of this site, about a year ago, I decided I wanted to mix things up a little and display a different look/design for each month. I wanted the main page of the site to change with each month, but have the individual entries maintain the look of the month it was written. Using a little bit of PHP, 13 different stylesheets, and some handy WordPress conditionals I was able to do just that.
Stylesheets A’ Plenty
I started by first creating 13 different stylesheets. The first one I created was a base stylesheet containing the basic structure of site. The other stylesheets containing color changes to the header, headings, and link colors, were created for every month. I saved each of the monthly stylesheets by month number, so September’s stylesheet was saved as 9.css, June’s was 6.css and December’s was 12.css. You can take a look through the archived entries on this site to see the various styling for each month.
Taking Advantage of WordPress Conditional Tags
Wordpress conditional tags are an easy way to tell WordPress to alter various elements within your theme depending on certain conditions. Most early themes for WordPress take advantage of conditional tags to display different content in the sidebar of a page depending on your current location on the site. In order to keep the current month’s look on the front page of my site, but have the individual entries maintain the look of the month it was written I set up a conditional that said if the page is_single() then display the stylesheet of the month it was published. If we are not on a single entry page then display the current month’s stylesheet. Here’s what it looks like:
< ?php if (is_single() ) { ?>
<link rel="stylesheet" type="text/css" href="http://sitename.com/<?php the_time(’n'); ?>.css" />
< ?php } else { ?>
<link rel="stylesheet” type="text/css" href="http://sitename.com/<?php echo date(’n'); ?>.css" />
< ?php } ?>
PHP
Notice the small bit of PHP within the conditional we set up - <?php echo date('n'); ?>? I replaced the name of the imported CSS file with a short snippet of PHP, which in turn generates a numerical value of one through twelve depending on the month, and appends the *.css file extension. This is why I saved my monthly stylesheets by month number. You can read more about the PHP Date/Time functions and decide what format is best for you.
Options
If you are not using WordPress you can still easily accomplish the same switching of stylesheets with some simple javascript or server side methods. Once you are familiar with some the options of the PHP Date/Time functions you can experiment with changing the look of your site at any interval you like.
Awesome, I’m going to try to find a project to use this on!!
keep up the good work!
How cool, I’ll have to make up an opportunity to use this. It’s amazing some of the stuff you can do with wp if you have a bit of imagination… and programming knowledge… and extra time on your hands
Nice! I did something similar awhile back that swapped masthead images depending on the season/month, as it was something clients frequently requested.
Great idea. You inspired me to ceate a weather sensitive CSS. I just need a working weather API.
Just “stumbled” accross your website, saw this article, and wanted to suggest to you and your readers, why bother with creating 13 stylesheets?
As long as your link to a stylesheet contains only valid CSS text your document can be whatever you like. So create ONE php document which echos the CSS you want for a particular time or day, that way you can have 365 different styles in one stylesheet!!! Shaun Inman first showed this to the world, as on his website. He managed to change the backrgound colour 365 shades, dependent of the time of year!!!
Hope that helps you all?
Thats some pretty cool stuff, i have just been mastering the CSS basics at the moment so i think i am a long way off trying anything as advanced as that!