Cover by Cody Lindley

Safari, the world’s most comprehensive technology and business learning platform.

Find the exact information you need to solve a problem on the fly, or go deeper to master the technologies and skills you need to succeed

Start Free Trial

No credit card required

O'Reilly logo

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

Find the exact information you need to solve a problem on the fly, or go deeper to master the technologies and skills you need to succeed

Start Free Trial

No credit card required