Set the background color of the jQuery UI overlay interface

Question

When I load the dialog, the background turns a little gray. I would like to make it darker, but I can not find the property that is responsible for this. How can i achieve this?

Answer 1

That is, in this css element:

.ui-widget-overlay { background: #AAA url(images/ui-bg_flat_0_aaaaaa_40x100.png) 50% 50% repeat-x; opacity: .30; filter: Alpha(Opacity=30); } 

located on line 294 of: jquery-ui-1.8.11.custom.css

Answer 2

Add this CSS to your stylesheet:

 .ui-widget-overlay { opacity: .50 !important; /* Make sure to change both of these, as IE only sees the second one */ filter: Alpha(Opacity=50) !important; background-color: rgb(50, 50, 50) !important; /* This will make it darker */ } 

Answer 3

The easiest way is to use themeroller .

Answer 4

I had a spinlock problem with a Blender solution, but changing the "background-color" to "background" is fixed. I suspect the reason is that the original (jQuery-UI) CSS uses this PNG graphic.

Answer 5

Like @spinlock I have a strip that works horizontally:

To remove a strip and use a custom background color, you can do this in the event that opens:

 open : function(event, ui){ $("body").css({ overflow: 'hidden' }); $(".ui-widget-overlay").css({ background:"rgb(0, 0, 0)", opacity: ".50 !important", filter: "Alpha(Opacity=50)", }); }, beforeClose: function(event, ui) { $("body").css({ overflow: 'inherit' }) }