How to change the color of the JQueryUI Dialog Title?

Question

I want to change the background color of the JQueryUI Dialog. I used the following style to change it and it works. But the problem is it also effect, DatePicker Dialog Title. I only want to change the Dialog title not DatePicker title. Could you please advise me how I could change only the Dialog tile color? Thanks.

.ui-widget-header
{
    background-color: #F9A7AE;
    background-image: none;
    color: Black;
}

Answer 1

You can target the titlebar directly, the dialog plugin will output HTML similar to the following for the dialog title:

<div class="ui-dialog-titlebar ui-widget-header">
  <span id="ui-id-1" class="ui-dialog-title">Basic dialog</span>
</div>

(Taken from the Dialog page, here)

.ui-dialog-titlebar {
  background-color: #F9A7AE;
  background-image: none;
  color: #000;
}

Alternatively, you can pass a class to the dialog:

$('#foo').dialog({dialogClass: 'myClass'});

See here