Question

Am using Jquery Dialog box in my xhtml page. Since there are 2 Jquery Dialog box and look & feel of each box was different from the other, I had to use addClass attribute and this has been discussed in this post. Now I have to override many classes like ui-dialog, ui-corner-all, ui-widget-header etc. So, I went on adding the classes using addClass. Code is below,

$('.ui-widget-content').addClass('new-ui-widget-content');
$('.ui-widget').addClass('new-ui-widget');
$('.ui-dialog .ui-dialog-titlebar').addClass('new-ui-dialog new-ui-dialog-titlebar');
$('.ui-widget-header').addClass('new-ui-widget-header');
 $('.ui-helper-clearfix').addClass('new-ui-helper-clearfix');
 ....

$j("#dialog").dialog({
dialogClass: 'new-ui-widget-content',
dialogClass: 'new-ui-widget',
dialogClass: 'new-ui-dialog new-ui-dialog-titlebar',
dialogClass: 'new-ui-widget-header',
dialogClass: 'new-ui-helper-clearfix',
....

But, I noticed that only 1 of the classes is getting overridden. I mean to say, though I have overridden many classes, only new-ui-widget-content is getting overridden(which is placed first).

I also tried in below way. But it gives syntax error.

    $j("#dialog").dialog({
        dialogClass: 'new-ui-widget-content','new-ui-widget',......

Can multiple classes be overridden by addClass?

If so, how it can be done?

Answer 1

You really should overwrite unwanted styling from CSS, not by exchanging multiple CSS classes via JavaScript. All you need is some identifier for the second dialog. If #dialog is the first one, I guess the second one is named something along #dialog2.

Add a second stylesheet file to the HTML page or append to the original jquery-ui-rev.css.
You additional styles should reflect the slectors in question, but preceded by a #dialog2, which increases the specificity and sets special formattings for any such classes inside a wrapper named #dialog2.

As I couldn’t find a jquery-ui-rev.css, I’ll give you an example based on the jquery.ui.dialog.css.

If you want to overwrite some specific property from the selector .ui-dialog, which is in original:

.ui-dialog { position: absolute; padding: .2em; width: 300px; overflow: hidden; }

…you could do so by setting up another selector, while only re-specifying the appropriate properties:

#dialog2 .ui-dialog {
    width: 500px;
}