YouTip

# jQuery UI ThemeRoller ### Introduction to ThemeRoller ThemeRoller is a web application that provides an intuitive interface for designing and downloading custom themes for jQuery UI. You can visit (https://jqueryui.com/themeroller/) to customize themes. jQuery UI ThemeRoller was designed and developed by [Filament Group, Inc](https://www.filamentgroup.com/) in Boston.  ### ThemeRoller Interface The ThemeRoller interface is divided into different panels, which are for 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, weight, background color and texture, border color, text color, icon color, border radius, and so on. ### Gallery: Pre-designed Themes ThemeRoller themes can be viewed via a permalink URL, which includes some pre-designed themes to choose from. The Gallery can be accessed via 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. ### Downloading a Theme Once you have designed a theme, you can download it for use in your project. ThemeRoller has a "Download theme" button at the top that generates a zip file containing all the theme-related files. The images in the download are generated according to your specifications and saved as high-quality PNG files. Your theme will include images and CSS, which together form a custom version of the jQuery UI CSS framework, containing the images and CSS for all plugins. ### Using a Downloaded Theme in Your Project After downloading a theme and unzipping it, you will see a folder named `themes`. This folder contains the CSS and images required for the theme. Copy the theme folder to your project and link to the `themes/all.css` file in your page. ### Creating Custom "ThemeRoller-Ready" Components  ThemeRoller generates a custom version of the jQuery UI CSS framework for developing your own ThemeRoller-ready jQuery components. The classes generated by this framework are designed to provide common user interface design situations, including states, icons, and various utility classes. For more information on developing with the jQuery UI CSS framework, please see the (#).