So geben Sie die JQuery-Symbolfarbe an (überschreiben).

Ich habe die jQuery-Symbole in meiner Web-App gut genutzt, bin aber an einem Punkt angelangt, an dem ich gerne eine Farbe verwenden möchte, die ich standardmäßig nicht erreichen kann. Ich verwende derzeit das Thema “State Street”, das hauptsächlich Grün verwendet. Aber ich habe ein rotes Feld mit weißem Text und möchte auch ein weißes Symbol verwenden. 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 in grün geändert, was ich rot belassen möchte.

Gibt es eine Möglichkeit (höchstwahrscheinlich über CSS), das Hintergrundbild zu überschreiben, das jQuery für die Symbole verwendet, damit ich eine andere Farbe verwenden kann?

Vielen Dank.

KLÄRUNG: Ich denke, es würde mir helfen, den HTML-Code zu posten, mit dem ich gerade arbeite:

<!-- 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 derzeit auskommentiert, damit ich es sehen kann. Ich habe es so eingerichtet, dass es bei Fehlern einblendet. Nochmals vielen Dank für die Hilfe.

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

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

Sie können die Icon-PNG-Datei in jeder gewünschten Farbe herunterladen. Ändern Sie einfach den Farbteil in der folgenden URL:

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

Wenn Sie beispielsweise rote Symbole und kornblumenblaue Symbole möchten, benötigen Sie folgende URLs:

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

usw.

(aber verwende die URL nicht als CDN, sei nett und speichere die Dateien lokal)

SELBSTANTWORT: Ich habe die URL des Hintergrundbilds selbst als die Datei angegeben, die die weißen Symbole verwendet. Also habe ich meiner CSS-Datei ein paar Zeilen hinzugefügt:

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

Dies überschreibt im Wesentlichen das Hintergrundbild, das die standardmäßige jQuery-CSS-Datei für das Symbol verwenden möchte, und erreicht die gewünschte Farbe. Dies funktionierte natürlich nur, weil dem Design eine .png-Datei mit weißen Symbolen beigefügt war. Wenn ich eine verrückte Farbe wie Lila haben wollte, hätte ich meine eigenen Symbole erstellen müssen. Beachten Sie, dass ich die URL in meiner eigenen CSS-Datei gegenüber der in der jQuery-CSS-Datei angegebenen URL verlängern musste, da sie sich an zwei verschiedenen Stellen in meiner Quelle befinden.

Verwenden Sie den integrierten Symbolgenerator für die Symbolfarbe # 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;
}

Der wahrscheinlich einfachste Weg, dies zu tun, besteht darin, genau herauszufinden, welche Bilddatei jQuery für die Symbole verwendet, und dann diese Bilddatei zu ändern (oder eine eigene zu erstellen) und sie an Ort und Stelle abzulegen.

Tasten:[
text: //dont use this
html:’ No’,”class”:’bg-secondary text-white p-2 border-0′,
click: function() {
$(this).dialog(“close”);
}
]

Für lokal gespeicherte 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>}