I’m going through the css and combining declarations.
For example the header for the dialog is in ui-widget-header and ui-dialog-titlebar.
The issue is when I have jquery UI tabs, for example, within a dialog. Even through they are both scoped to different css selectors – there’s still some conflict because the tabs inherits some of the parent’s styles.
UI appends so many classes, it’s a headache to go through it all (which I’m happy to do).
I’m wondering if anyone has whittled down the dialog css to only the css it needs (without consideration of other UI elements). So combining declarations into one…
I recently used the UI Slider and I just used the selectors that are used with the script, I was able to get it down to two with that. Most of them you can scrap.. Like “ui-corners” for example. All that one does is round the corners. My advice would be to create one in jsFiddle and see what you need only for the functionality and then apply your own styles.
Or you could possibly go through the web inspector, edit the HTML and start hacking them out one by one to see which ones are actually hooked to the script.
Another option would be to put a wrapper DIV around the content and override the CSS with your own styles.
Best option though is probably to look at the documentation you can see what it is dependent on and under the theme tab it says which classes are used…
http://jqueryui.com/demos/dialog/
Not really a very good answer but maybe it will help.