jQuery UI ThemeRoller
May 08, 2021 jQuery UI
Table of contents
jQuery UI ThemeRoller
Introduction to ThemeRoller
ThemeRoller is a Web application from which jQuery UI can design and download custom themes. You can access jQuery UI ThemeRoller for topic customization.
jQuery UI ThemeRoller was designed and developed by Boston-based Filament Group, Inc.
ThemeRoller interface
There are different panels on ThemeRoller's interface, each with global font and fillet radius settings, widget container styles, interactive states of clickable elements, and various styles of overlays and shadows. These panels allow you to configure a variety of CSS properties, such as font size, color, weight, background color and texture, border color, text color, icon color, fillet radius, and so on.
Gallery: Pre-designed themes
ThemeRoller themes can be viewed via a permanent link URL, which contains a number of pre-designed themes to choose from. T he Gallery is accessible through the tab bar at the top of the app interface. From the Gallery, you can preview and download the theme, even select a theme, and then switch to the Roll Your Own tab to adjust.
Download the theme
When you've designed the theme, you can download it for use in your project. T hemeRoller has a "Download theme" button at the top that generates a zip package that contains all the topic-related files. The images in the download file are generated to your specifications and saved as high-quality PNG files.
Your theme will contain images and CSS, a custom version of the jQuery UI CSS framework that contains images and CSS for all plug-ins.
Follow the downloaded theme in the project
Once you download the theme, after unziping it, you'll see a
themes
T
he folder includes the CSS and images required for the theme.
Copy the theme folder to your project and link the
themes/all.css
page.
Create a custom ThemeRoller-Ready component
ThemeRoller builds a custom version of the jQuery UI CSS framework to develop your own ThemeRoller-ready jQuery component. Classes generated through this framework are designed to provide a common user interface design, including states, icons, and various auxiliary classes.
For more information on the development of the jQuery UI CSS framework, check out the Topicized API documentation.