|MySQL Conference and Expo April 14-17, 2008, Santa Clara, CA|
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.
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.
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.
After identifying the components, let's specify their roles in relation to our task:
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.