CODEWITHSUNDEEP
jqueryjquery-dialog
user2444474
user2444474

Reputation: 573

Jquery dialog - titlebar color change

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.

Upvotes: 6

Views: 22007

Answers (4)

Naren Hemnani
Naren Hemnani

Reputation: 61

Yet another simple method: Just use the below class to change the title bar color on ur CSS file

.ui-dialog .ui-dialog-titlebar {
    background-color: blue;
}

Upvotes: 0

Chan
Chan

Reputation: 43

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");

Upvotes: 1

DinoMyte
DinoMyte

Reputation: 8858

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");

Upvotes: 1

adeneo
adeneo

Reputation: 318182

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

Upvotes: 23

Related Questions