jQuery UI style hack

Some of us still use jQuery UI 🙂 In fact, it wasn’t too bad, is still supported by all modern browsers, and performs reasonably well on mobile.

There is one issue: the graphics look horribly 2010. jQuery UI offers a user interface to cherrypick your own CSS (it’s great and kind of works: look at their themeroller here.

Still, it doesn’t let you replace the .png icons with font icons (fontawesome, dashicons). I didn’t feel like overhauling the thing so I came up with a simple hack that works for me (on this site):

.ui-corner-all { border-radius:0!important}
.ui-state-hover {border:0!important;background:transparent!important}
.ui-widget-header {background:@color1!important; color:@bkg!important}
.ui-widget-content{font-family:@font3!important}
.ui-state-default, ui-state-default:hover {color: @color1!important;background:@bkg!important;border:0!important}
.ui-corner-all thead, .ui-corner-all td {color: @color1!important;}
.ui-datepicker-prev span, .ui-datepicker-next span {visibility:hidden!important}
.ui-datepicker-prev:before, .ui-datepicker-next:before {font: 2em/1 dashicons!important;color: @bkg!important;}
.ui-datepicker-prev:before { content: "\f141"!important;}
.ui-datepicker-next:before{content: "\f139"!important;}

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.