More than one theme must be applied to your application and appear on a single page. For example, your jQuery UI tabs must be styled according to a primary theme, and widgets within the tab panels must conform to a different theme.
Create a second theme using ThemeRoller, and apply it selectively to widgets or components in your application by associating the new theme with a class, an ID, or other scoping selector during the download process.
The following recipe makes the following assumptions:
You have a basic knowledge of how CSS works and, specifically, how styles cascade, take precedence, and can be scoped using selector classes, IDs, or elements. (For our recommended resources, please refer to the Appendix at the end of this chapter.)
You’re already familiar with how to create and edit a theme using ThemeRoller. (If not, review Recipe 15.1, which describes in detail how to create a theme and apply it to your pages.)
jQuery UI themes are intended to create a consistent look and feel in jQuery UI widgets and other interface components across an entire application, but sometimes the design is more complex, and a different look and feel must be applied to certain widgets depending on where they appear in the application.
In the case of our travel application, let’s say the designer reviews our final design and feels that using dark gray on all clickable elements makes it difficult to distinguish the reservation type ...