CODEWITHSUNDEEP
jquerycssjquery-ui
milandjukic88
milandjukic88

Reputation: 1125

How can I change dialog title color in jquery ui?

I have something like this:

$div = $('<div id="error" title="Error">');
$div.append('<p>Hi</p>');

$div.dialog({
    modal: true,
    maxHeight:500,
});

Can i change background color of dialog title somehow like this?:

 $div.dialog({
        modal: true,
        maxHeight:500,
    }).find(".ui-dialog-titlebar").css("background-color","red");

Upvotes: 20

Views: 48370

Answers (3)

Mikeys4u
Mikeys4u

Reputation: 1552

Most simple way is this: -

.ui-dialog-titlebar {
      background:red;
}

Upvotes: 2

user1428716
user1428716

Reputation: 2136

Another method to do is to :

Define your styling class - myTitleClass

Define the css as 

  . myTitleClass .ui-dialog-titlebar {
          background:red;
    }

and add the custom class to the dialog initialization function : 

     $( "#dialog" ).dialog({
        autoOpen: false,
        dialogClass: 'myTitleClass'
     });

JSFiddle - (but with another sample code)

http://jsfiddle.net/khVYj/3/

Upvotes: 24

DaniP
DaniP

Reputation: 38262

Use prev() instead of find() because that element is not inside $div:

$div.dialog({
    modal: true,
    maxHeight:500,
}).prev(".ui-dialog-titlebar").css("background","red");

Also I use background to override all other elements like background-image

Check this http://jsfiddle.net/Ad7nF/

Upvotes: 30

Related Questions