Having some trouble darkening the widget overlay provided by jQueryUI's "dialog". Despite trying to override the CSS used by jQuery, specifically the class ui/widget-overlay, I can't seem to apply my own styles successfully in my stylesheet.
I attempted $( '.ui-widget-overlay' ).addClass( 'override' ) but it didn't load my style (confirmed using Chrome developer tools). Similarly, $( '.ui-widget-overlay' ).removeClass( 'ui-widget-overlay' ).addClass( 'override' ) had no effect either.
Even using the !important marker in my stylesheet did not yield the desired result.
You can find my Fiddle here. The current jQueryUI standard CSS for .ui-widget-overlay is:
.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 want to replace it with this:
.ui-widget-overlay { background: #222222 50% 50% repeat-x; opacity: .3;filter:Alpha(Opacity=30); }HTML
<a href="#" id="advisers-image">
<div class="circle hovershadow advisers advisers-box-shadow text">Professional
advisers</div>
</a>
<a href="#" 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="#tabs-1">Law firms</a></li>
<li><a href="#tabs-2">Accounting and audit firms</a></li>
<li><a href="#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="#">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); }