How to change background color of jQuery UI Dialog

Question

I am having tough time figure out how to change background color of jQuery UI Dialog.

I've seen many reference how to change/remove title bar but not entire background including those curvy corner.

Here is my try:

http://jsfiddle.net/dEvKb/11/

The problem is .ui-widget-content only applies to square area within the dialog but not including curvy corner.

I found a class .ui-corner-all class hoping it will color the entire background but only half of the dialog is colored. (you can see this in the jsfiddle)

Has anyone done this before?

Answer 1

Use this class in css

.ui-dialog .ui-dialog-content {
    border: 0;
    padding: .5em 1em;
    background: #ff0000;
    overflow: auto;
    zoom: 1;
}

Answer 2

Please be aware that you could also go and make your own custom CSS using this link in jQuery

http://jqueryui.com/themeroller/

jQuery allows us to make a custom-css. Please select the theme you would want from the gallery and hit the edit button, you will be able to change almost everything about the dialog box, as well as the rounded corners.

You then need to download the entire jQuery pack within it you will find css/custom-css folder just put in your css tag and it will be all sorted basically.

The above ways are also true as you will be able to change it but you will have to look for the classes and stuff like that in the CSS well jQuery does that for us in an easy way and it worked for me as well so you can try it too.

What I basically do is create two to three custom style sheets and then load them up and play with them and finally choose one for the website and discard the rest.

I hope this helps...

Answer 3

Use the css classes:

• ui-dialog
  • Main container of whole thing
• ui-dialog-title
  • This is where the title actually appears
• ui-dialog-titlebar
  • Area where title of dialog would be if exist
• ui-dialog-content
  • Area where your div is actually loaded
• ui-resizable-handle
  • These divs are used to resize the dialog but are usually invisble according to your setup
• ui-dialog-buttonpane
  • Here is where buttons would go if exist
• ui-dialog-buttonset
  • This is where the buttons actually appear

Also, unlike answer given selected, take note, YOU DON'T HAVE TO USE !important.

If you want a direct call, set everything up and create your dialog. Load the page in Chrome or FF (chrome easier to read). Then simply open the dialog and select the element you want to change. Look at its CSS in your Browser's Developer Tools. You'll be able to see the exact line jqueryui uses to make it's css call. Simply copy that line into your own CSS and ensure it's loaded later and your dialog will get the new overwrite.

Answer 4

If you want to target a specific dialog you can do it this way:

$('#yourDialog').dialog(
{
    autoOpen: false,
    open: function(e) {
        $(e.target).parent().css('background-color','orangered');
    }
});

Answer 5

you can use this way

http://jsfiddle.net/dEvKb/15/

You should set to all class background with use !important.

.ui-dialog,.ui-widget, .ui-widget-content, .ui-corner-all, .foo, .ui-draggable, .ui-resizable {background:yellow !important}​