Web DevCenter
oreilly.comSafari Books Online.Conferences.
MySQL Conference and Expo April 14-17, 2008, Santa Clara, CA

Sponsored Developer Resources

Web Columns
Adobe GoLive
Essential JavaScript

Web Topics
All Articles
Scripting Languages

Atom 1.0 Feed RSS 1.0 Feed RSS 2.0 Feed

Learning Lab

Essential JavaScript

Creating Themes with CSS and JavaScript


You probably have already heard about themes, but you might not know how to incorporate them into your own site.

Commonly, a theme refers to a set of graphics, color, and layout definitions that can be applied to a user interface to give it a specific look and feel. A "theme-able" application lets a user select between different looks of this application.

A well-known representative is Winamp or Netscape 6. The concept of themes is a relatively new and important development in the evolution of modern GUI applications. Themes give users the ability to choose or create individual interfaces easily for enabled applications without the need to recompile them. You might even consider this as an end-user related aspect of the growing open-source idea.

However, back to some Essential JavaScript and web application development. Clean markup, a set of style sheets, some cookie crumbs, and a pinch of JavaScript will let your visitors choose between different looks of your site and store this as their preference. However, even if you're not interested in doing this, you might read on to learn a little more about "good style."

System requirements

Basically, you only need a very basic set of technologies for the solution: some CSS support and a working JavaScript engine. This means you can run our script in, for example, both Netscape Navigator and Microsoft Internet Explorer versions 4 and up, Mozilla, Opera 4 and up, and Konqueror.

The drawback is that it may not be possible to use CSS in full effect for older 4.x platforms because of erroneous and incomplete CSS support. As a rule of thumb you should only try it with the newest browsers available (IE 5.5, Netscape 6, Opera 5, and Konqueror). The RichInStyle site provides a good list of CSS bugs and support.

Some background

Basically any application has to match one important prerequisite to switch between different themes: it must separate the data of the application -- the model -- from the view of the data. Both components are connected and controlled by a controller.

In terms of OOP, this is called the model-view-controller (MVC) concept, Java's GUI toolkit Swing is probably the most famous representative.

Unless you're totally new to web development, this concept should sound familiar to you. HTML and XML-based languages are designed to give structure to information, allowing you to form a model of your data. In addition to that, you can define the presentation -- the view -- of any element using CSS. JavaScript is the active glue between the two static components. Hosted in a browser, it forms the controller component.


After identifying the components, let's specify their roles in relation to our task:

  • Model -- HTML/XML: You form a model of your data in your HTML documents. As you're working with textual data in HTML, this actually means to structure your text logically -- you use paragraphs, tables, or lists to express relations between individual elements. Keep in mind that the graphical representation is actually just a side-effect of your structural markup and the default style used. With XML, you have to define a visual representation, as elements of an XML-based language don't have a default rendering in your browser (the only exception is Internet Explorer 5.x, which gives you a default tree view of an XML document). For a clean data model, you must not pollute your documents with presentational markup elements like <b>; you should stick to elements like <strong>. Don't use well-known elements and attributes that give control over the presentation of a document. These are marked as deprecated in HTML 4.01 (which means that they are evil and will be removed in following specifications) and must be replaced by equivalent CSS definitions.
  • View -- CSS: With CSS, you can specify the complete visual appearance of the elements of supported languages. In conjunction with HTML, you can define a different graphical presentation for all elements, which would use some default view instead (like blue underlined links). To separate the model and the view, we need a mechanism to link between both components. This is provided through HTML's <link> element (see below). A style sheet file which holds the complete definition of the graphical representation is nothing more than a theme file. For activation, we only need one more component that controls everything.
  • Controller -- JavaScript: As mentioned before, JavaScript is the active component in-between the two other parts. For our task, it must be the controller's duty to identify a desired theme and to switch to it dynamically. As we also want to store a selected theme, we'll also need JavaScript to read and write cookies.


1. Prepare your documents

As explained above, your HTML files should only contain structural markup after the first step. A good place to learn more about separating model and presentation is Jakob Nielsen's UseIt site. Other great places to start are pages about accessible design, such as the Web Content Accessibility Guidelines and the accompanying Techniques for Web Content Accessibility Guidelines.

2. Create themes

This step assumes at least some basic knowledge of the attributes supported in CSS. If you're new to CSS, you should read some introductory material first.

After organizing your information, you're ready to give it a visual representation. You can define styles for a certain element type, classes of elements, and individual elements, and apply them using CSS selectors. With CSS, you can also define elements to become invisible, this allows you to have even greater control over your layouts. It's especially important to identify all parts you want to give distinct views in different themes and to use a clever naming system.

Pages: 1, 2

Next Pagearrow