jQuery UI and using/not using themes

Question

We're using jQuery UI Tabs at the top of the page (with no themes, using our own styles in the screen.css file) and using jQuery UI Datepicker later on down the page.

We want to use a jQuery Theme for the Datepicker, but we want to use our own styles for the Tabs. But as soon as we include the Themes, it (obviously) styles both completely in a particular style.

Is there anyway of setting a jQuery UI component to have a theme or not? Some sort of configurable? Or is it purely about the style class names and doing what you need there? ... It's just having blank (no themes) is easier to style from, then trying to undo what the Theme stylesheets are setting...

Answer 1

jQueryUI completely relies on the class names currently imported to the html page. They all of start with ui-

Since it's just plain CSS you can do one of two things:

• cut and paste the classes you want from the theme's css into your own css file.
• import the theme's css file and overwrite the classes you are interested in with your own css.

Answer 2

Use the theme-roller builder. allows you to apply a theme to specific selectors. so .themed container can use a theme, .non_theme won't. Enjoy