jQueryUI.dialog: override single css style property?

Question

jQuery UI themes are nice they apply to the entire document, however I have some cases where the style of the dialog such as the title bar colour must be changed.

In my jQuery UI css, the titlebar is coded:

.ui-dialog .ui-dialog-titlebar { padding: .4em 1em; position: relative; }

Here's my javascript:

var $AlertDialog = $('<div"></div>')
.dialog({
  autoOpen: false,
  title: 'Alert Message',
  buttons: {Ok: function() {$( this ).dialog( "close" );}}
});     

function Alerter(cTxt)
{
  $AlertDialog.html(cTxt);
  $AlertDialog.css('ui-dialog-titlebar','color: red');
  $AlertDialog.dialog('open');
};

Alerter() is then called as a substitute for alert().

Accessing and altering the color property of 'ui-dialog-titlebar' has no effect.

Lots of reading preceded this question. Seems others have had similar issues, but not specific to jQuery UI.

How can this be done?

Update:

Thanks to a good hint, I did this:

$AlertDialog.dialog('open');
$("#.ui-dialog .ui-dialog-title").css('color','red');
$("#.ui-dialog .ui-dialog-title").css('background-color','orange');

Works. But acceptable practice?

Why not add a class and style it with CSS?

meleyal
– meleyal

2011-10-15 20:18:59 +00:00
Commented Oct 15, 2011 at 20:18 — meleyal
– meleyal, Commented Oct 15, 2011 at 20:18

stuisme · Accepted Answer · 2012-04-10 17:33:51Z

1

My suggestion would be to not use the .ui-dialog selector as there may be more than one dialog on a page. You can traverse to the title bar.

    ...
    $AlertDialog.html(cTxt);
    // might as well use the theme since its part of jquery ui
    $AlertDialog.prev().addClass("ui-state-error");
    $AlertDialog.dialog('open');

answered Apr 10, 2012 at 17:33

stuisme

112 bronze badges

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

Comments

asdf_enel_hak · Accepted Answer · 2011-10-16 05:06:49Z

0

Firstly,

According to documentation .css() takes property as param.
It seems you are trying changing ui-dialog-titlebar. Instead try this:

...
function Alerter(cTxt)
{
  $AlertDialog.html(cTxt);
  $AlertDialog.dialog('open');
  $(".ui-dialog .ui-dialog-title").css('color','red'); 
  $(".ui-dialog .ui-dialog-title").css('background-color','orange'); 
  //Assuming you want to change header color only
  //see the theming structure at http://jqueryui.com/demos/dialog/#theming
};

edited Oct 16, 2011 at 5:06

answered Oct 15, 2011 at 20:21

asdf_enel_hak

7,6585 gold badges47 silver badges91 bronze badges

2 Comments

Mark Richards Over a year ago

$moguzalp You provided a great hint. Using > span produced an error, but I got it another way.

Mark Richards Over a year ago

$AlertDialog.dialog('open'); $("#.ui-dialog .ui-dialog-title").css('color','red'); $("#.ui-dialog .ui-dialog-title").css('background-color','orange');

Collectives™ on Stack Overflow

jQueryUI.dialog: override single css style property?

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related