How to apply multiple jQuery UI themes
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>
searched for hours, and finally found the way to do it from the FilamentGroup, complete with tutorial and working examples.
you will have some issues if you apply this technique to ui widgets that overlay and are appended to the body - dialog, datepicker, autocomplete....
in the case of autocomplete, you can do the following to get a parent element with the scoped class - adding the scopped class to the UL of the autocomplete itself is not enough.
jQuery('.autocomplete').autocomplete({
source: function(request, response){
{....}
},
create: function(event, ui) {
jQuery('.ui-autocomplete').wrap('<span class="xxSCOPPEDCLASSxx"></span>');
}
});