So ändern Sie das Symbol Füllfarbe in toastr

Habe ich toastr Erfolgs-und Fehlermeldungen angezeigt, die in meiner Anwendung. Ich ändert die Farben der hintergrund und die Schriftfarbe. Ich möchte zum ändern der icon-Farben in den Nachrichten sehen. Ich habe überall gesucht, aber ich kann nicht einen Weg finden, ändern Sie die Füllfarbe der Symbol-oder zumindest das ändern des symbols. Unten ist ein screenshot von dem Erfolg Nachricht
So ändern Sie das Symbol Füllfarbe in toastr

Unten ist die Fehlermeldung,

So ändern Sie das Symbol Füllfarbe in toastr

Will ich ändern, die Symbole, die in diesen Nachrichten ändern Sie die Füllfarbe der Symbole. Der code in der js-Datei,

.success(function(data) {
     toastr.success('Successfully Build ', 'Congratulations!', {
                        closeButton: true
                    });
}).error(function(err) {
    toastr.error('Cant Build', 'Error', {
                        closeButton: true
                    });

In css,

#toast-container > .toast-success {
    background-image: none;
    background-color: #e9e9e9;
    color: black;
}
#toast-container > .toast-error {
    background-image: none;
    background-color: #e9e9e9;
    color: red;
}
  • Bitte teilen Sie Ihren code...
InformationsquelleAutor shamila | 2016-07-13
  1. 3

    Toaster verwendet hintergrund-PNG-Bilder (24x24 Pixel) für das Symbol, so dass Ihre beste Möglichkeit ist, einfach ersetzen Sie Sie durch eine farbige version, die Sie im Voraus zubereitet.

    Lassen Sie uns sagen, Sie bereiten eine "schwarze Häkchen' PNG von der gleichen Größe, dann CSS:

    #toast-container>.toast-success {
background-image: url(<insert here the url pointing to your new PNG>)!important;
}

    Nun erstellen Sie das Symbol in der Farbe, die Sie wollen, überprüfen Sie flaticon.com (oder ähnliche Seiten). Sie sollten in der Lage sein zu finden, royalty-free icons und laden Sie Sie von der Größe und der Farbe, die Sie wollen.

    InformationsquelleAutor Jean-Yves Fargeat
  2. 4

    Versuchen, verwenden Sie diese Beispiel-code zu haben, crimson Herz 

    style.css

#toast-container > .toast-success:before {
    content: "\f004";
    color: crimson;
}
    InformationsquelleAutor V.Tran
  3. 0

    Ich weiß, das ist eine alte Frage, aber ich fand eine bessere Lösung (ohne neu schreiben die vorhandenen toastr Vorlagen Symbole).
    Wenn Sie nicht möchten, ändern Sie das aktuelle Symbol der 'toastr-Erfolg", sondern neu anlegen möchten "Vorlagen" mit unterschiedlichen icons - diese können Sie verwenden, übergeben Sie ein spezielles icon-Klasse in der JS:

    toastr.info("Click To Open", "more text",{iconClass:"toast-custom"});

    Und dann einfach die CSS von "toast-custom":

     /* this will set the toastr icon */
 #toast-container > .toast-custom {
    content: "\f00C";
}

/* this will set the toastr style */
.toast-custom {
    background-color: purple;
}

    Ich hoffe das hilft!

    InformationsquelleAutor Niv Apo
Schreibe einen Kommentar