Dialog box icon

Question

I have the following script where I have been trying to customise the look and feel of the dialog box:

http://jsfiddle.net/7CvZ9/18/

However, I can't seem to figure out how to customise the close icon.

Does anyone know how to do that?

I have customised other parts of the dialog but looking at the theme api:

http://jqueryui.com/docs/Theming/API

But from that link, I can't figure out how to customise the close icon.

So basically, I want to replace the existing 2 state image, with my own 2 state image sprite file.

Answer 1

Use this CSS:

.ui-dialog-titlebar-close {
    /* Default image */
    background-image:url('http://www.charlottemotorspeedway.com/images/icon_x.png');
}

.ui-dialog-titlebar-close:hover,
.ui-dialog-titlebar-close:focus {
    background-color:transparent !important;
    border:none !important;
    /* Hover state image */
    background-image:url('http://www.charlottemotorspeedway.com/images/icon_x.png') !important;
}

Example, I swapped out the X for a new image: http://jsfiddle.net/AlienWebguy/7CvZ9/22/