Chapter 7. Theming and styling applications with jQuery UI
This chapter covers
- Using the jQuery UI themes
- Building custom themes with ThemeRoller
- Styling with the jQuery UI CSS framework
We’ve discussed the widgets in jQuery UI and how they work, but we’ve yet to discuss an important part of any set of UI widgets: how they look.
jQuery UI includes a theming system that makes it easy to apply a consistent look to all widgets. The library includes 24 prebuilt themes, as well as an online tool for customizing them.
The library’s theming system is implemented as a series of CSS class names, collectively known as the jQuery UI CSS framework. The class names in the CSS framework let you create themeable components, as well as perform a number of common web development tasks such as styling error messages, using any of the jQuery UI icons, and styling widgets based on their state. We’ll discuss what these class names are, how to use them, and the powerful things you can do with them.
Each individual widget uses a separate set of class names to allow for widget-specific customization. We’ll end the chapter by looking at what widget-specific class names are available and how they work.
Before digging into the jQuery UI CSS class names, let’s look at how to use the themes built in to jQuery UI.