Menüleiste auf voller Breite darstellen

Thema wurde von christian_dietrich, 6. November 2019 erstellt.

  1. christian_dietrich

    Registriert seit:
    6. November 2019
    Beiträge:
    18
    Danke erhalten:
    0
    Danke vergeben:
    9
    Hallo zusammen,

    wir haben unseren Shop über Gambiocloud laufen und sind gerade dabei ihn aufzubauen.

    https://jessicas-hairshop.gambiocloud.com/

    Nachdem wir nun den Shop in der von uns gewünschten Breite darstellen konnten, fehlt es optisch vor allem am Feinschliff.

    Am meisten stört es uns, daß die Menüleiste links und rechts nicht über die ganze Breite, sondern irgendwie verkürzt dargestellt wird. Desweiteren würden wir die Produktbilder gerne immer in der gleichen Größe und gerahmt darstellen.

    Ich habe aber die Möglichkeit nicht gefunden, wo ich diesen Rahmen einstellen kann (sowohl in der Kategorieseite, wie aber auch auf der Produktseite.

    Stattdessen habe ich auf der Homepage schon aneinandergereihte Tebellenlinien mit den jeweiligen Produkten in den Zellen. Schöner wäre es wenn jedes Produkt einen Rahmen hätte und dazwischen ein im Idealfall einstellbarer Abstand ist.

    Unser parallel angefangener Shop, der aus u.a. DSGVO - Gründen leider nun noch vor Start umziehen musste ist unter:

    https://jessicas-hairshop.net zu finden. Hier sieht das Design deutlich besser aus. Kriegen wir es so ähnlich zumindest auch mit Gambio hin ?

    Vielen Dank schon mal für Eure Antworten und Hilfe.

    VG

    Christian
     
  2. barbara

    barbara G-WARD 2014-2020

    Registriert seit:
    14. August 2011
    Beiträge:
    35.352
    Danke erhalten:
    11.198
    Danke vergeben:
    1.601
    Versuche es mal damit im eigenen css:
    Code:
    .navbar-collapse {
         padding-right: 0px;
        padding-left: 0px;
    }
    Man sollte die Bilder schon in der gleichen Größe hochladen, (z.B. auf einen quadratischen Hintergrund)
    Der Shop setzt entweder die maximale Höhe (bei hohen Bildern) oder maximale Breite (bei breiten Bildern)
    dadurch kann ein Bild aber schmaler oder flacher sein - wird jedoch nicht verzerrt.

    Einen einfachen Rahmen kannst Du unter Darstellung -> Bildoptionen erstellen. Alternativ könnte man auch einen Rahmen auf den Hintergrund setzen.

    Noch mal etwas für das eigene css - Rahmen um die Kacheln:
    Code:
    @media (min-width: 1600px){
    body.page-index .productlist-viewmode-grid .product-container .product-tile {
        border: 1px solid #a94442 !important;
        margin-right: 5px;
    }
    
    body.page-index .productlist-viewmode-grid .product-container:nth-of-type(5n+0) .product-tile {
        border-right-color: #a94442;
    }}
    .productlist-viewmode-grid .product-container .product-tile, .productlist-swiper .product-container .product-tile, .product-container.flyover .product-tile {
        border: 1px solid #a94442;
    }
    
    Der Rahmen ist hier rot, den Abstand von 5px kannst Du einstellen.
    Die Anpassung musst Du auch für die anderen Breiten erstellt werden.


    Ich hoffe das hilft :)

    P.S. der 2. Link funktioniert nicht.
     
  3. christian_dietrich

    Registriert seit:
    6. November 2019
    Beiträge:
    18
    Danke erhalten:
    0
    Danke vergeben:
    9
    Hallo barbara,

    vielen Dank erstmal. Ich werde das gleich mal ausprobieren. Der zweite Link war tatsächlich auch nicht korrekt.
    Der Bindestrich in der Mitte muss weg :)

    www.jessicashairshop.net ist die korrekte Domain. ;-)

    LG
    Christian
     
  4. christian_dietrich

    Registriert seit:
    6. November 2019
    Beiträge:
    18
    Danke erhalten:
    0
    Danke vergeben:
    9
    Hallo barbara,

    nochmals vielen Dank. Was bedeutet denn, dass ich das für andere Breiten auch noch erstellen muss? :)

    Außerdem habe ich jetzt immer noch dünne graue Trennlinien zwischen den Produktenreihen / Spalten. Bekomme ich die irgendwie weg?

    Und wenn ich schon dabei bin :cool:

    Bei unserem vorherigen Shopsystem wurden die Artikel in den Kategorien oder auf der Startseite immer mit einem Mouseovereffekt versehen, der direkt das erste Produktbild in das zweite gewandelt hat und nicht erst die Produktbildansicht vergrössert und die weiteren Bilder dann auswählbar waren. Ich meine nicht in der Produktdetailseite, sondern in der Kategorieseiten und auf der Startseite. Geht so etwas auch in Gambio ?

    Liebe Grüße und besten Dank !

    Christian
     
  5. barbara

    barbara G-WARD 2014-2020

    Registriert seit:
    14. August 2011
    Beiträge:
    35.352
    Danke erhalten:
    11.198
    Danke vergeben:
    1.601
    Ich meine so etwas in der Art schon mal gesehen zu haben (hier im Forum) aber ich weiß nicht, ob man das in einem Cloudshop umsetzen kann.
    Das ist ja doch etwas begrenzt.

    Die weiße Linie müsste damit weg gehen:
    Code:
    .productlist-viewmode-grid .product-container .price-tax {
        border-bottom: transparent;
    }
    Die ersten beiden Codes sind für die Startsetite und ab einer Bilsdschirmbreite von 1600px.
    offenbar ist aber keine Einstellung für kleinere Bildschirme gemacht worden, so dass der Code der Kategorien greift.
    Ist also alles gut :)
     
  6. christian_dietrich

    Registriert seit:
    6. November 2019
    Beiträge:
    18
    Danke erhalten:
    0
    Danke vergeben:
    9
    Hallo Barbara,

    vielen Dank nochmal an dieser Stelle. Die Linien sind weg :) .

    Wenn ich den Mouseover Effekt noch hinbekäme, wäre das toll.

    Es wird nämlich - glaube ich - bei Produkten mit vielen Produktbildern in den Kategorien und auf der Startseite sonst unübersichtlich.

    Wenn Du dazu noch eine - auch evtl. andere - Idee hast, wäre es super. Eine Alternative wäre für mich auch - zur Not - wenn nur das erste Bild angezeigt wird und es keine weiteren Bilder gibt. Diese werden dann ja auf der Produktdetailseite angezeigt.

    VG und lieben Dank
    Christian
     
  7. christian_dietrich

    Registriert seit:
    6. November 2019
    Beiträge:
    18
    Danke erhalten:
    0
    Danke vergeben:
    9
    Hallo Barbara,

    ich bin nochmal. :)

    Ich habe nun gestern auf dem Weg nach Hause den Shop auf meinem Handy angesehen. Das sieht gruselig aus. Die Rahmen sind dort auf dem Display wirklich störend und haben keinen Abstand voneinander. Dann habe ich mir mein Tablett genommen und auch dort sieht das, was auf dem Desktop PC Bildschirm klasse aussieht, leider nicht mehr gut aus.
    Kurzum, gibt es eine Möglichkeit, die Rahmen bei "NichtPC-Monitoren" wegzulassen und nur auf den großen Bildschirmen einzublenden?

    Ich hoffe, ich konnte verständlich machen was ich meine :)

    Vielen Dank und VG
    Christian
     
  8. barbara

    barbara G-WARD 2014-2020

    Registriert seit:
    14. August 2011
    Beiträge:
    35.352
    Danke erhalten:
    11.198
    Danke vergeben:
    1.601
    Ich wollte mir das gerade am PC ansehen, wegen der Auflösung,
    (Taste F12 und dann auf Mobile Ansicht wechseln)
    Da sehe ich erst mal nur den Cookie-Hinweis - als Kunde wäre ich da weg.

    Dann hast Du irgend eine Mobile-Optimirung eimgebaut, dadurch sehe ich leider die Brakepoints nicht.

    Ich kann also nur raten. Ändere den Code mal so ab:
    Code:
    @media (min-width: 1600px){
    body.page-index .productlist-viewmode-grid .product-container .product-tile {
        border: 1px solid #a94442 !important;
        margin-right: 5px;
    }
    
    body.page-index .productlist-viewmode-grid .product-container:nth-of-type(5n+0) .product-tile {
        border-right-color: #a94442;
    }
    .productlist-viewmode-grid .product-container .product-tile, .productlist-swiper .product-container .product-tile, .product-container.flyover .product-tile {
        border: 1px solid #a94442;
    }}
    vielleicht geht das.
     
  9. christian_dietrich

    Registriert seit:
    6. November 2019
    Beiträge:
    18
    Danke erhalten:
    0
    Danke vergeben:
    9
    Hallo Barbara,

    vielen Dank für das Feedback. Ich bin - wie man sieht - kein Webdesigner sondern Kaufmann. :)
    Aber ich versuche mein Bestes und bin für Tips und auch für Feedback sehr dankbar.
    Die Cookie-Meldung bekomme ich gar nicht und was meinst du mit Mobile-Optimierung ???

    Lieben Dank auch für Deine Geduld und VG
    Christian
     
  10. barbara

    barbara G-WARD 2014-2020

    Registriert seit:
    14. August 2011
    Beiträge:
    35.352
    Danke erhalten:
    11.198
    Danke vergeben:
    1.601
    Sorry - das war der falsche Link :oops:

    In Deinem neuen Shop ist alles gut :)
     
  11. christian_dietrich

    Registriert seit:
    6. November 2019
    Beiträge:
    18
    Danke erhalten:
    0
    Danke vergeben:
    9
    Hallo Barbara,

    vielen Dank. Kein Thema - außer für meinen Blutdruck vielleicht :confused:

    Deinen Code habe ich ins CSS eingesetzt. Aber dann sind alle Farben weggewesen und der Hintergrund und alles war auf einmal weiß.

    Habe ihn schnell erstmal wieder rausgenommen...:)

    VG
    Christian
     
  12. christian_dietrich

    Registriert seit:
    6. November 2019
    Beiträge:
    18
    Danke erhalten:
    0
    Danke vergeben:
    9
    Sorry. Mein Fehler. :D

    Da fehlte eine } beim Copy & Paste.

    Es funktioniert super. Danke schön.
    VG
    Christian
     
  13. christian_dietrich

    Registriert seit:
    6. November 2019
    Beiträge:
    18
    Danke erhalten:
    0
    Danke vergeben:
    9
    Hallo Barbara,
    ich möchte / muss das Thema leider nochmal aufgreifen. Nachdem mit den Rahmen jetzt alles wunderschön funktioniert, stellte sich für mich noch die Frage, ob ich über das css gesteuert bestimmen kann, wie breit die einzelnen "Produktboxen" in der Kategorieübersicht und auf der Startseite sind? Hintergrund ist, dass die Produktbilder relativ klein sind und somit relativ viel Platz links und rechts zwischen Bild und Rahmen ist. Gibt es hier eine Möglichkeit, die einzelnen "Boxen" schmaler darzustellen?

    VG und besten Dank
    Christian
     
  14. barbara

    barbara G-WARD 2014-2020

    Registriert seit:
    14. August 2011
    Beiträge:
    35.352
    Danke erhalten:
    11.198
    Danke vergeben:
    1.601
    Im Style Editor kannst Du einstellen, wie viele Boxen dargestellt werden sollen.
    Allerdings geht das per Gridspalten und da wäre die nächste "6 pro Zeile"

    mit "höhe des Produktbildes Kachel" könntest Du aber auch die Bilder größer machen - 130px ist da nicht gerade viel
     
  15. christian_dietrich

    Registriert seit:
    6. November 2019
    Beiträge:
    18
    Danke erhalten:
    0
    Danke vergeben:
    9
    Hallo Barbara,

    super, vielen Dank !!!!!

    Ich werde da mal ein bisschen ausprobieren. :)

    Eine (vorläufig) letzte Frage habe ich noch. :oops:

    Ich habe Unterkategorien angelegt, die aber selber keine Produkte, sondern lediglich weitere Unter-Unterkategorien beinhalten.
    Wenn der Kunde darauf klickt, kriegt er die Meldung, dass es noch keine Produkte gibt. Er soll aber auch nicht erschlagen werden von allen Produkten in den Unter-Unterkategorien. Hast Du hier eine Idee? Evtl. das diese im Menübaum selber gar nicht anklickbar sind? Und dann würde ich sie gerne im Menü farblich oder durch die Textgrösse anders erkenntlich machen als die Unter-Unterkategoriepunkte. Gibt es hier einen Weg? Ich meine, da mal was in einem anderen Kundenshop von einem Gambiouser gesehen zu haben.

    Irgendwie habe ich langsam ein schlechtes Gewissen ob der ganzen Fragen :(

    Aber ich komme einfach nicht voran und probiere und probiere und probiere und hatte ich schon probieren erwähnt...:oops:

    Lieben Dank nochmal und viele Grüße
    Christian
     
  16. barbara

    barbara G-WARD 2014-2020

    Registriert seit:
    14. August 2011
    Beiträge:
    35.352
    Danke erhalten:
    11.198
    Danke vergeben:
    1.601
    du kannst in der Unter-Kategorie die Unter-Unterkategorien anzeigen lassen
    Das geht mit 1 - 3 Haken in der Unter-Kategorie
    - Unterkategorien anzeigen
    - Bild der Unterkategorien anzeigen
    - Überschrift der Unterkategorien anzeigen

    Dann werden die weiteren Unterkategorien angezeigt, statt der Meldung.
     
  17. christian_dietrich

    Registriert seit:
    6. November 2019
    Beiträge:
    18
    Danke erhalten:
    0
    Danke vergeben:
    9
    Lieben Dank. Also ich habe jetzt die Kategoriebild Größe mal geändert und gespeichert.
    Dann habe das Image Processing laufen lassen und die Caches geleert.
    Dann die Seite erneut aufgerufen und ........

    .... keine Veränderung zu sehen.

    Was mache ich falsch?
     
  18. barbara

    barbara G-WARD 2014-2020

    Registriert seit:
    14. August 2011
    Beiträge:
    35.352
    Danke erhalten:
    11.198
    Danke vergeben:
    1.601
    Es gibt 2 Möglichkeiten für diese Bilder - Entweder hat man die Artkel - Infobilder - da muss man nur den Eintrag im Style Editor ändern, oder man nutzt die kleineren Thumbnails, dann muss man auch in den Bild-Optionen die Größe für diese ändern.
    Und dann noch mal das Image-Processing laufen lassen, damit die Bilder größer abgespeichert werden.