Question

Does anyone have any techniques/tips/tricks to help me organize and implement multiple jQuery UI themes in one application?

I have resulted to using !important as it seems to be the surest way to force style overrides – but this method is not very desirable.

Answer 1

Yes, but it depends on what you mean.

Let’s say you want element A to be styled with Theme X, and element B with Theme Y. jQuery Theme Roller has this feature built in. When you go to download a theme (here), click Advanced Theme Settings on the right. Here, you can set the “CSS Scope”. This will let you apply the jQuery UI classes (i.e. ui-corners-all, etc.) from a specific theme. Here is the description they give for this option:

This field allows you to specify a CSS
scope to limit your theme to a
particular portion of a page. This is
helpful when using multiple themes on
a page. If you don’t provide a CSS
scope, your theme will apply to all UI
elements on a page.

In most situations, you won’t need to
specify a CSS scope. Please Note: If
you provide a CSS scope, you will not
get an example page included in your
download.

You can also change the Theme Folder Name:

This field allows you to specify a
name for the theme folder in your
download. This is helpful if you plan
to use multiple themes on a page. It
defaults to “theme”.

If, however, you want to create a brand new theme, borrowing bits and pieces from several themes, you have two options: edit the CSS and image files yourself (not recommended), or use the Theme Roller tool to create your own.

How to Use:

CSS Scope is just a CSS selector. Let’s say that theme X should apply only to all elements with class aClass. In this case, your CSS Scope would be .aClass. So, if you want to add rounded corners from theme X to an element (assuming your CSS Scope has been set to .aClass), your HTML would like something like this:

<div class='ui-rounded-corners aClass'>
    Content    
</div>