Timed CSS Stylesheet Switch Using PHP Tutorial

Posted in Tutorials | On 19th January 2010 | 20 Comments


Today I’m going to show you a pretty clever technique for changing the Cascading Style Sheet by time using PHP, this can be a quirky addon for region/country specific sites, and will allow you to experiment and perhaps alter the code to use for different purposes.

I have coded this so it uses 4 stylesheets and changes at 6am, 12pm, 7pm and 11pm.

The whole project is available to download and demo below, here I will break it down and explain its elements.

The PHP Code that does the magic

<link rel="stylesheet" href="<?php

date_default_timezone_set("GMT"); // set to your time zone

$thetime = date("H"); // H means it just grabs the hour in 24 hour format

// this section grabs the correct stylesheet by time, don't alter if you can help it

if($thetime > 00 AND $thetime < 06) { echo "nighttime.css";} // between midnight and 6am
elseif($thetime > 05 AND $thetime < 12) { echo "morning.css";} // between 6am and 12pm
elseif($thetime > 11 AND $thetime < 19) { echo "midday.css";} // between 12pm and 7pm
elseif($thetime > 18 AND $thetime < 23) { echo "gettingdark.css";} // between 7pm and 11pm
elseif($thetime = 23) { echo "nighttime.css";} // 11pm
elseif($thetime = 00) { echo "nighttime.css";} // midnight
?>" type="text/css" media="screen" />

Timezone

Here we are setting the timezone by your location, im my example I have set it to the UK timezone (GMT)

This part is important as if not specified it will grab the server time, which means if the server isn’t based in your country the time will be inaccurate.

date_default_timezone_set("GMT"); // set to your time zone

You can alter this to your timezone, here is a list of supported timezones here: http://www.php.net/manual/en/timezones.others.php and http://php.net/manual/en/timezones.php

Time

This part is straightforward and won’t need to be altered, basically it returns the hour in 24-hour format eg: 23

$thetime = date("H"); // H means it just grabs the hour in 24 hour format

The Main Part

This part makes it all work, using PHP it will grab the correct stylesheet dependant on time, you will notice a crossover on each setting (eg: < 12 then > 11 below), I have done it this way as if I didn’t it would not return a value (eg: < 12 then > 12)

if($thetime > 00 AND $thetime < 06) { echo "nighttime.css";} // between midnight and 6am
elseif($thetime > 05 AND $thetime < 12) { echo "morning.css";} // between 6am and 12pm
elseif($thetime > 11 AND $thetime < 19) { echo "midday.css";} // between 12pm and 7pm
elseif($thetime > 18 AND $thetime < 23) { echo "gettingdark.css";} // between 7pm and 11pm
elseif($thetime = 23) { echo "nighttime.css";} // 11pm
elseif($thetime = 00) { echo "nighttime.css";} // midnight

This section doesn’t need to be altered, but you can change the name of the stylesheets.

Finally

In the download package you will find the stylesheets, images and PHP code to use in your projects.

Demo | Download

McBonio is a full time web designer, blogger and general web lurker. He runs Tropica Web Design, which is a web agency based in Liverpool, UK. You can also catch McBonio at Twitter: @mcbonio

Visit McBonio's website

20 Comments

  • Gilberto Ramos
    January 19, 2010

    wow! very simple and nice!! thanks…!

  • Inside the Webb
    January 19, 2010

    This is wicked cool! I’ve seen some cool tutorials in my time, but this really takes the cake as one of the best I’ve seen recently. Good luck in your future posts, I’ll be back to check ‘em out

  • Alan
    January 19, 2010

    Two thoughts:

    1. Your if statement can be shortened (perhaps you were just making it obvious what all the cases might be):

    if($thetime > 05 AND $thetime 11 AND $thetime 18 AND $thetime < 23) { echo "gettingdark.css";} // between 7pm and 11pm
    else { echo "nighttime.css";} // between midnight and 6am

    2. Since 4 or more files are harder to maintain, it might be better to use one css file that uses a snippet of PHP to assign the image. Just change the if statement to assign a variable and then the img tag uses
    src="”
    and
    title=”"

  • Alan
    January 19, 2010

    My comments got mangled

    1 was to check for the other times and then just say else night time.

    2. the point was to use to use the if to assign $TimeOfDay and then echo it in the image tag, therefore needing only one css file.

  • McBonio
    January 19, 2010

    Thanks Alan, it probably could be a little shorter I must admit!

    I used multiple CSS files as potentially the entire layout could be changed rather than various elements on page, my example only shows one change as I felt designing 4 unique themes was a little OTT for a quick tutorial.

    Thanks for the input :)

  • Loz
    January 20, 2010

    Another possibility (if you wanted to stick with a single stylesheet) would be to simply change the id or class of your body with php, and then just prepend your css definitions with the class (and have no definition for default) eg:

    #header {…} /*default header css*/
    body.nighttime #header {…} /*used on top of the default – replace only the properties that need to change*/

    Ive used a similar approach to allow switching site styles with javascript client-side (not really the problem described in the article, but similar). In that case I have a separate css file called styles.css that defines just the non-default modifications. This may not be a sensible move, but it made sense at the time, and is WIP.

    Another possibility for cleaning up the printout:
    //specify endtime of the period
    $timeStyles = array(
    05=>”nighttime.css”,
    11=>”morning.css”,
    18=>”midday.css”,
    22=>”gettingdark.css”,
    24=>”nighttime.css”);

    //then print out the correct filename
    foreach($timeStyles as $endHour=>$fileName) { if($thetime <= $endHour) { echo $fileName; break; } }

    …I just knocked this up – dunno if it is cleaner, nicer, more sensible, or even works – just a random idea.

    (also dunno of angle-brackets will be lost on posting…dont beat me if it looks weird ;) )

  • McBonio
    January 20, 2010

    Good idea Loz, looks like it would work to me!

    Definitely another good take on it, thanks for the input :)

  • Hans Kuijpers
    January 21, 2010

    Nicely done… December 2008 Yootheme did the same on their Joomla template Daylight.
    http://demo.yootheme.com/dec08

    The script to read time and set CSS can be found in
    http://demo.yootheme.com/dec08/templates/yoo_daylight/lib/js/template.js.php”
    With this script they add a class to a tag.
    So … instead of body, you get body. -> body.noon body.morning

    With this, you can reduce the css files from 4 to 1… It also reduces the HTTP requests.

  • McBonio
    January 21, 2010

    Thanks Hans, very nice example there!

  • Andrius
    January 21, 2010

    Very nice and clear! Thank You!

  • Ben
    January 21, 2010

    Cool. I saw something similar which switched stylesheets according to the weather using the Yahoo API. Worked really nicely.

  • Davide Michel Morelli
    January 22, 2010

    Cool. I will insert it into my provate next project. Tnx.

Trackbacks

  • Davide Michel Morelli

    Cool. I will insert it into my provate next project. Tnx.

  • Ben

    Cool. I saw something similar which switched stylesheets according to the weather using the Yahoo API. Worked really nicely.

  • Andrius

    Very nice and clear! Thank You!

  • McBonio

    Thanks Hans, very nice example there!

  • Hans Kuijpers

    Nicely done… December 2008 Yootheme did the same on their Joomla template Daylight.
    http://demo.yootheme.com/dec08

    The script to read time and set CSS can be found in
    http://demo.yootheme.com/dec08/templates/yoo_daylight/lib/js/template.js.php”
    With this script they add a class to a tag.
    So … instead of body, you get body. -> body.noon body.morning

    With this, you can reduce the css files from 4 to 1… It also reduces the HTTP requests.

  • McBonio

    Good idea Loz, looks like it would work to me!

    Definitely another good take on it, thanks for the input :)

  • Loz

    Another possibility (if you wanted to stick with a single stylesheet) would be to simply change the id or class of your body with php, and then just prepend your css definitions with the class (and have no definition for default) eg:

    #header {…} /*default header css*/
    body.nighttime #header {…} /*used on top of the default – replace only the properties that need to change*/

    Ive used a similar approach to allow switching site styles with javascript client-side (not really the problem described in the article, but similar). In that case I have a separate css file called styles.css that defines just the non-default modifications. This may not be a sensible move, but it made sense at the time, and is WIP.

    Another possibility for cleaning up the printout:
    //specify endtime of the period
    $timeStyles = array(
    05=>”nighttime.css”,
    11=>”morning.css”,
    18=>”midday.css”,
    22=>”gettingdark.css”,
    24=>”nighttime.css”);

    //then print out the correct filename
    foreach($timeStyles as $endHour=>$fileName) { if($thetime <= $endHour) { echo $fileName; break; } }

    …I just knocked this up – dunno if it is cleaner, nicer, more sensible, or even works – just a random idea.

    (also dunno of angle-brackets will be lost on posting…dont beat me if it looks weird ;) )

  • McBonio

    Thanks Alan, it probably could be a little shorter I must admit!

    I used multiple CSS files as potentially the entire layout could be changed rather than various elements on page, my example only shows one change as I felt designing 4 unique themes was a little OTT for a quick tutorial.

    Thanks for the input :)

  • Alan

    My comments got mangled

    1 was to check for the other times and then just say else night time.

    2. the point was to use to use the if to assign $TimeOfDay and then echo it in the image tag, therefore needing only one css file.

  • Alan

    Two thoughts:

    1. Your if statement can be shortened (perhaps you were just making it obvious what all the cases might be):

    if($thetime > 05 AND $thetime 11 AND $thetime 18 AND $thetime < 23) { echo "gettingdark.css";} // between 7pm and 11pm
    else { echo "nighttime.css";} // between midnight and 6am

    2. Since 4 or more files are harder to maintain, it might be better to use one css file that uses a snippet of PHP to assign the image. Just change the if statement to assign a variable and then the img tag uses
    src="”
    and
    title=”"

  • Inside the Webb

    This is wicked cool! I’ve seen some cool tutorials in my time, but this really takes the cake as one of the best I’ve seen recently. Good luck in your future posts, I’ll be back to check ‘em out

  • Gilberto Ramos

    wow! very simple and nice!! thanks…!