Seasonal CSS

With the changing seasons and the multitude of holidays some also change their sites design to fit. From winter and summer themes, too night and day, to Christmas and Valentines. But changing a sites look can be a chore, especially if you’re doing it frequently. But thats where CSS finds a perfect application, changing the entire look of your site with one file is certainly alot easier then the alternative. And now there are ways to have your site automagicly change with the times on its own.

Here’s the easiest way to manage the holidays automatically via the body tag. Anything under the body tag can be manipulated with secondary characteristics based on the presence of lack of a specific body class.

  1. In your style sheet create styles based on the date in addition to the regular style for the item. In this example we’ll use Christmas.

    .container {
    text-align: left;
    width:770px;
    margin:0 auto; padding: 0px;
    background: #000000;
    }

    .date1225 .container {
    background: #FFFFFF;
    }

    This will change the background colour of the container div from what would normally be black to white on December 25th. Link colours and any other item you want to change can be done the same way, just copy the class name youy want to add a holiday style too, add the date class in front of it, and specify the changes.

  2. Now place a bit of php in the body tag to print out the date as 1225. I’ve added date in front of the numbers just as a personal preference.

    <BODY class="date<?php echo date("md"); ?>">

    The result of that is <BODY class="date1225"> if the day is the 25th of December.

This is ideal because you share a common style through the holidays with consistent padding and widths, while still changing specific items to be more festive without the hassle of several style sheets. The style sheets will also be cached for repeat visitors helping your site load faster.

5 Comments

  1. Albuquerque NM December 22, 2007
  2. Jermayn Parker January 15, 2008
  3. redwall_hp January 16, 2008
  4. andreic January 17, 2008
  5. Edwin February 17, 2008