JQuery Dialog Box - Change header color

Question

I am trying to change the color of the title. I used .ui-dialog-titlebar, but it does not work, so I tried using ui-widght-header, it also affected the data table. Please inform.

//Does not work

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

// Works, but also reflects the datatable header ..

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

I look only the title of the dialog with color only. Please advise.

Answer 1

The jQuery UI components share many classes, but there is always a ui-dialog class in a dialog box, so if you only target direct children in a dialog box, it should work:

 .ui-dialog > .ui-widget-header {background: red;} 

Fiddle

Answer 2

FYI: If you want to switch the color of the modal header, you can do something like this:

 if(Success) $(".ui-dialog").find(".ui-widget-header").css("background", "darkgreen"); else $(".ui-dialog").find(".ui-widget-header").css("background", "red");