Can I remove the entire style of jQuery UI tabs without breaking the styles of other UI components? [closed]

Question

I want to fully customize jQuery UI tabs without breaking the styles of jQuery UI date picker? Is that doable or should I do a custom work and not use jQuery UI tabs?

Answer 1

$("#mytabs").tabs()

<div class="ui-tabs ui-widget ui-widget-content ui-corner-all" id="mytabs">
   <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>

this example show most of the ui classes that may be applied.. you can reset them for children of e.g. #mytab only..

#mytab.ui-tabs {
    /* reset or overwrite everything you don't like */
}

#mytab li.ui-tabs-selected {
    /* reset or overwrite everything you don't like */
}

...

This is not exactly comfortable but allows you to still use say the jquery ui styles in any other element.

about the datepicker, as long you make sure the styles defined above are not used in the divs that hold the content you should be fine, most of the classes are prefixed with ".ui-datepicker-" or ".ui-tabs-" anyway so they should't interfere..

Answer 2

Just use jQuery chaining to remove the ui-widget class from the tab container element after applying the tabs widget. Most of the undesirable styling is attached to the ui-widget class.

$("#tabs").tabs().removeClass('ui-widget');

In a different case with more heavily styled content, I found that removing more classes was necessary, not just from the container div, but from all elements inside it.

$("#tabs").tabs();
$("#tabs, #tabs *")
.removeClass('ui-widget ui-widget-content ui-widget-header ui-tabs-panel');

Answer 3

Perhaps this minimally-intrusive css skeleton helps. Observe that only JQuery UI's defined ui-tabs class (and its descendent ul > li) is styled, which avoids touching other ui-related classes contained in theme-roller-generated jquery-ui-1.8.18x.custom.css (I never quite got this idea by merely studying that file).

            /* default tab state */                
                /* tabs nav bar */
                .ui-tabs ul {
                    border-top: 0 !important; 
                    ...
                }                
                .ui-tabs li { 
                        background :  #EFEFE7 !important; 
                        ...
                } 
                .ui-tabs li a  { 
                        color:          Black !important;
                        padding:        4px 1.5ex 3px !important; 
                    }                    
            /* selected tab state */
                .ui-tabs li.ui-state-active { 
                        margin: 0;
                        ...
                    }
                .ui-tabs li.ui-state-active a  { 
                        ...
                    } 
            /* hovered tab state */
                .ui-tabs li.ui-state-hover { 
                    ...
                    }                    
                .ui-tabs li.ui-state-hover a { 
                    ...
                    }