I think this is just a matter of adding in a snippit of PHP to your template (in your header element) to work out what time of day it is, and based on that add class ('day' and 'night') to your body tag.

I'd use PHP's date function to get the hour of the day and do a simple test on that number.

Then in the stylesheet you do whatever you wanted using the .day and .night classes. You could change the entire theme, not just the background image if you wanted.

That's how I would do it anyway.

If you're going with PHP, keep in mind that you can't get a user's timezone with native PHP functions.

You can attempt to get their IP address and use geolocation to get close. A more thourough Google search will probably help, but a good place to start is IPInfoDB (http://ipinfodb.com).

I haven't used these APIs a ton, so I can't give an accurate review on how well they work.

Thanks everyone...

I believe i found an answer on a Google search... uses php instead of javascript... I will still need to test it.

This method uses a simple PHP file dropped into a folder containing 3 PNG images and is implemented on the page using one line of CSS.

The CSS is:

body {background: url(time.png) top center no-repeat;}

time.png is actually a folder. In fFile Manager create a folder called time.png and drop three PNG images in there called morning.png, day.png and night.png.

How it appears to work is that the PHP script creates an image called time.png from one of the included images depending on the time of day it is.

Then include this PHP script:

<?php
$hour = date('H');
if ($hour < 12 ) {
$image = "morning.png";
}
elseif ($hour < 17 ) {
$image = "day.png";
}
else {
$image = "night.png";
}
$image = imagecreatefrompng( "$image" );
if (!$image) { /* See if it failed */
header("(anti-spam-(anti-spam-content-type:)) image/png");
$im = imagecreatetruecolor (150, 30); /* Create a blank image */
$bgc = imagecolorallocate ($im, 255, 255, 200);
$tc = imagecolorallocate ($im, 0, 0, 0);
imagefilledrectangle ($im, 0, 0, 150, 30, $bgc);
/* Output an errmsg */
imagestring ($im, 1, 5, 5, "Error loading Image", $tc);
imagepng($im);
imagedestroy($im);
die();
}
header("(anti-spam-(anti-spam-content-type:)) image/png");
imagepng($image);
imagedestroy($image);
?>


Any thoughts on the answer I found?

I suppose that could work, but it seems a bit overkill.

If you're going to implement dynamic content based on a user's timezone, I would approach it one of three ways (in descending order of preference):

1. Depending on what your site is, have the user input their timezone (on their profile page perhaps?) and use that info accordingly (PHP or JS solution)

2. Use JS to get the client's timezone offset and calculate their local time that way (not 100% fool-proof, but more efficient than the auto-image generation you mentioned). Just make sure it degrades nicely if the user does not have JS enabled.

3. Use an IP geolocation API via PHP to get the client's timezone.

Also, simply using PHP's native "date" method will only return the timezone of the SERVER; not the client/user.

If you only care about showing the time of day of your location, then most of this is a moot point. Just set the timezone to your area via PHP's "date_timezone_set" and determine the time of day with the date() method. Perhaps add a class to the body so you can specify the right image via CSS (as mesuva mentioned).