jquery ui tabs major style change

Question

I am using jquery UI tabs and I need to majorly change the styling on it. I need to rempve the background image, the borders, almost everything. I need it to look minimal, and not like it's self contained.

What's the best way to do this? I need to use the default UI styling for the calendar widget however, which is on the same page. I've done a lot of research and everyone seems to point to the theme-roller. However, i do not just want to change the colors and border radii. I need to delete crap. theme-roller seems to be just change things like colors (not really useful for the real world). How do I adapt the css for the tabs without changing the styles of the other UI widgets on the same page (I want the calendar to stay as it is)?

Is it even worth using jquery UI for my tabs?

Answer 1

You should check out Keith Wood's detailed blog post on styling JQuery UI Tabs.

The answer to your specific question

I need to rempve the background image, the borders, almost everything. I need it to look minimal

is in this section "Remove most of the formatting" of Keith Wood's post.

In addition to this, there are 10 more style changes, complete with the CSS required to achieve the desired effect.

JQuery UI Tabs Styling - Keith Wood Blog Post

Answer 2

It's easy with some CSS you can easily override the standard CSS delivered with jQuery UI. You may not need !important if your modified CSS appears after the jQuery UI CSS.

You can also remove/add classes to each element with jQuery on load, but that seems a bit unnecessary.