WordPress Color Picker (Iris) and jQuery UI CSS Conflict Solution

In developing a recent plugin, I decided to add jQuery UI Sliders into a backend options page, in addition to calling up the WordPress Color Picker. I can into a problem where the jQuery UI CSS was overriding color picker’s CSS.

I checked to see if anyone else knows about this, and found that not only has a ticket been submitted, but a fix is already finished. However, it’s only a fix in WordPress 3.8, which isn’t out yet. For anything from 3.5 (When the color picker was added) through 3.7.1 (current), the issue still exists. After fiddling around for a while, I found a fix which I want to share in case anyone else has the same issue.

Since the WordPress Color Picker uses the same classes as the jQuery UI Slider, we need to add a class prefix to every top level class. These top level items include but are not limited to: .ui-slider, .ui-slider-horizontal, .ui-widget, etc etc. Example:

.ui-slider {
	position: relative;
	text-align: left;
}

Becomes:

.acb_slider.ui-slider {
	position: relative;
	text-align: left;
}

In ends up being almost every line, but if you are careful you can get it in all the right places. This causes the CSS rules to only be applied on sliders that you add your prefix class to. Just make sure you remember to add said class to all sliders that you want to create.

If you’d like to look at working code, take a look at the Admin Classic Borders plugin. The file will be jquery-ui-1.10.3.custom.css.php. It looks slightly different because I add the prefix using a php variable, but the principle is the same.

Hope this helps!