O'Reilly logo

jQuery Cookbook by Cody Lindley

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

15.4. Referencing Multiple Themes on a Single Page

Problem

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.

Solution

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.

Note

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 ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required