Style Sheet

Style Sheet Switcher Tutorial - Time of Day

Changes the Style Sheet Based on the User's Time
Stylesheet Changer - 3 Styles
Day Stylesheet

The Javascript displays a selected style sheet based on the visitor's browser time. The browser time is derived from the local time on the user's computer.

You'll need to know:

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

 

  • Free for personal and business use
  • A credit or link back to us would be great, but it's not required

Tech Tips

  • Try this out and get it working on a test site first.
  • Create 1 style sheet that works well, copy it, then create the other 2 style sheets based on the original.
  • 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:49pm = day.css
  3. 5pm - 6:59pm = twilight.css
  4. 7pm - 3:39am = night.css

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 styles. Please do not use Word or Wordpad.
    • Comparison list of Text Editors, including Notepad and TextEdit
  4. 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"

disclaimer
Disclamer