Treehouse: Grow your CSS skills. Land your dream job.

Time-based Design

  • # April 14, 2009 at 12:32 pm

    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. (
    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.

    # April 15, 2009 at 9:57 am

    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.

    # April 16, 2009 at 7:09 am

    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!


    # April 16, 2009 at 2:08 pm

    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:

    < ?php
    // If the time is past seven O'clock then use the night stylesheet instead!
    if (date('G') > 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:

    < ?php

    // 4.166 is 100 divided by 24 hours.
    $_opacity_level = round( 4.166 * date('G'))


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

    # September 17, 2009 at 2:41 am

    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.

    # September 20, 2009 at 2:52 pm

    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

    # September 21, 2009 at 12:53 pm

    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.)

    # October 16, 2009 at 6:41 am

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

    # October 28, 2009 at 10:18 pm

    i did it for a client:

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

    # October 28, 2009 at 10:19 pm

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

    # November 10, 2009 at 10:54 am

    It sounds great.

    # November 22, 2009 at 7:24 pm

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

    # February 9, 2010 at 11:52 pm

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

Viewing 13 posts - 1 through 13 (of 13 total)

You must be logged in to reply to this topic.