How to apply CSS theme to only a specific jQuery-UI element?

Question

I have a web site already build with my own CSS theme. I'm using jQuery UI "tabs" widget but no CSS from jQuery-UI.

Now, I'm trying to add the "Date Picker" widget in one of my page. It would be great if I could reuse jQuery-UI default theme which is just fine.

The problem is that the date picker theme is also applied to my tabs CSS. For example the "ui-widget" css properties is applied to both date picker and tabs elements.

I can't seem to find a way to apply the css properties to only the date picker. I can't see a "super selector" that only applies to the date picker DIV.

What would be the best way to handle this?

---

[EDIT] The datepicker widget is really the problem. I cannot apply CSS style specific to it. Here is the starting code of the DIV that get pops up:

<div style="position: absolute; top: 300.4px; left: 149px; display: block;" id="ui-datepicker-div" class="ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all ui-helper-hidden-accessible"><div class="ui-datepicker-header ui-widget-header ui-helper-clearfix ui-corner-all">

As such, I cannot add a super selector. What would be great would be that the date picker widget supports CSS scope. But it does not. I'm stuck manually editing the jQuery CSS file.

The Date Picker is currently being refactored. Hopefully the new code will address this issue.

Answer 1

You can customize your theme with the theme roller here http://jqueryui.com/themeroller/

Find the item you want to style with Firebug's inspect DOM feature to target the class you want to select.

Answer 2

I had the same problem with the datepicker and the accordion. I wanted the new styling of the datepicker but didn't want it for the accordion. I took the easy way out, I copied the relevant parts of ui.theme.css and added .ui-datepicker in front of all the styles. This targets just the datepicker and leaves all other UI plugins alone.

I am not sure if it was the best way but it worked for my purposes.

Answer 3

I could be missing something but couldn't you just add a class to your date picker object and select on that?

Answer 4

$(window).load(function() {
   $('#ui-datepicker-div').wrap('<div class="CSS-Scope-Class" />');
});

The .wrap() jQuery function will place the necessary wrapper div around the datepicker for it to be picked up by the themed stylesheet.

I had to attach to the window's load event rather than the document's ready event because the datepicker had not been inserted by then.

Note: There will be a small delay between the time the datepicker is added to the DOM and the wrapper div is applied, which means the datepicker may appear unstyled while the page is finishing loading.

Answer 5

$('#cmsContent').css('margin', '0');

Answer 6

@Thierry-Dimitri Roy:

The following URL contains sample code that demonstrates how to include scoped themes.

http://digg.com/software/jaldropdown_jqueryui_theming_and_scoping_sample

it also contains sample on set the scoped theme on datepicker and also change the theme scope at any point of time

Hope that works for you.