OrdevePodyday
New Member
I'm trying to darken the widget overlay ("dialog") provided by jQueryUI but without success. I've narrowed the CSS used by jQuery to the class ui.widget-overlay, but seem unable to override the jQuery CSS in my own stylesheet. I've tried $( '.ui-widget-overlay' ).addClass( 'override' ) but my own style isn't loaded (I've confirmed this using Chrome's developer tools). Similarly, $( '.ui-widget-overlay' ).removeClass( 'ui-widget-overlay' )addClass( 'override' ) has no effect. I've also tried using the !important marker in my stylesheet, again to no avail.My Fiddle is here. The jQueryUI standard CSS reads as follows:.ui-widget-overlay { background: #aaaaaa url(images/ui-bg_flat_0_aaaaaa_40x100.png) 50% 50% repeat-x; opacity: .3;filter:Alpha(Opacity=30); }I'd like to replace it with this:.ui-widget-overlay { background: #222222 50% 50% repeat-x; opacity: .3;filter:Alpha(Opacity=30); }HTML<a href="http://stackoverflow.com/questions/15731735/#" id="advisers-image"> <div class="circle hovershadow advisers advisers-box-shadow text">Professional advisers</div></a><a href="http://stackoverflow.com/questions/15731735/#" id="industry-image"> <div class="circle hovershadow industry industry-box-shadow">Industry</div></a><div style="clear: both;"></div><div id="advisers-dialog" class="dialog"> <div id="tabs"> <ul> <li><a href="http://stackoverflow.com/questions/15731735/#tabs-1">Law firms</a></li> <li><a href="http://stackoverflow.com/questions/15731735/#tabs-2">Accounting and audit firms</a></li> <li><a href="http://stackoverflow.com/questions/15731735/#tabs-3">Management consultants and economists</a></li> </ul> <div id="tabs-1"> <p>Law firm text here.</p> <div id="tabs-inner-link"><p>Click <a href="http://stackoverflow.com/questions/15731735/#">here</a> to see how we can give you the edge.</p></div> </div> <div id="tabs-2"> <p>Accounting and audit firm text goes here.</p> </div> <div id="tabs-3"> <p>Management consultants and economists text goes here.</p> </div> </div></div><div id="industry-dialog" class="dialog" title="Industry">Industry text goes here</div>Javascript$( "#tabs" ).tabs();var commonDialogOptions={autoOpen: false,height: "auto",modal:true,width:700};$("#industry-dialog, #advisers-dialog").dialog(commonDialogOptions);$( "#industry-image" ).click(function() {$( '.ui-widget-header' ).addClass( 'override' );$( '.ui-widget-header a' ).addClass( 'override' );$( '.ui-widget-overlay' ).addClass( 'override' );$( "#industry-dialog" ).dialog( "open" );}); $( "#advisers-image" ).click(function() {$( '.ui-widget-header' ).addClass( 'override' );$( '.ui-widget-header a' ).addClass( 'override' );$( '.ui-widget-overlay' ).addClass( 'override' );$( "#advisers-dialog" ).dialog( "open" );$( "#tabs" ).tabs( "option", "heightStyle", "content" );$( "#tabs" ).tabs( 'select', 0 );});CSS.circle {width: 220px;height: 220px;border-radius: 50%;border: 2px solid #fff;float: left;display: inline-block;/* text styling for circles - see also the .text style below */font-size: 35px;color: #FFF;line-height: 220px;text-align: center;font-family: Ubuntu, sans-serif;}.dialog {font-family: 'Istok Web', sans-serif;font-size: 14px;line-height: 1.8em;}#tabs {font-family: 'Istok Web', sans-serif;font-size: 14px;line-height: 1.8em; }#tabs a:link { font-weight: bold; text-decoration: none; color: #5E2750; }#tabs a:visited { font-weight: bold; text-decoration: none; color: #5E2750; }#tabs-inner-link a:hover { text-decoration:underline; }.advisers {background: #5E2750;margin-left: 28%;margin-right: 13%;}.advisers-box-shadow {box-shadow: 0px 0px 1px 1px #5E2750}.industry {background: #DD4814;}.industry-box-shadow {box-shadow: 0px 0px 1px 1px #DD4814}.hovershadow:hover { box-shadow: 0px 0px 4px 4px #AEA79F }.text { /* used by professional advisers circle */line-height: 40px;padding-top: 70px;height: 150px}/* Styles below are overriden styles found in jquery-ui.css */.ui-widget-header.override { border: 1px solid #ffffff; background: #ffffff; color: #DD4814; font-weight: bold; }.ui-widget-header.override a { color: #DD4814; }.ui-widget-overlay.override { background: repeat-x scroll 50% 50% #222222; opacity:0.3; filter:Alpha(Opacity=15); }