How to style jQueryUI dialog header with specific ID?

Question

I want to change style of TitleBar in jQueryUI Dialog header, for example I want green background - and it should be applied to only one dialog specified by ID. That's why I wrote something like this:

#sendInviteRequestDialog .ui-dialog .ui-widget-header{
    background-color: green !important;
}

But unfortunately it didn't work. I tried something like this:

#sendInviteRequestDialog > .ui-dialog > .ui-widget-header{
    background-color: green !important;
}

But it also didn't resolve my problem. What am I doing wrong? Thank you in advance.

Answer 1

The dialog markup (the overlay shadow, borders, background, title bar, close button, drag handles, etc) is added outside the div on which you call .dialog(). So #sendInviteRequestDialog .ui-dialog .ui-widget-header will not work as expected.

To stylize a specific dialog, use the dialogClass option:

The specified class name(s) will be added to the dialog, for additional theming.

Example code:

$("#sendInviteRequestDialog").dialog({
    modal: true,
    dialogClass: "custom-dialog-1"
});

Generated markup:

<div class="ui-dialog ui-widget ui-widget-content ui-corner-all custom-dialog-1 ui-draggable ui-resizable" tabindex="-1" role="dialog" aria-labelledby="ui-id-1" style="outline: 0px; z-index: 1002; position: absolute; height: auto; width: 300px; top: 29.5px; left: 125.5px; display: block;">
    <div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix"><span id="ui-id-1" class="ui-dialog-title">Title</span><a href="#" class="ui-dialog-titlebar-close ui-corner-all" role="button"><span class="ui-icon ui-icon-closethick">close</span></a></div>
    <div id="sendInviteRequestDialog" class="ui-dialog-content ui-widget-content" scrolltop="0" scrollleft="0" style="width: auto; min-height: 82px; height: auto;">Content</div>
    <div class="ui-resizable-handle ui-resizable-n" style="z-index: 1000;"></div>
    <div class="ui-resizable-handle ui-resizable-e" style="z-index: 1000;"></div>
    <div class="ui-resizable-handle ui-resizable-s" style="z-index: 1000;"></div>
    <div class="ui-resizable-handle ui-resizable-w" style="z-index: 1000;"></div>
    <div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se ui-icon-grip-diagonal-se" style="z-index: 1000;"></div>
    <div class="ui-resizable-handle ui-resizable-sw" style="z-index: 1000;"></div>
    <div class="ui-resizable-handle ui-resizable-ne" style="z-index: 1000;"></div>
    <div class="ui-resizable-handle ui-resizable-nw" style="z-index: 1000;"></div>
</div>

Example CSS:

.custom-dialog-1 .ui-widget-header {
    background: green;
}

Demo on jsFiddle

Note that I have used background shortcut instead of background-color; this resets all background properties including background image. The title bar's default background color in in fact an image.

Answer 2

The accepted answer suggests the use of "dialogClass" but as of today this is a deprecated property (as of jQuery UI v1.12).

It has been replaced with "classes" - http://api.jqueryui.com/dialog/#option-classes

Example:

$("#sendInviteRequestDialog").dialog({
    modal: true,
    classes: {
        "ui-dialog": "custom-dialog-1"
    }
});

Answer 3

If you want to change the header on a specific dialog you can use something like this without having to modify/override the jquery ui css. the dialogClass option configures the dialog body.

$('#dialog-div-name')
.parent()
.find('.ui-dialog-titlebar')
.addClass('custom-dialog-header-class');