jQuery UI ThemeRoller

ThemeRoller Introduction

ThemeRoller is a web application that provides an intuitive interface for designing and downloading custom themes for jQuery UI. You can visitjQuery UI ThemeRollerto customize themes.

jQuery UI ThemeRoller was designed and developed by a team in Boston,Filament Group, Incand was designed and developed there.

ThemeRoller Interface

The ThemeRoller interface is divided into different panels, which include global font and border-radius settings, widget container styles, interactive states for clickable elements, and various styles for overlays and shadows. These panels allow you to configure various CSS properties, such as font size, color, font weight, background color and texture, border color, text color, icon color, border-radius, and more.

Theme Gallery: Pre-designed Themes

ThemeRoller themes can be viewed via permalink URLs, and it includes a selection of pre-designed themes to choose from. The Gallery can be accessed through the tab bar at the top of the application interface. From the Gallery, you can preview and download themes, or even select a theme and then switch to the "Roll Your Own" tab to make adjustments.

Download Themes

After you finish designing a theme, you can download it for use in your projects. ThemeRoller has a "Download theme" button at the top that generates a zip archive containing all the theme-related files. The images in the downloaded file are generated according to your specifications and saved as high-quality PNG files.

Your theme will include images and CSS that make up a customized version of the jQuery UI CSS framework, including images and CSS for all plugins.

Applying the Downloaded Theme in Your Project

Once you have downloaded the theme and unzipped it, you will see a folder namedthemes. This folder includes the CSS and images required for the theme. Copy the theme folder into your project and link thethemes/all.cssfile.

Creating Custom "ThemeRoller-Ready" Widgets

ThemeRoller generates a customized version of the jQuery UI CSS framework for developing your own ThemeRoller-ready jQuery widgets. The classes generated by this framework are designed to cover common UI design scenarios, including states, icons, and various utility classes.

To learn more about developing with the jQuery UI CSS framework, please see theTheming API documentation。