How to change jQueryUI dialog box title color?

Question

I want to change the background color in the jQueryUI dialog. I used the following style to change it and it works. But the problem is that it is also an effect, DatePicker Dialog Title. I want to change the name of the dialog, not the name of DatePicker. Could you advise me how can I change only the color of the Dialog tile? Thanks.

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

Answer 1

You can target 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> 

(displayed on the dialog page here )

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

Alternatively, you can pass the class to the dialog:

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

Look here