The other day I had need for a lightweight JavaScript tabs implementation. The site was already setup with jQuery so the natural choice was, of course, to load jQuery UI and use tabs. After a quick setup, the problem I ran into was that I needed the jQuery UI theme for the tabs layout, but didn’t want all the associated styling.

How to reset it

After fairly quick google I came across this wonderful blog post that had already done it. Just add it to your CSS after including the jQuery UI theme (I used Lightness), and it’ll reset it to plain tabs which you can then style yourself.

/*
* Reset the jQuery Tabs if you're using a Theme
*/

/* Resets the contain background and outer borders */
#button_generation .ui-widget-content { border: none; background: none; }
#button_generation .ui-widget { font-family: inherit; font-size: inherit; }

/* Resets all border radius */
#button_generation .ui-corner-all,
#button_generation .ui-corner-top,
#button_generation .ui-corner-bottom,
#button_generation .ui-corner-left,
#button_generation .ui-corner-right,
#button_generation .ui-corner-br,
#button_generation .ui-corner-bl,
#button_generation .ui-corner-tr,
#button_generation .ui-corner-tl { -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; }

/* Resets widget header tabs */
#button_generation .ui-widget-header { border: none; background: none; font-weight: normal; color: #000000; }
#button_generation .ui-widget-header li { border: 0px; padding: 0px; margin: 0px; }
#button_generation .ui-widget-header li a,
#button_generation .ui-widget-header li a:link,
#button_generation .ui-widget-header li a:visited,
#button_generation .ui-widget-header li a,
#button_generation .ui-widget-header li a:link,
#button_generation .ui-widget-header li a:visited { border: none; background: none; font-weight: normal; color: #000000;, margin: 0px; padding: 0px; }

/* Resets the panel */
#button_generation .ui-tabs-panel { padding: 0px; }