Basics of the CSS3’s ThemeRoller - dummies

Basics of the CSS3’s ThemeRoller

By John Paul Mueller

jQuery and jQuery UI are relatively complex libraries that provide a substantial amount of CSS3 customization. The problem is that many developers have no idea how to perform the required customization and probably wouldn’t have time to do it if they did.

The overall purpose of ThemeRoller is to simplify the task of customizing the appearance of the effects and widgets provided by these two libraries so that you can achieve a distinct appearance without a lot of work. In fact, there are methods of using these libraries so you don’t have to do any work at all.

However, using ThemeRoller has other, less obvious benefits. For example, by using ThemeRoller you can give your users access to multiple themes without much additional work at all. All you really need to do is provide a means of selecting a different link site for the required theme — the one that the user wants.

Providing access to multiple themes makes it possible to address all sorts of user needs, such as making it possible for colorblind users to see the page with greater ease.

Using ThemeRoller also helps you better understand jQuery and jQuery UI. The themes you create include demonstrations of all major features so that you can see them at work. It helps to see the features using the theme that you’ve chosen so that it’s easier to make tweaks.

One of the handier features is a listing of the framework icons. You can hover your mouse cursor over an icon to see what it is called as part of jQuery UI.


jQuery and jQuery UI become even more powerful when you add other plugins to them. These libraries are popular enough that you can probably find a plugin for every need. Check out the list of plugins. The themes you create with ThemeRoller will work with all of the available plugins unless the plugin implements some special (breaking) functionality.

The ThemeRoller interface consists of the main page and a number of configuration pages. The main page contains links to other jQuery UI functionality along the top, a ThemeRoller-specific menu along the left side, and examples of the various jQuery UI widgets in two columns on the right.


The ThemeRoller menu contains general options across the top (such as creating custom themes using the Roll Your Own option). The menu content changes depending on the tab you select. This is the content of the Roll Your Own tab.


The Help tab provides an overview of the purpose of ThemeRoller. It also provides links to the two main ways you can use ThemeRoller: to create custom themes or to use predefined themes.

Later in the help section, you see information regarding plugin usage and the recommendation to read the CSS-specific information about jQuery UI before creating a new plugin. All plugin developers are supposed to test any of their applications that use themes to ensure that they work with ThemeRoller.

It’s important to read the Help tab because otherwise you might end up spending hours attempting to fix an unfixable problem. For example, the Help tab tells you that the rounded corners won’t work in Internet Explorer versions 6 and 7 because these versions don’t provide the required support.

The corners will still appear, but they’ll be square instead of round. Without checking the Help tab, you might spend all day trying to correct this problem.