How to customise jquery ui dialog box title color and font size?

Question

How can I change color and other attributes of the jquery ui dialog box title

HTML :
<div id="dialog" title=""
style="display: none; font-size: 15px; width: 500; height: 300"></div>

javascript :
 $( "#dialog" ).dialog( "option", "title",title );

Please give me some idea to customize the title of jquery dialog.Thank you in Advance.

Answer 1

These classes shape the container of the dialog box title

ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix

This class shapes the text

ui-dialog-title

You could edit these classes in the css file for the jquery ui style. Or you could overwrite these in your own css file.

.ui-dialog-title{
    font-size: 110% !important;
    color: #FFFFFF !important;
    background: #000000 !important;
}

The "!important" might not be necessary.

You can find this out yourselves using developer tools.