Seasonal CSS

By John Leschinski | CSS

Dec 22

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.

About the Author

John Leschinski is the creative director and founder of Leschinski Design. John's skill and talent is sought after by large and small companies and organizations, both local to the Rainy River district, London Ontario, and globaly. His experience and knowledge are also used in classrooms to groom the next generation of web developers and business seminars discussing e-commerce and the value of good design.

Albuquerque NM December 22, 2007

John what an easy way to "decorate" our blogs for the holidays. I can many uses for this. – Ashley

Jermayn Parker January 15, 2008

awesome idea. so easy but oh so effective!!

redwall_hp January 16, 2008

Interesting, though I'd have done it like this instead:

<code>

<body <?php if (date("md")=="1225") { echo 'class="date1225"' } ?>>

</code>

This way, the class will only be added if it's December 25. If you do it the way in the article, then you'll have a different class echoed every day. Though there's no real reason why that's bad (that I can think of), I just think it's a little odd.

andreic January 17, 2008

Like someone above me said, you can decorate/style your website for different occasions way in advance with this. I will start by making a diff class for 14th of Feb, then 1st of March, and so on

Bunch of thanks for this 😉

Edwin February 17, 2008

Very cool idea! :)

Comments are closed