ThemeRoller

ThemeRoller is a custom tool written with jQuery and PHP. It allows us to visually produce our own custom jQuery UI theme and package it up in a convenient, downloadable archive, which we can drop into our project with no further coding (other than using the stylesheet in a HTML <link> element of course).

ThemeRoller was created by Filament Group, Inc. and makes use of a number of jQuery plugins released into the open source community. It can be found at http://ui.jquery.com/themeroller.

ThemeRoller is certainly the most comprehensive tool available for creating your own jQuery UI themes. We can very quickly and easily create an entire theme comprised of all of the styles needed for targeting elements, including the images we'll need.

If you looked at the index.html file a little earlier on then the ThemeRoller landing page will instantly be familiar as it shows all of the UI widgets on the page, skinned with the default smoothness theme.

The page features an interactive menu on the left that is used to work with the application. Each item within the menu expands to give you access to the available style settings for each part of the widget, such as the content and the clickable elements.

Here we can create our custom theme with ease and see the changes instantly as they are applied to the different visible parts of each widget on the page:

When you're not feeling particularly inspired while creating a theme, there is also a gallery of preconfigured themes that you can instantly use to generate a fully configured theme. Aside from this convenience, the best thing about these preselected themes is that when you select one, it is loaded into the left menu. Therefore, you can easily make little tweaks as required:

Without a doubt, this is the best way to create a visually appealing custom theme that matches the UI widgets to your existing site, and is the recommended method of creating custom skins.

Installing and using the new theme is as easy as selecting or creating it. The Download theme button in the above screenshot takes us back to the download builder, which has the CSS and images for the new theme integrated into the download package.

If it's just the new theme we want, we can deselect the actual components and just download the theme. Once downloaded the css folder within the downloaded archive will contain a folder that has the name of the theme. We can simply drag this folder into our own local css folder, and then link to the stylesheet from our own pages.

We won't be looking at this tool in much detail throughout the book. We'll be focusing instead on the style rules that we need to manually override in our own stylesheet to generate the desired look of the examples.