The main problem with jQuery UI themes is that the amount of CSS classes contained in each theme is very significant. Thus, if you want to further customize your theme, you necessarily need to specify your styles using the naming conventions used by jQuery UI. Fortunately, jQuery UI uses a namespace convention that makes each CSS class start with the ui prefix. This is useful when you have to perform a global mass reset on your UI widgets, but it's not recommended due to some evident side effects that will affect the behavior and visual presentation of the widgets themselves.
Further, it's often hard to remember the name of all UI classes. So we're going to use CSS3 attribute selectors to minimize this problem. For example, if you have a basic dialog box like this:
you can use CSS3 attribute selectors to override the default styles of jQuery UI:
[class^="ui"] {
border-color: orange !important;
}
[class*="title"] {
background-color: orangered !important;
background-image: none !important;
color: white !important;
}
And this is the result:
Since I didn't remember the full name of the dialog box's title, I used the substring matching attribute selector to select a partial string on that name. Finally, all jQuery UI classes start with ui, so I performed a global reset using a CSS3 attribute selector on this kind of classes. Note how I did use the !important statement to make sure that my custom styles will actually override the default styles of the library.