Anleitung Breadcrump verschönern

Thema wurde von mark33ac, 25. Oktober 2014 erstellt.

  1. mark33ac
    mark33ac Aktives Mitglied
    Registriert seit:
    11. September 2014
    Beiträge:
    25
    Danke erhalten:
    6
    #1 mark33ac, 25. Oktober 2014
    Hallo zusammen,


    um die Breadcrump Navigation etwas zu verschönern, bzw. den gerade aktiven Pfad hervorzuheben gibt es eine ganz einfache Lösung.


    Einfach eine Usermod CSS anlegen oder eine bestehende erweitern und folgendes einfügen:


    #breadcrumb_navi a:last-of-type {
    font-weight:bold;
    color:#063;
    }
    #breadcrumb_navi span {
    font-size:12px !important;
    vertical-align:middle !important;
    line-height:14px !important;
    }
    #breadcrumb_navi a:first-of-type {
    font-weight:normal;
    color:#666;
    }


    Damit habt Ihr die Möglichkeit das letzte und somit aktive Element anders darzustellen als den Rest des Breadcrumps.


    Viele Grüße
    Mark
     

    Anhänge:

  2. Starter
    Starter Erfahrener Benutzer
    Registriert seit:
    4. Juli 2011
    Beiträge:
    55
    Danke erhalten:
    5
    Danke vergeben:
    6
    #2 Starter, 6. März 2015
    Hallo Mark,
    erste einmal danke, dass Du so etwas mit der Gemeinschaft teilst.
    Funktioniert das auch mit der Shopversion 2.1.5.2 ?
    Ich suche mir schon seit ein paar Stunden die Augen eckig, weil es bei mir nicht funktioniert.

    Die Breadcrump Navigation (headerNavigation) scheint bei der Version 2.1.x in der "head_toolbox_inner" zu liegen und nicht mehr in der "breadcrumb_navi".
    Dadurch habe ich auch bei langen Kategorie- und Artikelnamen eine Verschiebung des Warenkorbs (siehe Bild)
    Navigation 2.1.5.2.jpg
    Bei der Version 2.0.15.1 war alles OK, da ich da die Breadcrump Navigation in der "breadcrumb_navi" sep. bearbeiten konnte
    Navigation 2.0.15.1.jpg
    Was muss ich jetzt wie ändern, damit das Layout wieder passt ?
    Einfach die Breadcrump Einträge in eine css Datei zu packen und unter EyeCandy/usermod/css abzuspeichern hat keinen Erfolg gebracht.

    Wer kann mir helfen ?
    Danke und Gruß
    Thomas
     
  3. barbara
    barbara G-WARD 2014-2020
    Registriert seit:
    14. August 2011
    Beiträge:
    35.627
    Danke erhalten:
    11.348
    Danke vergeben:
    1.614
    #3 barbara, 6. März 2015
    Du kannst mit einem "width" die Breite von
    #breadcrumb_navi
    begrenzen.

    Um Dir genauer helfen zu können braucht man aber den Link zu Deinem Shop.
     
  4. mark33ac
    mark33ac Aktives Mitglied
    Registriert seit:
    11. September 2014
    Beiträge:
    25
    Danke erhalten:
    6
    #4 mark33ac, 6. März 2015
    @Starter


    Folgendes in eine UserMod CSS packen, dann läuft es auch mit Version 2.1.5.2




    //Das jeweils letzte Element im Breadcrump
    #breadcrumb_navi span:last-child > a {
    font-weight:bold;
    color:#063;
    }


    //Das jeweils erste Element im Breadcrump
    #breadcrumb_navi span:first-child > a {
    font-weight:normal;
    color:#666;
    }


    #breadcrumb_navi span {
    font-size:11px !important;
    vertical-align:middle !important;
    line-height:14px !important;
    }


    Viele Grüße
    Mark
     
  5. Starter
    Starter Erfahrener Benutzer
    Registriert seit:
    4. Juli 2011
    Beiträge:
    55
    Danke erhalten:
    5
    Danke vergeben:
    6
    #5 Starter, 6. März 2015
    Hallo Mark,

    danke, das hat geklappt. So habe ich es mir vorgestellt.
    Mein Problem war zusätzliche, dass ich eine "vergessene" Überlagerung der breadcrumbs hatte, darum zogen keine Anpassungen in der css Datei.

    Gruß
    Thomas
     
  6. sirtet
    sirtet Erfahrener Benutzer
    Registriert seit:
    4. Juli 2012
    Beiträge:
    1.130
    Danke erhalten:
    89
    Danke vergeben:
    90
    #6 sirtet, 6. Mai 2015
    Sauber!
    Noch besser wäre, wenn der letzte crumb (die aktuelle Seite) garkein Link wäre. Der kann nur verwirren, eigentlich...
    Usability-Gurus verbieten im Allgemeinen Links auf die aktuelle Seite.