jQuery UI Tabs Minimal Styling

Question

In my application, I have so far avoided needing to load any jQuery stylesheets at all, but the UI-tabs plugin seems to need some CSS to work at all. OK, fine, but the examples have you loading ALL the UI styles and, perhaps more important, the tab styling totally ruins my own look and feel.

Is there any place to learn how I can provide just enough CSS for the tabs to work, so I can retain my own styling?

I don't mind a minimal amount of styling help to arrange the tabs nicely or something, but the background image, the colors.... they clash really bad with my own styling.

Oh, and no thanks to the Theme Roller, which I'm sure is nice for some people. Just not in this case, thanks.

Chipmunk

why would the jQuery UI css ruins your style? Unless your using the same class names? – Estrade

To change header background use this: .ui-widget-header { border: 0px solid #AAA/*{borderColorHeader}*/; background: orange; font-weight: bold; } – Freehearted

Answer 1

If you look at the Tabs Demo Page you can click on the Themig tab to view which styles are in use, currently it looks like this:

<div class="ui-tabs ui-widget ui-widget-content ui-corner-all" id="tabs">
   <ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
     <li class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active"><a href="#tabs-1">Nunc tincidunt</a></li>
      <li class="ui-state-default ui-corner-top"><a href="#tabs-2">Proin dolor</a></li>
   <div class="ui-tabs-panel ui-widget-content ui-corner-bottom" id="tabs-1">
      <p>Tab one content goes here.</p>
   </div>
    ...
</div>

Then you can use the jQuery UI CSS Framework documentation to find a description of each general class. The widget specific classes aren't listed, as they're well...per-widget.

The best way to get an idea of what those classes do is to use ThemeRoller, or look at the default theme (for example here) and just look at the CSS for those classes, you can use just that and adjust for your own needs, here's the current base theme CSS for .ui-tabs-* classes:

.ui-tabs { position: relative; padding: .2em; zoom: 1; }
.ui-tabs .ui-tabs-nav { margin: 0; padding: .2em .2em 0; }
.ui-tabs .ui-tabs-nav li { list-style: none; float: left; position: relative; top: 1px; margin: 0 .2em 1px 0; border-bottom: 0 !important; padding: 0; white-space: nowrap; }
.ui-tabs .ui-tabs-nav li a { float: left; padding: .5em 1em; text-decoration: none; }
.ui-tabs .ui-tabs-nav li.ui-tabs-selected { margin-bottom: 0; padding-bottom: 1px; }
.ui-tabs .ui-tabs-nav li.ui-tabs-selected a, .ui-tabs .ui-tabs-nav li.ui-state-disabled a, .ui-tabs .ui-tabs-nav li.ui-state-processing a { cursor: text; }
.ui-tabs .ui-tabs-nav li a, .ui-tabs.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-selected a { cursor: pointer; }
.ui-tabs .ui-tabs-panel { display: block; border-width: 0; padding: 1em 1.4em; background: none; }
.ui-tabs .ui-tabs-hide { display: none !important; }

Jiles