Beschriftung der Icons oben rechts

Thema wurde von Jürgens Shop, 1. September 2022 erstellt.

  1. Jürgens Shop

    Jürgens Shop Erfahrener Benutzer

    Registriert seit:
    6. Dezember 2014
    Beiträge:
    363
    Danke erhalten:
    27
    Danke vergeben:
    10
    Hallo.

    Gibt es eine Möglichkeit, für die 4 Icons oben rechts (Länderauswahl, Login, Merkzettel, Warenkorb) eine Beschriftung hinzuzufügen, die angezeigt wird, wenn man mit der Maus auf eins geht?

    Jürgen
     
  2. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    11. Juli 2021
    Beiträge:
    179
    Danke erhalten:
    61
    Danke vergeben:
    62
    #2 Anonymous, 1. September 2022
    Zuletzt bearbeitet: 1. September 2022
    Moin,

    das Folgende dient nur als Inspiration und erhebt keinen Anspruch auf Vollständigkeit oder Richtigkeit.

    Hast Du nen Cloudshop? Wenn nicht, sollte das kein großes Problem sein.
    Du könntest an den entsprechenden Stellen in der jeweiligen HTML Datei IDs hinzufügen und diese IDs dann per CSS anpassen.
    Beispiel:

    ID hinzufügen:
    <li id="nav1" class="dropdown navbar-topbar-item first mouse style="">.....

    CSS hinzufügen:
    Code:
    #nav1::after {
      content: "Sprache";
      font-size: 12px;
      position: absolute;
      bottom: 0;
    }

    (Code für alle Icons fortführen..)

    Würde dann so aussehen:
    [​IMG]

    Aber vielleicht brauchst Du das alles ja gar nicht, weil man in der HTML Datei direkt die notwendige Beschriftung vornehmen könnte...? Da muss jemand was dazu sagen, der selbst hostet.

    Wenn Du einen Cloudshop hast, gibt es da meines Wissens keine Möglichkeit, außer Du änderst den Header etwas, weil Du bei der Hauptnavi keine IDs oder Klassen hinzufügen kannst, da Du an die jeweilige Datei nicht rankommst.
    Bei mir ist z.B. die Hauptnavi deaktiviert und nur die Sek.Navi aktiviert. Da kann ich dann schreiben und verlinken, was ich will und das hinzufügen einer ID oder einer Klasse ist im Vergleich 100 mal einfacher. So muss man dann nicht die Icons beschriften, sondern die Beschriftung mit je einem Icon versehen, was halt vergleichsweise extrem einfach ist.

    Bei mir sieht das so aus:
    [​IMG]
     
  3. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    16. Oktober 2020
    Beiträge:
    68
    Danke erhalten:
    14
    Danke vergeben:
    14
    Huhu,

    eine genauere Anleitung wäre schön zu bekommen. In welcher Datei muss man das genau ändern.

    Danke :)
     
  4. Jürgens Shop

    Jürgens Shop Erfahrener Benutzer

    Registriert seit:
    6. Dezember 2014
    Beiträge:
    363
    Danke erhalten:
    27
    Danke vergeben:
    10
    genau das wäre auch mein Problem, das überhaupt zu finden
     
  5. Klaiber Michaela

    Klaiber Michaela Erfahrener Benutzer

    Registriert seit:
    5. Mai 2022
    Beiträge:
    382
    Danke erhalten:
    100
    Danke vergeben:
    51
    möchtest du die Icons denn immer sichtbar beschriftet haben, oder nur wenn man mit der Maus drüber fährt?
     
  6. Frankenwald Hanf-Shop

    Frankenwald Hanf-Shop Erfahrener Benutzer

    Registriert seit:
    1. August 2019
    Beiträge:
    52
    Danke erhalten:
    11
    Danke vergeben:
    25
    sollte eigentlich das File sein:

    Code:
    ../shop/Malibu/themes/html/system/layout_topbar_secondary_navigation.html
     
  7. Jürgens Shop

    Jürgens Shop Erfahrener Benutzer

    Registriert seit:
    6. Dezember 2014
    Beiträge:
    363
    Danke erhalten:
    27
    Danke vergeben:
    10
    na nur wenn die Maus drüber geht. das andere würde zuviel Platz wegnehmen
     
  8. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    16. Oktober 2020
    Beiträge:
    68
    Danke erhalten:
    14
    Danke vergeben:
    14
    Ich habe dieses Verzeichnis nicht bei mir ist das eher: /themes/Malibu/html/system/layout_topbar_secondary_navigation.html
     
  9. Frankenwald Hanf-Shop

    Frankenwald Hanf-Shop Erfahrener Benutzer

    Registriert seit:
    1. August 2019
    Beiträge:
    52
    Danke erhalten:
    11
    Danke vergeben:
    25
    ja, hier liegt gambio in example.tld/shop/
    deine Angabe sollte passen ...
     
  10. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    16. Oktober 2020
    Beiträge:
    68
    Danke erhalten:
    14
    Danke vergeben:
    14
    Ehrlich gesagt, keine Ahnung unter welche genauen teile man das dort einfügt. Klar CSS im SytleEdit aber die Code Schnippsel " <li id="nav1" class="dropdown navbar-topbar-item first mouse style="">" in der Datei gibt es mehrere Navigation z.b. Globe für die Lieferzone aber da gibt es ja wenn man drüber geht, wenn Mann anklickt, wenn Mann es Statisch haben will... :D also ich würde es lieber Fest nehmen, also das es immer dort wäre. Wie bei OTTO.de z.b oben
     
  11. Anonymous

    Anonymous Administrator
    Mitarbeiter

    Registriert seit:
    26. April 2011
    Beiträge:
    1.279
    Danke erhalten:
    971
    Danke vergeben:
    260
    Hier noch eine andere Idee, die auch in Cloud Shops funktioniert. Folgenden CSS Code im StyleEdit einfügen:

    Code:
    #header .navbar-secondary .navbar-nav > li > a:hover .topbar-label {
    display: block;
    position: absolute;
    bottom: -25px;
    left: -25px;
    z-index: 100000;
    background-color: #000;
    color: #fff;
    padding: 5px;
    border-radius: 5px;
    word-break: keep-all;
      }
    #header .navbar-secondary .navbar-nav > li > a:hover .visible-xs-block {
    display: block !important;
    word-break: keep-all;
      }
    Es ist nicht perfekt und bedarf noch etwas Feintuning aber so grob würde das nur mit reinem CSS funktionieren. Bestimmt hat noch jemand eine Idee wie man das verbessern kann.
     
  12. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    16. Oktober 2020
    Beiträge:
    68
    Danke erhalten:
    14
    Danke vergeben:
    14

    Danke soweit auch erstmal, aber hätte da jemand eine Idee der sich dort gut auskennt mit Statische Beschriftung?
     
  13. Frankenwald Hanf-Shop

    Frankenwald Hanf-Shop Erfahrener Benutzer

    Registriert seit:
    1. August 2019
    Beiträge:
    52
    Danke erhalten:
    11
    Danke vergeben:
    25
    #13 Frankenwald Hanf-Shop, 2. September 2022
    Zuletzt bearbeitet: 2. September 2022
    Mit Javascript kann lässt sich das recht einfach lösen.
    Die Secondary-Navbar-Items haben u.a die Klasse
    Code:
    navbar-topbar-item
    .
    Jetzt kann man die Items selektieren und denen title und alt (alternative information) zuweisen.
    Code:
    document.getElementsByClassName('navbar-topbar-item')[0].title = 'Text der beim Hovern mit der Maus erscheinen soll';
    [0] ist in meinem Fall die Sekundärnavigation
    [1] ist der Gambio Admin Button
    [2] ist der Login
    [3] ist der Merkzettel
    [4] ist der Warenkorb

    Am besten wäre das dann in GXModules als eigenes Module aufgehoben... denk ich.

    p.s eigentlich haben die Items einen Hover-Text wenn man mit der Maus drüber hovert ...
     
  14. Anonymous

    Anonymous Administrator
    Mitarbeiter

    Registriert seit:
    26. April 2011
    Beiträge:
    1.279
    Danke erhalten:
    971
    Danke vergeben:
    260
    @Inspire (MyLuma.de) Hier ein CSS Code der das ohne Hover direkt anzeigt:

    Code:
    #header .navbar-secondary .navbar-nav > li > a .topbar-label {
    display: block;
    z-index: 100000;
      }
    
    #header .navbar-secondary .navbar-nav > li > a {
    text-align: center;
      }
    
    #header .navbar-secondary .navbar-nav > li > a .cart-info-wrapper .topbar-label {
    display: none;
      }
    #header .navbar-secondary .navbar-nav > .gambio-admin .topbar-label {
    display: inline;
      }
     
  15. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    16. Oktober 2020
    Beiträge:
    68
    Danke erhalten:
    14
    Danke vergeben:
    14
    Jetzt hab ich das geändert @Till (Gambio) und vielen dank für diesen Code. Klappt perfekt.

    Frage: Wo finde ich diesbezüglich die Datei, für diesen Bereich? Ich würde dort noch gerne ein paar dinge Verändern bzw Hinzufügen
    Unbenannt.JPG
     
  16. Anonymous

    Anonymous Administrator
    Mitarbeiter

    Registriert seit:
    26. April 2011
    Beiträge:
    1.279
    Danke erhalten:
    971
    Danke vergeben:
    260
    @Inspire (MyLuma.de) Kommt darauf an wo genau im Menü du was hinzufügen willst. Das ist über mehrere Dateien verteilt.
    Kannst du mal ein Bild basteln wie du dir das vorstellst?
     
  17. Anonymous

    Anonymous Administrator
    Mitarbeiter

    Registriert seit:
    26. April 2011
    Beiträge:
    1.279
    Danke erhalten:
    971
    Danke vergeben:
    260
    @Inspire (MyLuma.de) Für den Warenkorb fehlt noch folgendes CSS:

    Code:
    li.topbar-cart a::after
      {
          content: attr(title);
      }
     
  18. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    16. Oktober 2020
    Beiträge:
    68
    Danke erhalten:
    14
    Danke vergeben:
    14
    Ich würde gerne

    Im Eingeloggten Bereich:
    Bestellungen = /account_history.php
    Kundenkonto = ...
    Ich weiß das gibt es auf der Seite aber,

    Als Gast:
    (Link nur für registrierte Nutzer sichtbar.)n < als Button in Grün mittig

    und Passwort vergessen als text nur auch mittig
     
  19. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    16. Oktober 2020
    Beiträge:
    68
    Danke erhalten:
    14
    Danke vergeben:
    14
    Danke dir, schaut jetzt super aus find ich :)
    Unbenannt2.JPG
     
  20. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    11. Juli 2021
    Beiträge:
    179
    Danke erhalten:
    61
    Danke vergeben:
    62
    Sieht echt gut aus, zumindest ab 992px.
    Von 768px bis 991px sieht es noch nicht optimal aus:
    [​IMG]

    Daher würde ich empfehlen, den Code mit der statischen Beschreibung von Till mit @media (min-width: 992px) zu nutzen.
    Also so:

    Code:
    @media (min-width: 992px) {
    #header .navbar-secondary .navbar-nav > li > a .topbar-label {
    display: block;
    z-index: 100000;
      }
    
    #header .navbar-secondary .navbar-nav > li > a {
    text-align: center;
      }
    
    #header .navbar-secondary .navbar-nav > li > a .cart-info-wrapper .topbar-label {
    display: none;
      }
    #header .navbar-secondary .navbar-nav > .gambio-admin .topbar-label {
    display: inline;
      }
    
    li.topbar-cart a::after
      {
         content: attr(title);
      }}
    Bis 991px könntest Du den ersten Code mit der Hover-Beschriftung von Till benutzen mit @media (max-width: 991px).
    Oder ganz weglassen, da die Nutzung von hover meiner Meinung nach kaum Sinn macht auf Tablet-Größe.

    Zudem verrutscht von 992px bis 1399px dein Warenkorb eine Zeile tiefer.
    [​IMG]
    Du kannst im SE unter Header die Grid-Spalten einstellen. Der Wert darf 12 niemals übersteigen, glaube ich noch zu wissen.

    Ansonsten hast Du übrigens nen sehr schönen Shop!