jQueryUI widget overlay custom CSS

Question

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="#" 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); }

I have to head outta the house, but real quickly I can see that the dialog you have here is broken into three parent divs; if you are implementing the dialog correctly, then you are going to have to set the background for all three divs. However, I don't think that you are implementing the dialog correctly. Take a look at their documentation again. api.jqueryui.com/dialog/#option-dialogClass — James Glass
– James Glass, Commented Mar 31, 2013 at 17:09
Thank you John. The dialogs and the overlay render fine, but I'll look at the documentation you referred me to, thank you for your time. — Clive van Hilten
– Clive van Hilten, Commented Mar 31, 2013 at 18:04

jk. · Accepted Answer · 2013-03-31 17:29:59Z

5

Add your .addClass('override') to the dialog options in the open event:

var commonDialogOptions = {
    autoOpen: false,
    height: "auto",
    modal: true,
    width: 700,
    open: function (event, ui) {
        $('.ui-widget-header').addClass('override');
        $('.ui-widget-header a').addClass('override');
        $('.ui-widget-overlay').addClass('override');
    }
};

Fiddle: http://jsfiddle.net/CXhVs/2/

jquery UI open event docs

edited Mar 31, 2013 at 17:29

answered Mar 31, 2013 at 17:24

jk.

14.4k4 gold badges45 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

jQueryUI widget overlay custom CSS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related