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

Solution 1

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

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

Solution 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!

Comments

[Derek Adair]

I'm concerned about fudging up the functionality with removing all the widget classes...

[Derek Adair]

Also, this would remove classes that I assign manually in the markup that I would like to keep.

[tatlar]

+1: IMHO, and even though it is not what the OP wanted (even though they are the same user?!?!), this is the most unobtrusive way to replace styles without diddling with the JS, which leads to a rabbit warren of pain. The !important CSS value is often overlooked and incredibly useful.