SVG Icons bei Malibu

Thema wurde von handkante, 29. Mai 2020 erstellt.

  1. handkante
    handkante Erfahrener Benutzer
    Registriert seit:
    17. Juli 2018
    Beiträge:
    239
    Danke erhalten:
    5
    Danke vergeben:
    76
    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ß
     
  2. MosTec
    MosTec Erfahrener Benutzer
    Registriert seit:
    10. Februar 2014
    Beiträge:
    182
    Danke erhalten:
    15
    Danke vergeben:
    23
    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. ;)
     
  3. barbara
    barbara G-WARD 2014-2020
    Registriert seit:
    14. August 2011
    Beiträge:
    35.657
    Danke erhalten:
    11.371
    Danke vergeben:
    1.616
    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;
    }
     
  4. handkante
    handkante Erfahrener Benutzer
    Registriert seit:
    17. Juli 2018
    Beiträge:
    239
    Danke erhalten:
    5
    Danke vergeben:
    76
    Hallo Barbara,

    Shopversion ist 4.1.1.0

    Wo muss ich dieses eigene css eintragen ?
     
  5. barbara
    barbara G-WARD 2014-2020
    Registriert seit:
    14. August 2011
    Beiträge:
    35.657
    Danke erhalten:
    11.371
    Danke vergeben:
    1.616
    Das eigene css trägst Du im Style Editor ein.
    Zu finden ist das Eingabefeld über die drei Punkte oben rechst.
     
  6. handkante
    handkante Erfahrener Benutzer
    Registriert seit:
    17. Juli 2018
    Beiträge:
    239
    Danke erhalten:
    5
    Danke vergeben:
    76
    Mit StyleEdit4 kann ich das irgendwie nicht aufrufen
     
  7. handkante
    handkante Erfahrener Benutzer
    Registriert seit:
    17. Juli 2018
    Beiträge:
    239
    Danke erhalten:
    5
    Danke vergeben:
    76
    Ich schick mal ein bild damit ihr sieht wie es bei mir ausschaut
     

    Anhänge:

  8. handkante
    handkante Erfahrener Benutzer
    Registriert seit:
    17. Juli 2018
    Beiträge:
    239
    Danke erhalten:
    5
    Danke vergeben:
    76
    Das was rot ist, ist wird eigentlich schwarz. Ich habs mal nur rot gemacht, damit es sichtbar wird die bildchen.
     
  9. barbara
    barbara G-WARD 2014-2020
    Registriert seit:
    14. August 2011
    Beiträge:
    35.657
    Danke erhalten:
    11.371
    Danke vergeben:
    1.616
    Du bist da schon viel zu weit.

    Unbenannt.JPG

    darüber kannst Du eigenes css eingeben
     
  10. handkante
    handkante Erfahrener Benutzer
    Registriert seit:
    17. Juli 2018
    Beiträge:
    239
    Danke erhalten:
    5
    Danke vergeben:
    76
    Ok. Hab den css Code eingefügt. Leider keine Veränderung.
     
  11. Anonymous
    Anonymous Erfahrener Benutzer
    Registriert seit:
    3. August 2012
    Beiträge:
    156
    Danke erhalten:
    32
    Danke vergeben:
    63
    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;
    }
     
  12. handkante
    handkante Erfahrener Benutzer
    Registriert seit:
    17. Juli 2018
    Beiträge:
    239
    Danke erhalten:
    5
    Danke vergeben:
    76
    Perfekt. Ich könnt euch beide umarmen :-D
     
  13. handkante
    handkante Erfahrener Benutzer
    Registriert seit:
    17. Juli 2018
    Beiträge:
    239
    Danke erhalten:
    5
    Danke vergeben:
    76
    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
     

    Anhänge:

  14. barbara
    barbara G-WARD 2014-2020
    Registriert seit:
    14. August 2011
    Beiträge:
    35.657
    Danke erhalten:
    11.371
    Danke vergeben:
    1.616
    versuche es mal mit
    Code:
    #header .navbar-secondary .navbar-nav > li > a:hover, #header .navbar-secondary .navbar-nav > li > a:focus {
        color: #000;
    }
     
  15. barbara
    barbara G-WARD 2014-2020
    Registriert seit:
    14. August 2011
    Beiträge:
    35.657
    Danke erhalten:
    11.371
    Danke vergeben:
    1.616
    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.
     
  16. handkante
    handkante Erfahrener Benutzer
    Registriert seit:
    17. Juli 2018
    Beiträge:
    239
    Danke erhalten:
    5
    Danke vergeben:
    76
    Ok werd es mir mal anschauen.
     
  17. handkante
    handkante Erfahrener Benutzer
    Registriert seit:
    17. Juli 2018
    Beiträge:
    239
    Danke erhalten:
    5
    Danke vergeben:
    76
    Ok. Hab das Hintergrund in schwarz gemacht. So sieht man wenigstens das Bildchen. :)
     
  18. barbara
    barbara G-WARD 2014-2020
    Registriert seit:
    14. August 2011
    Beiträge:
    35.657
    Danke erhalten:
    11.371
    Danke vergeben:
    1.616
    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)
     
  19. handkante
    handkante Erfahrener Benutzer
    Registriert seit:
    17. Juli 2018
    Beiträge:
    239
    Danke erhalten:
    5
    Danke vergeben:
    76
    Das zweite css das du gepostet hat, hatte so nicht funktioniert Barbara. Vllt. hat da noch was gefehlt.
     
  20. Anonymous
    Anonymous Erfahrener Benutzer
    Registriert seit:
    3. August 2012
    Beiträge:
    156
    Danke erhalten:
    32
    Danke vergeben:
    63
    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?