CODEWITHSUNDEEP
javascriptjquerydialogstyles
Meow
Meow

Reputation: 19141

How to change background color of jQuery UI Dialog?

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?

Upvotes: 19

Views: 85803

Answers (6)

Stefan
Stefan

Reputation: 766

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

tooltip css styles

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

change css style in browser

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)

jquery-ui css background style

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.

Upvotes: 0

zach
zach

Reputation: 51

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

Upvotes: 5

Sinan AKYAZICI
Sinan AKYAZICI

Reputation: 3952

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}​

Upvotes: 25

SpYk3HH
SpYk3HH

Reputation: 22580

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.

Upvotes: 20

Kevin
Kevin

Reputation: 21

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

Upvotes: 2

Deepakmahajan
Deepakmahajan

Reputation: 866

Use this class in css

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

Upvotes: 3

Related Questions