Time Sensitive CSS Switcher (Yes! You Can Change Styles Based on Time of Day!)
Mar 8 2007
So, I began posting in various forums, hoping to find someone to help me. Still, no luck. I was beginning to think I would have to abandon the idea.
But I just couldn’t let it go. I was like a dog with a bone. I kept searching…hoping that somehow I would find a buried treasure somewhere online. I was about to give up when I decided to ask one of my coworkers, a web programmer. I felt guilty asking for his help on a personal project, but I got over it!
Sure enough, in just a few minutes, he whipped out some code and told me to give it a try. And it worked! I was giddy. I awaited the turn of the hour, so I could see the magic in action. At 3 pm, I hit refresh, and voila. The stylesheet changed from my blue “noon” theme, to the blue/orange “afternoon” theme.
I have six different stylesheets. See the thumbnails at right.
- From 5 am to 8 am, it displays the “sunrise” theme.
- From 8 am to 12 pm, it displays the “morning” theme.
- From 12 pm to 3 pm, it displays the “noon” theme.
- From 3 pm to 6 pm, it displays the “afternoon” theme.
- From 6 pm to 9 pm, it displays the “sunset” theme.
- And finally, from 9 pm to 5 am, it displays the “twilight” theme.
Here’s the code I used to make it happen:
<noscript><link rel="stylesheet" href="tree_sunset.css" type="text/css"></noscript>
Before I go, I must give credit to that coworker I was talking about. His name’s Fidel. Check out his website at http://www.eriwebdesigns.com