Angeben (Überschreiben) von JQuery-Symbolfarbe

Question

Ich habe die jQuery-Symbole in meiner Webanwendung gut genutzt, bin aber an einen Punkt gekommen, an dem ich eine Farbe verwenden möchte, die ich nicht erreichen kann standardmäßig. Ich verwende derzeit das Thema "State Street", das hauptsächlich grün verwendet. Aber ich habe eine rote Box mit weißem Text und würde gerne ein Symbol verwenden, das ebenfalls weiß ist. Es gibt weiße Symbole, die mit dem Thema geliefert werden, aber sie werden nur angewendet, wenn sich die Symbole in einem div (oder einem anderen Container) befinden, das eine Klasse von "ui-state-focus" hat. Dadurch wird das Symbol weiß, aber die Hintergrundfarbe wird grün, was ich als rot belassen möchte.

Gibt es eine Möglichkeit (am wahrscheinlichsten über CSS), welches Hintergrundbild jQuery für die Symbole verwendet, damit ich eine andere Farbe verwenden kann?

Danke.

KLARSTELLUNG: Ich denke, es würde zu helfen, für mich die HTML zu schreiben arbeite ich zur Zeit mit:

<!-- 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> 

Ich habe auch 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" ist momentan auskommentiert, damit ich es sehen kann. Ich habe es eingerichtet, FadeIn bei Fehler Catch. Danke nochmal für die Hilfe.

Answer 1

Sie die Symbole mit den folgenden CSS überschreiben können:

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

Sie das Symbol png-Datei herunterladen in jeder Farbe, die du magst. Ändern Sie einfach die Farbe an der folgenden URL:

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

Zum Beispiel, wenn Sie Rote Symbole wollen, und Kornblumenblau-Symbole, die URLs, die Sie benötigen, sind:

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

usw.

(aber nicht die URL als CDN verwenden, nett sein, und die Dateien lokal speichern)

Answer 2

Wahrscheinlich die einfachste Möglichkeit, das herauszufinden, ist genau herauszufinden, welche Bilddatei jQuery für die Symbole verwendet, und dann diese Bilddatei zu ändern (oder eine eigene zu erstellen) und sie an ihren Platz zu legen.

Answer 3

SELBSTANTWORT: Die Hintergrundbild-URL wurde als die Datei angegeben, die die weißen Symbole verwendet. Also habe ich ein paar Zeilen zu meiner CSS-Datei:

.dialog #errorMessage .ui-icon 
{ 
    background-image: url(../../CSS/themes/custom_green/imag/ui-icons_ffffff_256x240.png); 
} 

Dies resultierte im Wesentlichen das Hintergrundbild überschreibt, dass die Standard jQuery CSS-Datei für das Symbol verwenden möchte, und erreicht die Farbe, die ich wollte. Natürlich funktionierte das nur, weil eine weiße Png-Datei mit dem Thema enthalten war. Wenn ich eine verrückte Farbe, wie Lila, wollte, hätte ich meine eigenen Icons erstellen müssen. Beachten Sie, dass ich die URL in meiner eigenen CSS-Datei im Vergleich zur URL, die in der jQuery-CSS-Datei angegeben ist, verlängern musste, da sie sich an zwei verschiedenen Stellen in meiner Quelle befinden.

Answer 4

Verwendung Einbau-Ikongenerator für Iconfarbe # 00a300 # dunkelgrün

.ui-icon 
{ 
    background-image: url(http://jqueryui.com/themeroller/images/?new=00a300&w=256&h=240&f=png&fltr[]=rcd|256&fltr[]=mask|icons/icons.png) !important; 
} 

Answer 5

Für lokal gespeicherten CSS-Datei in diesem Fall Farbe Rot:

<style> 
#my_id .ui-icon { 
    background-image: url(my_css_file_location/ui-icons_cd0a0a_256x240.png); 
} 
</style>}