jQuery UI multiple CSS files

Question

I'm wondering if there are any tricks out there to have two versions of themeroller (essentially) 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!

well you can control the order of css file loading. latter css file will override the older ones — Ashwini Dhekane
– Ashwini Dhekane, Commented Apr 9, 2011 at 19:47
Right, but I need .ui-dialog to mean two different things. Or, even better I need to be able to tell one of the Dialog plugins to use different class names for styling. — BZink
– BZink, Commented Apr 9, 2011 at 19:48
in this case you will have to use different css for different pages. — Ashwini Dhekane
– Ashwini Dhekane, Commented Apr 9, 2011 at 19:57

Richard Neil Ilagan · Accepted Answer · 2011-04-09 20:13:01Z

2

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.

answered Apr 9, 2011 at 20:13

Richard Neil Ilagan

14.8k6 gold badges52 silver badges68 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

jQuery UI multiple CSS files

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related