jquery ui theme on all elements but one

Question

I'm using a lot of jquery ui in my page: autocomplete, dialog, datepicker, etc. I styled the theme for those elements and it's ok.

I also have a tab navigation and I would like to exclude it from the theme. I deleted all tab related ( only the ones that start with tab) css from my theme, but it's still full of jquery ui css ( widget, header, content, etc) that I cannot change because then also the other elements will change and I don't want that. I know how to apply the css scope, but it's not good for me ( it's difficult to style autocomplete and dialog with a scope theme).

Is there a way to exclude only the tabs from styling?

Thank you

Answer 1

Everything in jQueryUI CSS is over-writable for this very reason. The key you're missing is that you're applying you're overrides directly. Or so I assume. something like:

.ui-widget { font-size: 42px; }

I know that's what they show in their docs, but it's just plain wrong when you want "specific elements" effected. For that you need to rely on Name Spacing. This means using an ID or Class Name you create before the UI Class Name You want to edit. Such as:

#myEleID .ui-widget { font-size: 84px; }

This way, only the children elements using ui-widget within the Element having the ID myEleId are affected. Nothing else on the page will be affected in any way.

To Get a better idea, I made you a fiddle with 2 sets of tabs. The first set is edited to be vertical but uses my Name Space to make the change. This way, the second set (set to default) is not effected, no matter the UI theme! You'll also find a theme switcher in the bottom of the fiddle. Try it out!

jsFiddle

#tabs { 
    width: 55em; 
}
#tabs .ui-tabs-nav { 
    padding: .2em .4em .2em .2em; float: left; width: 12em; 
}
#tabs .ui-tabs-nav li { 
    clear: left; width: 100%; border-bottom-width: 1px !important; border-right-width: 0 !important; margin: 0 -1px .2em 0; 
}
#tabs .ui-tabs-nav li a { 
    display:block;
    padding: .5em 0;
    text-align: center;
    width: 100%;
}
#tabs .ui-tabs-nav li.ui-tabs-active { 
    padding-bottom: 0; padding-right: .1em; border-right-width: 1px; border-right-width: 1px; 
}
#tabs .ui-tabs-panel { 
    padding: 1em; float: right; width: 40em;
}

I also wrote a blog a long while back about getting current tab in jQueryUI. It talks a little bit about name-spacing and may also be helpful on your future en devours.
http://spyk3lc.blogspot.com/2012/08/jqueryjqueryui-help-tabs-get-currently.html