gelöst Honeygrid: Suche und Warenkorb unter den Header verschieben (wie im EyeCandy)

Hallo zusammen,

ich benutze das Honeygrid Template und würde gerne die Suche und den Warenkorb in eine Zeile unter den Header verschieben (Desktop- und Tablet-Darstellung). Wie könnte ich das realisieren um auch weiterhin sauber/responsive unterwegs zu sein?

Vielen Dank und Grüße
Cedric

 

Guten Morgen, hier musst Du im StyleEdit3 im Bereich des Headers arbeiten. Hier sind entsprechend die Gridwerte und vertikaler Abstand ein zu stellen. Desktop und Tablet müssten gehen. Hingegen beim Handy nicht ! Versuch Dich einfach mal ein wenig durch... falls es nicht klappen sollte einfach noch einmal melden.

 

Guten Morgen Michael,

ich habe bereits etwas mit den Werten herumgespielt, leider ohne das gewünschte Ergebnis.
Der Abstand nach unten hin wird immer größer und über den Styleedit alleine kann ich dieser Leiste keine Hintergrundfarbe zuordnen.

Die beiden Elemente habe ich auch einmal in der index.html (im Honeygrid Template) in einen <div> (subheader) gepackt und über die CATEGORIES_TOP platziert. Leider bekomme ich jedoch den Warenkorb nicht ganz rechts ausgerichtet und ich bin mir nicht sicher ob es der richtige Weg wäre.

Hast du eine Idee?

Viele Grüße
Cedric

 

Ich habe es geschafft. Ich bin folgendermaßen vorgegangen: (nur Desktop-Ansicht)

1. Anpassung der Grid-Spalten
   - Logo auf 12
   - Hinweis ausblenden
   - Suche auf 6
   - Warenkorb auf 6
   --> Die Suche und der Warenkorb rutschen jetzt unter den Header!
2. Größe der Headergrafik angepasst und Balken in das Bild eingefügt anstatt zu versuchen einen eigenten Container umzufärben.

fertig.

 

hast Du ne Url zu deinem Shop - würde mir das gerne mal ansehen

 

Schaust du hier.

Viele Grüße
Cedric

 

Hallo Cedric,

ich hätte auch gerne deine Lösung umgesetzt, komme aber irgendwie nicht dahinter.

Könntest Du mir bei den Schritten ein wenig Step by Step weiterhelfen ?


Grüße
Toni

Gambio x3

 

Hallo Toni,

zu 1) Anpassung der Grid-Spalten:
- Logo auf 12
- Hinweis ausblenden
- Suche auf 6
- Warenkorb auf 6
--> Die Suche und der Warenkorb rutschen jetzt unter den Header!

• Den Shop im Bearbeitungsmodul laden (Template-Einstellungen>Shop im Bearbeitungsmodus laden)
• Dann im StyleEdit unter "Header" die Einstellungen vornehmen:
  • Logo auf 12 setzen (Anzahl der Grid-Spalten)
    
    
  • Hinweis ausblenden
    
  • Suche auf 6
    
    
  • Warenkorb auf 6
    

Du musst hierbei bedenken, dass die Grid-Spalten für eine Zeile in Summe immer 12 ergeben müssen. Also kannst du beispielsweise den Warenkorb auch auf 3 und die Suche auf 9 Spalten setzen.



Zu 2) Größe der Headergrafik angepasst und Balken in das Bild eingefügt anstatt zu versuchen einen eigenen Container umzufärben.

Bei mir hat der Header eine Höhe von 200px:


Und eine Breite von 1200px:


Dementsprechend muss die Hintergrundgrafik 1200x200px groß sein.
Der Balken für die "extra Leiste" habe ich in der Hintergrundgrafik entsprechend eingefärbt in der Höhe von 50px.

Ich hoffe ich konnte dir damit helfen

Viele Grüße
Cedric

 

Hallo Cedric, ein fettes Danke für deine ausführliche Anleitung !

Sorry das ich mich erst jetzt melde, es gab viel zu tun und irgendwie ist das nach hinten gerutscht.
Umso mehr freue ich mich über deine ausführliche Hilfestellung.

Wenn ich es so hinbekommen habe, gibt es ein Feedback.


Vielen Dank und beste Grüße

Toni

 

Hallo Cedric,

bei mir hatte sich auch alles nach unten verschoben, wenn man die Suchleiste oder den Warenkorb verschieben wollte.
Die Kategorieleiste wanderte immer tiefer. Der entscheidende Tipp war, den Grid-Wert (groß) für das Logo auf 12 zu setzen.
Und schon war alles dort wo es hingehört.
Also auch von mir herzlichen Dank!

Frank

 

Auch von hier ein herzliches DANKE!
lg, Heidemarie

 

Hallo bin neu hier und völlig am verzweifeln,
mir hat der thread hier auch sehr geholfen, nachdem ich vorher schon tagelang Versuche gestartet habe. Schon mal vielen Dank.
Ich hätte aber noch eine Frage dazu, vielleicht kann mir ja jemand helfen.
Bei mir klebt jetzt die Suche direkt am Header und ist sehr breit, wo kann man denn das noch einstellen. Kann beim besten willen nichts finden.
Vielen Dank schon mal für eure Hilfe.
LG , Agathe