jQuery dialog theme and style

Question

How do I change the background color of the title bar of a jQuery dialog?

I have looked at the themeroller but it does not seem to work for me.

Thanks

Answer 1

The previous example works well but with only the red color of the error theme.

Here a simple solution with just changing the header image in the css:

css:

.ui-widget-header-custom{ 
    background: #f6a828 url(../images/ui-bg_flat_95_0a43ac_40x100.png) 50% 50% repeat-x;      
}

javascript:

$('#my_dialog').dialog({ 
    open: function(event, ui){ 
        $(this).parents(".ui-dialog:first").find(".ui-widget-header")
            .removeClass("ui-widget-header").addClass("ui-widget-header-custom");
    }
});

Notice that contrary to the previous example, I removed the:

removeClass("ui-widget-header")

instead of just adding the class on the:

find(".ui-dialog-titlebar")

Must note that this example works with the dialog header without its link.