jQuery UI multiple CSS files

I'm wondering if there are any tricks out there to have two versions of themeroller (essen开发者_StackOverflowtially) loaded on a single page?

One page in our application uses jQuery UI dialogs for gathering user input on specific functions. For this we have styled these dialogs with the themeroller tool.

On the same page we have significantly more complex dialog that we contracted out the HTML markup and JS for. (we provided PSD of the design) The firm we used also used the jQuery UI Dialog and wrote custom classes to for all of the ui-dialog classes.

When the jQuery Dialog is created these classes are added to the markup, but now there is conflicting CSS. Is there a way to provide css class names to the Dialog script via "options" or another way.

Any thoughts on how to use these conflicting CSS files? I've asked the contracting firm as well but thought a question here may serve me some good.

*Edit:*Looking at the jQuery UI Dialog source now. I'm thinking it wouldn't be too hard to modify the plugin to take class names as an option. This way I can run one Dialog with standard class names to pull from our Themeroller CSS and another Dialog with custom class names. Has anyone done this?

Thanks!

When you create your own themeroller package on the jQuery UI site, it allows you to set a CSS scope --- it's under the advanced theme settings.

This allows you to build your custom jQuery UI CSS rules to work only within a specific area of the page that the theme will work in. With a little tweaking (with jQuery, most probably), you can switch between CSS scopes dynamically, and/or use multiple jQuery UI themes concurrently, all without having to modify your CSS files. :D

jQuery UI download page (check the advanced theme options on the right sidebar)

This would mean that you'll probably have to redo creating your themeroller package, but at least it's the way jQuery UI officially supports it, and you can be sure it won't break with future upgrades.