Hi

 

Any ideas on how to create a stylesheet variation between day and night?

 

i need to change background colour, a bg image and a font colour.

 

Any clues guys?

You'll need to use some Javascript (if you want to base it on the visitor's time) or PHP (for the server/website/your time) to do this.

 

You could do something like:

 

<?php
$time = date('H'); // Current hour in 24 hour format (eg. 7pm = 19)

if ($time >= 18) { // If the time is greater than or equal to 6pm
echo '<link rel="stylesheet" type="text/css" href="/path/to/css/style-for-night.css">';
} else { // Else show the day style
echo '<link rel="stylesheet" type="text/css" href="/path/to/css/style-for-day.css">';
}
?>

I can't remember where I saw it but I saw a similar thing, where they used the current weather in the servers area from a weather service and displayed a header image dipicting the current weather.

 

I also saw another site which did the same as yours, which I believe was the server time, to show when the company was "shut" so to speak. After 5pm the theme darkened to show it was night time and no one was in.

First one I'm pretty sure is CNN or MSNBC or something, it was a case study on smashing magazine (I think) about transparent PNG's

 

An example of the second one is cokemusic.com

Js version:

 

<script type="text/javascript">
var currentTime = new Date();
if (currentTime.getHours() >= 18) { // Current time is equal to or greater than 6pm
	alert('Night-time');
} else { // Current time is before 6pm
	alert('Daytime')
}
</script>

 

You'll need to change it to add/change CSS yourself. If you use something like jQuery you'll be able to fiddle with CSS very easily.

Found this somewhere. It's apparently how to do it in php.

 

<?php 
// time based Css Swicth
$time = date("H");
$date = date("w");
if (!isset($_GET['css'])) {
if ($time >= 9 && $time < 18 && $date != 0) { ?>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/styles/day.css" type="text/css" media="screen" />
<? } else { ?>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/styles/night.css" type="text/css" media="screen" />
<? }; 
} else { ?>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/styles/<?php echo $_GET['css']; ?>.css" type="text/css" media="screen" />
<? }; ?>

 

Or, for a js alternative you could take a look at this.

Thanks for that Rob,,james and clearcut, i'll have a play and see what i can do

 

 

helpful as ever