How to override jQuery UI Widget Styles and Keep the Functionality

Question

I am using jQuery UI for an in-house application.

---

I am looking for an easy way to remove all style information provided by jQuery UI on a given widget instance. I'm open to really anything, but a reusable javascript solution would be perfect. It's absolutely imperative that no functionality is lost.

the most important thing is that all background-images are removed, I'm ok with keeping the layout styles.

ideally something like...

$tabs = $("#someElement").tabs();
$tabs.removeStyles();

But I'm open to whatever allows me to modify widget styles in a flexible way.

The end goal is to have as much control of styles as possible

Answer 1

In order to override the jquery-ui css use the !important tag.

.ui-dialog {
  background-color: black !important;
  }

Answer 2

The easier way to remove CSS styles/classes is to use .removeClass(). For example, to override all the corners of the tabs and have only top corners, I use it like this:

$('#tabs').tabs().removeClass('ui-corner-all').addClass('ui-corner-top');

Hope this helps!