Beschriftung der Icons oben rechts

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

  1. Jürgens Shop

    Jürgens Shop Erfahrener Benutzer

    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

    Huhu,

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

    Danke :)
     
  3. Jürgens Shop

    Jürgens Shop Erfahrener Benutzer

    genau das wäre auch mein Problem, das überhaupt zu finden
     
  4. Anonymous

    Anonymous Erfahrener Benutzer

    möchtest du die Icons denn immer sichtbar beschriftet haben, oder nur wenn man mit der Maus drüber fährt?
     
  5. Frankenwald Hanf-Shop

    Frankenwald Hanf-Shop Erfahrener Benutzer

    sollte eigentlich das File sein:

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

    Jürgens Shop Erfahrener Benutzer

    na nur wenn die Maus drüber geht. das andere würde zuviel Platz wegnehmen
     
  7. Anonymous

    Anonymous Erfahrener Benutzer

    Ich habe dieses Verzeichnis nicht bei mir ist das eher: /themes/Malibu/html/system/layout_topbar_secondary_navigation.html
     
  8. Frankenwald Hanf-Shop

    Frankenwald Hanf-Shop Erfahrener Benutzer

    ja, hier liegt gambio in example.tld/shop/
    deine Angabe sollte passen ...
     
  9. Anonymous

    Anonymous Erfahrener Benutzer

    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
     
  10. Anonymous

    Anonymous Administrator Mitarbeiter

    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.
     
  11. Anonymous

    Anonymous Erfahrener Benutzer


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

    Frankenwald Hanf-Shop Erfahrener Benutzer

    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 ...
     
    Zuletzt bearbeitet: 2. September 2022
  13. Anonymous

    Anonymous Administrator Mitarbeiter

    @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;
      }
     
  14. Anonymous

    Anonymous Erfahrener Benutzer

    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
     
  15. Anonymous

    Anonymous Administrator Mitarbeiter

    @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?
     
  16. Anonymous

    Anonymous Administrator Mitarbeiter

    @Inspire (MyLuma.de) Für den Warenkorb fehlt noch folgendes CSS:

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

    Anonymous Erfahrener Benutzer

    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
     
  18. Anonymous

    Anonymous Erfahrener Benutzer

    Danke dir, schaut jetzt super aus find ich :)
    Unbenannt2.JPG
     
  19. Anonymous

    Anonymous Erfahrener Benutzer

    Hey,

    super daran hab ich gar nicht gedacht da mal nachzuschauen wie es so aussieht, schließlich sind bei mir 75% laut Statistik mit Mobil Online.

    Habe dies mal eingefügt, musste es aber noch mit einer weiteren Klammer wieder schließen, da sonst auf einmal alles Gelb war und ein Ungeschlossener block Fehler auftrat.
    @media (min-width: 992px) { }

    Wegen der Grid Spalten, weiß nicht genau welche du jetzt dort ansprichst, finde da mehrere im Header und die meisten sind alle auf 4

    Und danke für die Hilfe und für das Lob, aber i.wie bin ich noch nicht fertig, man macht da und da was und am ende fängt man da wieder wo neu an um es besser zu machen :) Endloses Projekt aber ohne @barbara ´s Privatstunden würde ich nicht so weit sein :) und natürlich euere ebenso :)
     
  20. Anonymous

    Anonymous Erfahrener Benutzer

    Bräuchte hier nochmal leider Hilfe.

    Die ICONS Benötigen eine Farbgebung z.b. Schwarz, und das wenn man mit der Maus drüber das das Feld dann in Leicht Dunkel Weiß wird.