Cover 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

O'Reilly logo

15.3. Applying a Theme to Non-jQuery UI Components

Problem

Other page components—like content boxes, buttons, and toolbars—are sitting next to jQuery UI widgets and have similar types of interactions and behaviors, but their designs don’t match.

Solution

You can assign Framework classes to non-jQuery UI elements to apply the same theme as ThemeRoller-styled elements. (As a bonus, those elements will automatically update when you apply an updated ThemeRoller theme.)

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

In the previous two recipes we used ThemeRoller to create and download a theme and then wrote a few CSS rules to override default theme styles and make it more closely match our finished design. Now we’ll take it another step further and apply Framework classes to elements in our project so that they coordinate with the jQuery UI widgets and the theme we created.

Step 1: Review available Framework classes to identify those you can apply to your components

Framework classes are part of the jQuery UI theme stylesheet you download when you create ...

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