Editing a Jquery Dialog CSS

Question

I am trying to edit my dialog box to have a transparent title bar that still shows an alternate 'X' to close it, but I am having issues here is my dialog css as of now:

/* Creates the 'X' used to close dialog */
.ui-widget-header .ui-icon 
{
    background-image: url("../Images/X.png") !important;
}  

/* Removes padding from title bar */
.ui-dialog .ui-dialog-titlebar 
{
    padding: 0;
    position: relative;
}
/* Remove title image and keep 'x' */
.ui-widget-header {
    background: transparent repeat-x scroll 50% 50% #F6A828;
    border: 1px solid #E78F08;
    color: #FFFFFF;
    font-weight: bold;
}

As of now the transparent does not over ride the default color (adding !important doesn't change anything either) and the 'x' does not show up (though the default doesn't either). Any suggestions?

EDIT: This link shows the dialog box with my code. Notice how the background is not transparent when it runs. After playing around with it for a bit, I think the image is loading, but I just cannot see it (the colors are very similar) so I think once the title color is resolved that issue will go away as well

I think it works here: jsbin.com/ikaho5 try to put your code there, show us the problem — Calum
– Calum, Commented Apr 19, 2011 at 18:12

Calum · Accepted Answer · 2011-04-20 08:06:54Z

1

As you wish

background: transparent repeat-x scroll 50% 50%;

answered Apr 20, 2011 at 8:06

Calum

5,3361 gold badge24 silver badges27 bronze badges

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

Comments

ChrisThompson · Accepted Answer · 2011-04-19 18:21:18Z

1

Here is something i've done before, not removing the title image, but shrinking it to only contain the 'X'. and all done in the js when opening.

    $('#dialog').dialog();
var d = $('#dialog').dialog('open');

var titleBar = d.parent().find('div.ui-dialog-titlebar');
d.parent().find('span.ui-dialog-title').text('');
titleBar.css({
    'width' : '10px',
    'height' : '10px',
    'float' : 'right',
    'top' : '-35px'//only used to move x above dialog. not needed.
});

answered Apr 19, 2011 at 18:21

ChrisThompson

2,00813 silver badges17 bronze badges

Collectives™ on Stack Overflow

Editing a Jquery Dialog CSS

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related