css - How To Specify (Override) JQuery Icon Color

Question

I've been making good use of the jQuery icons in my web app, but have come to a point where I would like to use a color that I'm not able to achieve by default. I'm currently using the "State Street" theme, which primarily uses green. But I have a red box with white text, and would like to use an icon that is white as well. There are white icons that are supplied with the theme, but they only get applied when the icons are inside a div (or some other container) that has a class of "ui-state-focus". This will make the icon white, but will change the background color to green, which I want to leave as red.

Is there any way (most likely via CSS) to override what background image jQuery uses for the icons, so that I can use a different color?

Thanks.

CLARIFICATION: I guess it would help for me to post the html I'm currently working with:

<!-- currently produces a default 'grey' icon color -->
<!-- this b/c no jquery ui class (like ui-state-focus) given for errorMessage div -->
<div id="errorMessage">
    <span class="ui-icon ui-icon-alert" style="float: left"></span>
    Only 1 Activity can be added at a time 
</div>

I also have CSS:

.dialog #errorMessage
{
    /*display: none;*/
    background-color: #CC3300;
    color: #FFFFFF;
    font-weight: bold;
    padding-top: 3px;
    padding-bottom: 3px;
    vertical-align: bottom;
    bottom: auto;
    font-size: .80em;
    width: 100%
}

"display: none" is currently commented out so I can see it. I do have it set up to fadeIn on error catch. Thanks again for the help.

Answer 1

You can overwrite the icons with the following CSS:

.ui-icon
{
    background-image: url(icons.png);
}

You can download the icon png file in any color you like. Just change the color part in the following url:

http://download.jqueryui.com/themeroller/images/ui-icons_*COLOR*_256x240.png

For example, if you want Red icons, and Cornflower Blue icons, the URLs you need are:

http://download.jqueryui.com/themeroller/images/ui-icons_ff0000_256x240.png
http://download.jqueryui.com/themeroller/images/ui-icons_6495ED_256x240.png

etc.

(but don't use the URL as a CDN, be nice and save the files locally)