How to change the jquery ui dialog button/background color using API?

Question

I am using the jquery ui dialog. I have looked at How to change the jquery ui dialog button color? but it looks they this user is taking a different approach.

I am using the dialog buttons option.

Here is my javascript:

$(document).ready(function(){
    $("#credentialsDialog").dialog({
        autoOpen: false,
        buttons: {
            Submit: function() {
              $( this ).dialog( "close" );
            }
        },
        dialogClass: 'ui-dialog-titlebar'
    });
    $( "#opener" ).click(function() {
        $("#credentialsDialog").dialog('open');
    });
});

Here is the CSS it is referring to:

.ui-dialog-titlebar {
  background-color: #f6f6ff;
  background-image: none;
  color: #f6f6ff;
}

I have also tried this found here:

buttons: {
            Submit: function() {
              $( this ).dialog( "close" );
            },
            'class': 'ui-dialog-titlebar'
        }

But this is not working either.

What is the correct way to change the background color of the button area?

Here is my dialog so far:

j08691 · Accepted Answer · 2015-11-17 17:11:56Z

0

If you want to style the buttons, target them with:

.ui-dialog .ui-dialog-buttonpane button.ui-button {
/* your rules here */
}

answered Nov 17, 2015 at 17:11

j08691

209k33 gold badges269 silver badges281 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Chris Bolton Over a year ago

so the .ui-dialog-buttonpane will change the background color, correct?

j08691 Over a year ago

.ui-dialog-buttonpane is the class attached to the div that the buttons reside in. You want to use that class to make sure your rules are more specific than the default CSS.

Collectives™ on Stack Overflow

How to change the jquery ui dialog button/background color using API?

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related