Useful CSS for Overriding jQueryUI style
I poked around and found some CSS to make this extension clash less with the Vector skin.
#headertabs { font-size:1em; }
#headertabs .ui-widget { font-family: sans-serif; font-size:1em;}
#headertabs .ui-widget .ui-widget { font-size: 1em; }
#headertabs .ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button { font-family: sans-serif; font-size: 1em; }
#headertabs .ui-widget-content { border: none; /* @embed */
background: #f2f5f7 url(images/ui-bg_highlight-hard_100_f2f5f7_1x100.png) 50% top repeat-x; color: #362b36; }
#headertabs .ui-widget-content a { color:#0645AD; }
#headertabs .ui-widget-content a:visited { color:#0b0080; }
#headertabs .ui-widget-content a.new { color:#CC2200; }
#headertabs .ui-widget-content a.new:visited { color:#A55858; }
#headertabs .ui-widget-content a.extiw { color:#3366BB; }
#headertabs .ui-widget-content a.redirect { color:#308050; } /*Color redirect links*/
#headertabs .ui-widget-content a.redirect:visited { color:#3070A0; } /*Color redirect links*/
#headertabs .ui-widget-shadow { margin: -7px 0 0 -7px; padding: 7px; /* @embed */
background: #000000 url(images/ui-bg_flat_70_000000_40x100.png) 50% 50% repeat-x; opacity: .20;filter:Alpha(Opacity=20);
-moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; }
.ui-tabs { position: relative; zoom: 1; }
.ui-tabs .ui-tabs-panel { display: block; border-width: 0; padding: 0em 0em; background: none; }
Put this in Common.css or some place similar.
This will fix all of the issues I'm aware of. It shouldn't cause any problems with any other extensions using jQuery UI. It survives upgrades. Et cetera et cetera.
It could use some further work -- I'd like to have the tabs look more like the Vector tabs, or at least something less different... but I guess it's a work in progress, and a good start for anyone else who fired up this extension and said WTF.
Note that the last two lines aren't within the #headertabs div. The ui-tabs/ui-tabs-panel stuff screws up the body (IMHO) by putting tremendous padding around it. If you try to apply the CSS to only ui-tabs/ui-tabs-panel within the #headertabs div, it fails and does not get applied. I'm not sure why, and my level of interest (since I don't think I'll be using jQuery UI tabs anywhere else) is so low that I'm not going to spend any time trying to figure it out.
Oops, I ended up duplicating this work. I have a slightly different one, and I'll be integrating some parts of this one (for link colour for example, forgot that). I've posted both at Extension:Header_Tabs/JQueryStyles
