PureNews

PureNews is an amazingly sleek and powerful news theme with unlimited color variations.

View full feature list Check out the live demo Buy this theme today

Seasonal CSS

Posted by on 22nd Dec 2007 | 5 comments

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.


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.

5 comments - Leave a reply
  • Posted by Albuquerque NM on 22nd Dec 2007

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

  • Posted by Jermayn Parker on 15th Jan 2008

    awesome idea. so easy but oh so effective!!

  • Posted by redwall_hp on 16th Jan 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.

  • Posted by andreic on 17th Jan 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 ;)

  • Posted by Edwin on 17th Feb 2008

    Very cool idea! :)