jQuery UI ThemeRoller


Introduction to ThemeRoller

ThemeRoller is a web application that provides an intuitive interface for designing and downloading custom themes with jQuery UI. You can visit jQuery UI ThemeRoller for theme customization.

jQuery UI ThemeRoller is designed and developed by Filament Group, Inc in Boston.

9.png

ThemeRoller interface

The ThemeRoller interface is divided into different panels. Each panel is the global font and corner radius settings, widget container style, clickable Interactive states of elements, and various styles of overlays and shadows. These panels allow configuring various CSS properties such as font size, color, weight, background color and texture, border color, text color, icon color, corner radius, and more.

Theme Hall (Gallery): Pre-designed themes

ThemeRoller themes can be viewed through the permanent link URL, which contains some pre-designed themes to choose from. The Gallery can be accessed via the tab bar located at the top of the application interface. From the Gallery, you can preview and download themes, and even select a theme and switch to the "Roll Your Own" tab to make adjustments.

Download Theme

After you design the theme, you can download the theme to use in your project. ThemeRoller has a "Download theme" button at the top, which can generate a zip archive containing all theme-related files. The images in the download are generated to your specifications and saved as high-quality PNG files.

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

Follow the downloaded theme in your project

Once you download the theme, after unzipping it, you will see a folder called themes. This folder contains the CSS and images required by the theme. Copy the theme folder to your project and link the themes/all.css file in the page.

Create a custom "ThemeRoller-Ready" component

10.png

ThemeRoller generates a customized version of the jQuery UI CSS framework for developing your own ThemeRoller-ready jQuery component. The classes generated through this framework are designed to provide common user interface design conditions, including states, icons, and various auxiliary classes.

For more information on the development of the jQuery UI CSS framework, please view the Theming API documentation.

ThemeRoller Link

←
→