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.
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.)
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.
Framework classes are part of the jQuery UI theme stylesheet you download when you create ...