Style Sheet

Style Sheet Switcher Tutorial - Time of Day

Changes CSS Based on User, Visitor, Client Time
Stylesheet Changer - 3 Styles
Day Stylesheet

This tutorial explains how to change the style sheet based on the user's, or visitor's time of day. It uses a bit of Javascript that displays a selected style sheet based on the visitor's browser time. The browser's time is derived from the local time on the user's computer. It uses a small bit of Javascript, and if the visitor has Javascript disabled, then a default stylesheet is used.

You'll need to know:

  • Basic HTML coding, and linking
  • Style sheet basics
  • How to copy and paste

Tech Tips

  • Try this out and get it working on a test site first.
  • If you're using a visual editor like Dreamweaver to create your HTML pages, you may not be able to see the style sheets applied to your HTML pages, unless the editor sees Javascript. Some editors will display the stylesheet listed in the "noscript" tag below.
  • To see if the style sheets are working properly, view the page in your browser.
  • To see if the style sheets are changing, you'll have to change the time on your computer, then hit the Refresh button on your browser.
  • Correct time and date: www.timeanddate.com

1. Style Sheet Instructions

  1. Remove your current style sheet link in your web page.
  2. Create a folder in the top, or root level of your site and name it stylesheet
  3. In the stylesheet folder, create 3 style sheets and name them:
    1. day.css
    2. night.css
    3. twilight.css

 

2. Noscript Instructions

Add the <noscript> code to the <head> section of your web page. If the users have Javascript disabled, it will display the day style sheet instead.

For Root Level Pages that Are Not in a Folder
<noscript>
<link rel="stylesheet" href="stylesheet/day.css" type="text/css">
</noscript>
For Pages that Are In a Sub-Folder
<noscript>
<link rel="stylesheet" href="../stylesheet/day.css" type="text/css">
</noscript>

 

3. Javascript Instructions

Add the Javascript in orange inside the <head> section of your web page. This is the bit of script that instructs the browser to display a specific style sheet, based on the visitor's time of day. One block is for root level pages, and the other is for pages located in a folder. The only difference in the code is the style sheet links. Use only one block (Root Level or Sub-Folder), not both.

Javascript for Root Level HTML pages - pages that are not in a folder - notice the style sheet links in bold do not have "../" in front. Add the Javascript inside the <head> section of your web page.

<script language="JavaScript">

var d=new Date();
var twi_am_start = 4;
var twi_am_end = 5;
var twi_pm_start = 17;
var twi_pm_end = 18;

if (d.getHours() < twi_am_start || d.getHours() > twi_pm_end)
document.write('<link rel="stylesheet" href="stylesheet/night.css" type="text/css">');
else if (d.getHours() > twi_am_end && d.getHours() < twi_pm_start )
document.write('<link rel="stylesheet" href="stylesheet/day.css" type="text/css">');
else
document.write('<link rel="stylesheet" href="stylesheet/twilight.css" type="text/css">');
</script>

 

Javascript for Sub-Folder HTML pages - pages that are in a folder, not in the main root level - notice the style sheet links in bold have "../" in front. Add the Javascript inside the <head> section of your web page.

<script language="JavaScript">

var d=new Date();
var twi_am_start = 4;
var twi_am_end = 5;
var twi_pm_start = 17;
var twi_pm_end = 18;

if (d.getHours() < twi_am_start || d.getHours() > twi_pm_end)
document.write('<link rel="stylesheet" href="../stylesheet/night.css" type="text/css">');
else if (d.getHours() > twi_am_end && d.getHours() < twi_pm_start )
document.write('<link rel="stylesheet" href="../stylesheet/day.css" type="text/css">');
else
document.write('<link rel="stylesheet" href="../stylesheet/twilight.css" type="text/css">');
</script>

The Time

  1. 4am - 5:59am = twilight.css
  2. 6am - 4:59pm = day.css
  3. 5pm - 6:59pm = twilight.css
  4. 7pm - 3:59am = night.css
  • 4 = 4am
  • 5 = 5am
  • 17 = 5pm
  • 18 = 6pm

To change the style sheet timing, you can edit the Javascript. Just be sure not to add any spaces or delete any code, like the semi-colons after the time. The time is based on 24-hour time.

Can't Get it to Work?

  1. Remove original style sheet links in your html
  2. Check for extra code, incorrect characters, or unwanted spaces in the Javascript
  3. To prevent accidentally copying unwanted styling elements that may break the code, you may want to copy the code, paste and save it in Notepad, copy it from Notepad, and then add it to your HTML page. Because Notepad is a text only editor without formatting, it will remove unwanted/hidden styles. Please do not use Word or Wordpad.
    • Comparison list of Text Editors, including Notepad and TextEdit
  4. Check to see if the problem exists on an online/live version. Upload a test page to your live server, and see if the issue is resolved. Many web site editors like older versions of Dreamweaver may not show the style sheets, or only show the the noscript style sheet, or there may be a problem viewing directly from your local/C drive - file:///C:/... can be problematic.
  5. This is a long shot, but is your Javascript disabled?
  6. Check the style sheet links in the Javascript, and see if their path is correct. The links in the Javascript are in Bold above, and you can edit these accordingly. The style sheet links are similar to an image link.
  • Root Example:
  • href="stylesheet/twilight.css"
  • Sub-folder Example:
  • href="../stylesheet/twilight.css"

Usage

  • Feel free to use the javascript for personal and business use - a credit, or link to us is appreciated, but not required.
  • Linking to this page or citing the content is always a welcome compliment, but please don't plagiarize, republish, or claim the work as your own.
  • This tutorial is for informational purposes only, use at your own risk.
Disclaimer