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.
-
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.
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.
Albuquerque NM | December 22nd, 2007 at 5:43 pm #
John what an easy way to “decorate” our blogs for the holidays. I can many uses for this. - Ashley
Jermayn Parker | January 15th, 2008 at 10:37 pm #
awesome idea. so easy but oh so effective!!
redwall_hp | January 16th, 2008 at 12:23 pm #
Interesting, though I’d have done it like this instead:
<body <?php if (date("md")=="1225") { echo 'class="date1225"' } ?>>
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 18th, 2008 at 2:38 am #
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 17th, 2008 at 2:03 pm #
Very cool idea!