17

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.

Samuel Liew
  • 76,741
  • 107
  • 159
  • 260
Derek Adair
  • 21,846
  • 31
  • 97
  • 134
  • Do you mean, switch style sheets completely or use bits and pieces at the same time from different sheets? – dpmguise Nov 22 '10 at 21:43
  • I'm not quite sure what you want to do. Ideally you only need one theme, at least that's the idea behind it. – Daff Nov 22 '10 at 21:46
  • @ dpmguise: I mean mix them aka bits n pieces. – Derek Adair Nov 22 '10 at 21:49
  • @ daff: I understand the idea and benefit to the entire CSS framework. But I need more flexibility. I'd like to be able to change, for example, the color of a button... ideally in a spin-off theme like ui-button-2 or something... i dunno. – Derek Adair Nov 22 '10 at 21:50

3 Answers3

31

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>
Chris Laplante
  • 29,338
  • 17
  • 103
  • 134
10

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>');
    }
});
user406905
  • 1,418
  • 15
  • 16
5

searched for hours, and finally found the way to do it from the FilamentGroup, complete with tutorial and working examples.

Matthew Hegarty
  • 3,791
  • 2
  • 27
  • 42
amos
  • 59
  • 1
  • 1