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.2. Overriding jQuery UI Layout and Theme Styles

Problem

The customized (or standard gallery) theme you created in ThemeRoller, downloaded, and referenced in your project is a partial match to your target design but doesn’t match exactly. You need to modify the styles, but at the same time you want to ensure that edits to these styles don’t make it difficult for you to upgrade to newer versions of jQuery UI scripts and CSS.

Solution

Create custom override styles, scoped to the components that need additional non-ThemeRoller styling, and structure them so that they don’t conflict with or overwrite any standard jQuery UI CSS files.

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

Each jQuery UI widget is styled to work out of the box when you download the jQuery UI scripts and a theme stylesheet; no changes to the CSS are necessary to incorporate the widget or styles into your site. But it’s possible that the styling may not exactly match the design conventions established in your project. For example, you may want to reduce the padding or use a custom ...

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