Web DevCenter
oreilly.comSafari Books Online.Conferences.
Sign In/My Account | View Cart   
Articles Weblogs Books School Short Cuts Podcasts  
MySQL Conference and Expo April 14-17, 2008, Santa Clara, CA

Sponsored Developer Resources

Web Columns
Adobe GoLive
Essential JavaScript
Megnut

Web Topics
All Articles
Browsers
ColdFusion
CSS
Database
Flash
Graphics
HTML/XHTML/DHTML
Scripting Languages
Tools
Weblogs

Sites
Beautiful Code
Databases
Digital Media
Emerging Telephony
Inside Aperture
Inside Lightroom
Inside Port 25
InsideRIA.com
LinuxDevCenter.com
MacDevCenter.com
ONJava.com
ONLamp.com
Apache
BSD
MySQL
PHP
Python
Perl.com
Ruby
SysAdmin
What Is…
WindowsDevCenter.com
XML.com

Atom 1.0 Feed RSS 1.0 Feed RSS 2.0 Feed

Learning Lab



O'Reilly Network Script Library -- Javascript

Creating Themes With JavaScript and CSS

Language: JavaScript

Download the files for this script (zip format)

A clean separation of structure and presentation allows you to give your pages a user selectable look by applying different style sheets to the same pages. For first-time visitors this script selects a default style sheet, after selecting a favorite theme its name is stored in the cookies database.

Instructions

In the Zip file you'll find the JavaScript funtion and an example page which lets you choose between two different themes. For using the function you only have to import it into your documents and make sure a default style sheet is used for users with JavaScript disabled:

<script src="/themes.js"></script>
<noscript><link href="/styles/default.css" type="text/css" rel="stylesheet"></noscript>

Before you can actually use it you probably have to adjust three global variables inside the script:

  • THEMES_FOLDER_PATH, contains an absolute path to your style sheets folder
  • DEFAULT_THEME, contains the name of the default theme and must correspond to the name you used above as default.

For complete instructions and a discussion of the technical backgrounds please refer to the complete Essential JavaScript article.