6

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.

sunleo
  • 10,589
  • 35
  • 116
  • 196

1 Answers1

15

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.

Tsasken
  • 689
  • 5
  • 16
  • thank you it was useful. but title to be changed as header in class name. – sunleo Oct 22 '12 at 09:12
  • 1
    .ui-widget-header { border: 1px solid #aaaaaa; background: #cccccc url(images/ui-bg_highlight-soft_75_cccccc_1x100.png) 50% 50% repeat-x; color: brown; font-size: medium; } – sunleo Oct 22 '12 at 09:18