Time-based Design

[lonetraceur]

I was just curious if anyone knows of any sites/blogs that change design depending on the time and/or date?
On my blog I setup a very simple piece of PHP/CSS code that changes the entire colour palette and background images depending on it being after or before 7pm. (http://www.parkourgenerations.com/blog)
The only one I’ve come across is the themes for iGoogle/gMail…

I think this is a possible avenue for a lot of development potential. With some basic algorithms i’m sure you can gradually change a site palette by manipulating a core group of CSS values that control the colour scheme… This I think would bring a whole new meaning to a dynamic site! Also, just thinking out-loud, but other things to alter could be opacity levels and images.

If anyone is curious about the PHP/CSS code, let me know and i’ll post it up.

[keirk]

Yes I’ve seen a few sites that use the idea …

Question would you use the clients time or your own server time? Also would find local sunrise/set times? As you’d want it to use the night them when it was actually night – ie here in the UK its dark around 7.30pm at the moment – but in Holland that would be around 8.30pm ….

Cool idea but its get complicated …

I did see a site that used yahoo weather to pull local weather conditions for his area and customised the design around that …. that was cool. But ultimately pointless.

[bor003]

That sounds very cool!
Can you show us the code that you used to do that as it might be useful one time… you never no, also I just want to no how it was done!

Regards

[lonetraceur]

Its about as easy as you can get really… And several methods can be used. But by far the easiest would be to create two different CSS stylesheets each with a different colour scheme and switch between the two depending on what the time is…

Code would look something like this:

Code:

19 || date(‘G’) < 7) { echo '‘;
} else {
echo ‘‘;
}
?>

The value of date(‘G’) could be used for many things… for instance, you could control the opacity of an image or a coloured div by using this value.

For instance, it might look something like this:

Code:

You can see that depending on the date, the opacity level of #background_image is changed… :) Simple.

[loraindeniso3]

A design method for non-time based tracking controller of mobile robots is presented. The new design method converts a controller designed by traditional time-based approaches to a non-time based controller using any given action reference.

[Sumeet Chawla]

I think you can check the user’s ip address and then depending on that calculate his time line and then change the theme according to that? Its an idea hehe

[blue642]

neat idea, I have seen this a few times with different iterations, incluidng a few weather examples.

What I am curious about is why your Salutation with the calendar picter only shows 5 rows of dates (there were 7 days in a week last I checked.)

[silvers]

i really like the idea of changing look for time. thanks for the code. i might experiment with this now! :)

[dcp3450]

i did it for a client:
http://wingedpixel.web44.net/NewZubo

it has 4 states based off user time, morning, afternoon, evening, and night.

[dcp3450]

I also would like to note this is an old site I made before I learned some pretty hard design and dev lessons.

[goddy128]

It sounds great.

[dcp3450]

use javascript so you use the clients time not the server.

[desizn104]

Wait who knows the answer. Want to know the same.

[Author]

Posts