WebDevLounge | design, development, SEO and wordpress | articles, discussion and community

If you're new here, you may want to subscribe to my RSS feed. Thanks for visiting!

Hello everyone, I’m Adam Roberts – A designer and developer. Today I would like to show you a really simple and effective way of switching style sheets depending on what time it is.

After seeing a new article on Smashing Magazine this morning called, Style Switchers Contest Results, I immediately thought of new way around this. It is especially effective for night and day themes however it is your choice of what you do theme wise.

Ok so let’s begin. What we need is 3 themes, for example, morning.css, day.css and night.css. Before we apply our style switcher, you need to make sure that you have all three of these themes coded and functional.

It is preferred that each theme has it’s own style sheet as well. This way the switcher will function properly. Also please try and make it so you have just 1 index file. As usually, only images will change for a new theme.

We now need to rename your index.html to index.php, as we will be applying a little piece of PHP code for our switcher.

We will be switching the theme depending on the time of day. Which like I said above, it is effective for night and day themes. Here is what we do, and I will try and explain it the best I can.

In your index.php, you should have a piece of code such as,

<link rel=”stylesheet” type=”text/css” href=”” />

Now this is all what we are editing. Notice that I left the href empty. Now for the switcher…

<link rel=”stylesheet” type=”text/css” href=”
<?php
$hour = date(”H”);
if ($hour < 12) echo “morning.css”;
elseif ($hour < 20) echo “day.css”;
else if ($hour < 4) echo “night.css”;
?>”
/>

First we define the hour. The hour of day is determined by the user’s computer.

The rest is simple. If the hour is before 12 noon, then we will use the morning.css stylesheet, however if the hour is before 20:00 (8pm) then we will use the day.css, but if the hour is before 4 (4 am) we will use the night.css stylesheet.

So that says, between 4am and 12 noon we use the morning theme. Between 12 noon and 8pm we use the day theme. And finally between 8pm and 4am we use the night theme.

You can change the hours yourself easily. These figures that I have provided are configured for when the sun rises and falls in the United Kingdom. Other countries might be slightly different, so you change this as you please.

I hope you enjoyed this tutorial, I may eventually make 3 themes and give you a more detailed explanation in the future.

Edit: We need to give full credit to Harry Roberts for this solution!