SVG Icons bei Malibu

Guten Morgen ihr lieben,

Ich möchte beim Malibu, die oben rechts in der Ecke sich befindende Icons in weiss ändern.

Folgende Icons sind betroffen:

account.svg
globe.svg
cart.svg
wishlist.svg

Egal wie ich das ändere, ich bekomme es einfach nicht gebacken, dass diese in weiss angezeigt werden auf einen schwarzen Hintergrund.

Hat jemand einen Rat ?

Schönen Gruß

 

svg´s sind ja quasi Bilder.

Heisst Du musst Dir das Bild vom Server oder aus dem Original Ordner nehmen und die dann in der Farbe ändern.

 

Welche Shopversion?
in einem 4.0 müsste es damit im eigenen css gehen:

Code:

#header .navbar-secondary .navbar-nav > li > a svg path, #header .navbar-secondary .navbar-nav > li > a svg polygon {
    fill: #fff;
}

 

Hallo Barbara,

Shopversion ist 4.1.1.0

Wo muss ich dieses eigene css eintragen ?

 

Das eigene css trägst Du im Style Editor ein.
Zu finden ist das Eingabefeld über die drei Punkte oben rechst.

 

Mit StyleEdit4 kann ich das irgendwie nicht aufrufen

 

Ich schick mal ein bild damit ihr sieht wie es bei mir ausschaut

 

Das was rot ist, ist wird eigentlich schwarz. Ich habs mal nur rot gemacht, damit es sichtbar wird die bildchen.

 

Du bist da schon viel zu weit.



darüber kannst Du eigenes css eingeben

 

Ok. Hab den css Code eingefügt. Leider keine Veränderung.

 

Ich klinke mich mal kurz dazwischen.
Der Code von Barbara ist schon richtig. Es muss allerdings noch ein !important vor das Semikolon. Dann geht es.

Hier der vollständige Code:

Code:

#header .navbar-secondary .navbar-nav > li > a svg path, #header .navbar-secondary .navbar-nav > li > a svg polygon {
    fill: #fff !important;
}

 

Perfekt. Ich könnt euch beide umarmen :-D

 

Jetzt eine aller letzte Frage.
Wir ich mit dem Mauszeiger auf das Männchen drauf gehe, öffnet sich das dropdown menü.

Hier ist der Hintergrund weiss. Jetzt ist das männchen ja auch weiss.

Kann man mit css das männchen hier schwarz anzeigen lassen wenn sich das dropdown menü öffnet

 

versuche es mal mit

Code:

#header .navbar-secondary .navbar-nav > li > a:hover, #header .navbar-secondary .navbar-nav > li > a:focus {
    color: #000;
}

 

Ich habe jetzt im SE gefunden, wo man die Farben ändern kann:
Bereiche -> Header -> Standard -> Sekundär-Spalte -> Menü-Punkte

Man muss dafür den Experten-Modus aktiviert haben.

 

Ok werd es mir mal anschauen.

 

Ok. Hab das Hintergrund in schwarz gemacht. So sieht man wenigstens das Bildchen.

 

Du hättest auch die Hover-Farbe ändern können (das Icon wenn man mit der Maus drüber geht) und die für aktiv (wenn man drauf klickt)

 

Das zweite css das du gepostet hat, hatte so nicht funktioniert Barbara. Vllt. hat da noch was gefehlt.

 

Stimmt, hatte ich bei mir auch getestet. Ohne Erfolg, auch mit dem !important Zusatz klappte das nicht.
Ich habe dann diesen Code benutzt:

Code:

#header .navbar-secondary .navbar-nav .open > a svg path, #header .navbar-secondary .navbar-nav .open > a:hover svg path, #header .navbar-secondary .navbar-nav .open > a:focus svg path, #header .navbar-secondary .navbar-nav .open > a svg polygon, #header .navbar-secondary .navbar-nav .open > a:hover svg polygon, #header .navbar-secondary .navbar-nav .open > a:focus svg polygon {
    fill: #000;
}

Der geht, erschien mir aber doch sehr lang. Dennoch, es funktioniert.
Aber brauchst du den CSS-Code überhaupt noch?