Jquery dialog - titlebar color change

Question

I trying to change to titlebar color alone.So i used .ui-dialog-titlebar , but its not working , so i tried with ui-widght-header, its reflecting to data table also.. Please advise.

// Not working

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

//Working , but reflecting to datatable header also..

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

I'm looking color only dialog titlebar..Please advise.

Solution 1

The jQuery UI components share a lot of classes, but a dialog always has the class ui-dialog, so if you target just the direct header child of the dialog, it should work:

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

FIDDLE

Solution 2

FYI : If you wish to toggle the color of the modal header, you might wanna 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");

Solution 3

If you want it to be specific per id

$("#dialogId1).closest(".ui-dialog").children(".ui-dialog-titlebar").css("background", "lightblue");

$("#dialogId2).closest(".ui-dialog").children(".ui-dialog-titlebar").css("background", "yellow");