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:

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?

add background color at .ui-dialog then it should work. See [demo](http://jsfiddle.net/dEvKb/25/) — Dips, Feb 22 '12 at 06:22
Do I have to do it in inline level? If I define the style in external CSS, the style is not being applied. Looking at firebug, native jquery dialog code overrides the external css — Meow, Feb 22 '12 at 06:41
Oh no I was wrong. My css class selectors were defined wrongly. ".foo .bar" when it should be ".foo.bar" (whitespace) — Meow, Feb 22 '12 at 06:49

score 25 · Accepted Answer · edited May 27 '16 at 08:05

25

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}

edited May 27 '16 at 08:05

user4035

22,508
11
59
94

answered Feb 22 '12 at 06:21

Sinan AKYAZICI

3,942
5
35
60

4

Thanks! I think stackoverflow now has dependency to jsfiddle – Meow Feb 22 '12 at 06:31
@Paul Probably it doesn't work to was affected by other css. You can review using Firebug or Chrome Dev Tools. – Sinan AKYAZICI Sep 20 '12 at 13:41
This has .ui-dialog twice. FWIW, I found this to save the header: .ui-dialog, .ui-dialog, .ui-widget-content, .ui-draggable, .ui-resizable – Vael Victus May 29 '13 at 16:54
2

"You should set to all class background with use !important." I have to disagree. What if you want to add like a "highlight on hover" type class during hover. the background would never change. You don't have to use `!important`, you can just simply make a direct reference like `#myelementID .myClassContainer .ui-widget` and get the same "override" result **without** the set back of a "permanent" change. – SpYk3HH May 29 '13 at 17:50
This works for me except my dialog has jqueryUI datepicker within it .. which gets painted with the same backgrounds (and almost disappears - apart from the numbers) .. not sure how to get round it – Upland May 29 '13 at 17:58

score 20 · Answer 2 · edited May 23 '17 at 11:46

20

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.

edited May 23 '17 at 11:46

Community

1
1

answered Feb 22 '12 at 06:24

SpYk3HH

22,272
11
70
81

Old thread, but I just wanted to thank SpYk3HH for the simple list of things that make the life of this noob much easier. Thanks! – TimSPQR Sep 05 '13 at 20:43
@TimSPQR Just doing what I can to help and give back, as this site and a couple others helped bring me a long way from my old DOS and PERL days – SpYk3HH Sep 05 '13 at 20:51
This solution won't work from a style sheet or style block as only ui-dialog-content will reside in the defined DIV block. #myelementID.ui-dialog-content will work, all others are outside your DIV, so they must be accessed in some other fashion. – MC9000 Feb 24 '15 at 05:32

score 4 · Answer 3 · answered Mar 28 '17 at 22:39

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');
    }
});

answered Mar 28 '17 at 22:39

zach

41
3

1

Or simply: $("#dialogId").css("background-color", "ColorName or Code"); – Mayank Apr 29 '17 at 12:27

score 3 · Answer 4 · answered Feb 22 '12 at 07:16

3

Use this class in css

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

answered Feb 22 '12 at 07:16

Deepakmahajan

856
1
11
23

score 2 · Answer 5 · answered Aug 15 '12 at 10:25

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...

score 0 · Answer 6 · answered Jul 09 '19 at 18:03

Short answer

your_stylesheet.css

.ui-widget-content { background: yellow; }

Make sure your stylesheet is included after the JQuery UI stylesheet, e.g.

your_webpage.html

    <link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
    <link href="your_stylesheet.css" rel="stylesheet" type="text/css"></link>

Long answer

To determine which class and style to override, you will need to inspect a tooltip. Show the tooltip:

$("#selector_for_item_with_tooltip").tooltip('open')

Right-click on the tooltip and choose "inspect". Scroll down in the "Styles" tab until you find the attribute you care about (background-color).

You can click on the value and type in a new value to verify that it will have the effect you desire.

To see the format you will need to use to override the format, click on the filename:line # on the upper-right to go to the .css file that defines the attribute (jquery-ui.css:802)

The format will be

.ui-widget-content
{
    background: yellow;
}

Your .css file needs to use the same style and be included after this one (see "short answer", above).

People sometimes incorrectly add !important css suffix to bypass this requirement but that causes all kinds of other headaches.

How to change background color of jQuery UI Dialog?

6 Answers6

Short answer

Long answer

Linked