Change the gray color of the dialog

Question

Im using the folloing dialog and I want to change the gray color for the button and the header to blue, how should I do that?

This is the code

 $dialog.dialog({
            autoOpen: false, 
            modal: true,    
            show: {effect: 'fade', duration: 2000},
            buttons: {

enter image description here

http://stackoverflow.com/questions/12511609/customize-the-style-for-specific-jquery-ui-dialog-box-not-all-the-dialogs — Andrew, Jun 06 '14 at 07:38
@Andrew-Ive already try with $("#dialog").parent().find(".ui-dialog-titlebar-close").css("background", "#1C1C1C"); which is not working for the header... — John Jerrby, Jun 06 '14 at 07:41

score 2 · Answer 1 · answered Jun 06 '14 at 07:39

2

JqueryUI has ThemeRoller which lets you style it's appearance. You can also do it manually but you should check it out first:

http://jqueryui.com/themeroller/

answered Jun 06 '14 at 07:39

decho

494
1
4
9

Ali Gajani · Accepted Answer · 2014-06-07T07:08:55.483

1

This would style your buttons.

  open: function (e, ui) {
        $(this).parent().find(".ui-dialog-buttonpane .ui-button")
            .addClass("orange");
    }
});

CSS

.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset .orange {
   /* put styling here */
}

For title bar:

.ui-dialog > .ui-widget-header {background: red;}

edited Jun 07 '14 at 07:08

answered Jun 06 '14 at 07:42

Ali Gajani

14,762
12
59
100

Hi Ali,wheh I use the code which you provided for JS I got error anonymus function is used as declaration,any idea how to overcome it? – John Jerrby Jun 06 '14 at 07:51
Thanks Ali Voted up!,this is exactly what I need for the buttons,what about the gray line in the header ,is it possible to change it either? – John Jerrby Jun 06 '14 at 11:12
1

Hi Ali,im talking about .ui-dialog-titlebar ,how should i add it to your CSS ?when i add it to the css that you provide its not working... – John Jerrby Jun 07 '14 at 07:07
Hey @JohnJerrby, see my edit and if I helped you, +1 and mark as solve. – Ali Gajani Jun 07 '14 at 07:08
That line of CSS allows you to change title bar color. I tested it :) – Ali Gajani Jun 07 '14 at 07:14

score 1 · Answer 3 · answered Jun 06 '14 at 12:13

1

Here is the code - $div.dialog({ modal: true, maxHeight:500, }).prev(".ui-dialog-titlebar").css("background","blue");

answered Jun 06 '14 at 12:13

Manvi

775
6
2

Change the gray color of the dialog

3 Answers3