Home/ Questions/Q 8675763
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-12T20:01:29+00:00

I have a jQueryUI Dialog, but the X to close it is the same

  • 0

I have a jQueryUI Dialog, but the X to close it is the same color as the background. How could I change it. I’ve used the jqueryUI CSS hosted on their site, and it works, so it must be my jQuery theme. I have a live example at http://www.tapmeister.com/dialog/, and the code is listed below. Thanks

<!DOCTYPE HTML>
<html>
    <head>
        <title>test</title>
        <meta charset="utf-8" />
        <meta name="robots" content="noindex" />
        <script src="http://code.jquery.com/jquery-latest.js"></script>
        <link href="css/ui-lightness/jquery-ui-1.9.0.custom.css" type="text/css" rel="stylesheet" />
        <script src="js/jquery-ui-1.9.0.custom.min.js" type="text/javascript"></script>
        <style type="text/css">
            .ui-dialog-titlebar { border:0; background:none; color:#000000; }
        </style> 

        <script type='text/javascript'>
            $(document).ready( function() {$("#dialog").dialog({autoOpen: true});});
        </script>

    </head>

    <body>
        <div id="dialog" title="Title">Hi There!</div>
    </body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Your image color is white: http://www.tapmeister.com/dialog/css/ui-lightness/images/ui-icons_ffffff_256x240.png

    Open the file in Photoshop or some other photo editing program. Then do a color overlay to the color you want. In Photoshop it would be “menu > layer > layer style > color overlay”. Save, then upload file.

    It may be better just to use your existing orange image. Just use CSS opacity.

    .ui-widget-header .ui-icon {
background-image: url(images/ui-icons_ef8c08_256x240.png);
opacity: 0.4;
filter: alpha(opacity=40);
}

.ui-state-hover .ui-icon, .ui-state-focus .ui-icon {
background-image: url(images/ui-icons_ef8c08_256x240.png);
opacity: 1;
filter: alpha(opacity=100);
}

    This way there will be one less image called.

    EDIT:

    Find Code:

    .ui-state-hover .ui-icon, .ui-state-focus .ui-icon {
background-image: url(images/ui-icons_ef8c08_256x240.png);
}
.ui-widget-header .ui-icon {
background-image: url(images/ui-icons_ffffff_256x240.png);
}

    Replace With:

    .ui-widget-header .ui-icon {
background-image: url(images/ui-icons_ef8c08_256x240.png);
opacity: 0.4;
filter: alpha(opacity=40);
}

.ui-state-hover .ui-icon, .ui-state-focus .ui-icon {
background-image: url(images/ui-icons_ef8c08_256x240.png);
opacity: 1;
filter: alpha(opacity=100);
}
    • 0