change style sheet based on user's local time?

  • I’m looking for a simple way to change the style sheet depending on the user’s local time.

    I want the ‘day’ style sheet to display from 6am-5pm and the ‘night’ style sheet to display from 5pm-5am.

    I’m assuming I need to use javascript but I’m not too savvy with it. If anybody can help, I’d appreciate it a lot. Thank you.

Viewing 4 replies - 1 through 4 (of 4 total)

  • A little sample to get you started:

    d = new Date();
if( d.getHours() > 5 && d.getHours() < 18 ){
alert('day');
} else {
alert('night');
}

    Something like this in the head element (header.php in your template) might work but it may need a bit of debugging:

    <script type="text/javascript">
d = new Date();
if ( d.getHours() > 5 && d.getHours() < 18 ) {
stlysheet = 'day.css';
} else {
stlysheet = 'night.css';
}
document.write('<link rel="stylesheet" type="text/css" href="' + stylesheet + '" />');
</script>

    Good luck

    Thread Starter cpkid2

    (@cpkid2)

    Thank you. I thought about my situation and realized that I really only needed to change two elements, the header and background.

    So, would it be more elegant/efficient to add a class to the body tag maybe? Then I can just target it like body.night { } and body.night header, etc.

    If so, how would I go about adding a day or night class depending on the time?

    Thread Starter cpkid2

    (@cpkid2)

    I tried something like this but it’s not working. Do you guys see anything wrong w/ it?

    <script>
function setTimesStyles() {
var currentTime = new Date().getHours();
if(currentTime > 5 && currentTime < 17) {
document.body.className = 'day';
}
else {
document.body.className = 'night';
}
}
</script>

    I also have my body tag set up like this:

    <body onload="setTimeStyles();" <?php body_class(); ?>>

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘change style sheet based on user's local time?’ is closed to new replies.