Kachelabstand in Produktübersicht und mehr

Thema wurde von Anonymous, 13. Juli 2017 erstellt.

  1. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    20. Juni 2017
    Beiträge:
    152
    Danke erhalten:
    16
    Danke vergeben:
    70
    Hallo,

    ich versuche seit einiger Zeit mich durch das GX3 zu beissen, was sich ohne jede Vorkenntnisse ziemlich..ähm.. interessant gestaltet.
    Gerade beisse ich mir die Zähne am Kachelabstand der Produktübersicht aus. Im Testshop 3 sind alle Produkte mit Abstand zueinander zu sehen, in jedem anderen Shop den ich gesehen habe, ist da aber nur eine dünne Linie.
    Wie kann ich den Abstand verbreitern?

    Und wie bekomme ich eine andere (eigene) Schriftart auf meine Seite?

    Falls ich dafür ins CSS muss, erklärt es mir bitte als wäre ich 5 Jahre alt *hüstel*

    Liebe, wenn auch leicht verzweifelte Grüße,

    Sandra
     
  2. barbara

    barbara G-WARD 2014-2020

    Registriert seit:
    14. August 2011
    Beiträge:
    35.352
    Danke erhalten:
    11.198
    Danke vergeben:
    1.601
    Hallo Sandra,

    Für die Boxen:
    Gehe in den Style Editor, öffne Deinen Style zum Bearbeiten , klicke auf den Namen Deines Styles, jetzt erscheint ein Link "eigenes css hinzufügen"
    Da klickst du drauf, wenn Du css-Codes einfügen möchtest.

    Wenn ich das im Testshop gerade richtig gesehen habe, müsste der Code den Abstand zwischen den Kacheln verursachen:
    Code:
    .productlist-viewmode-grid .product-container, .productlist-swiper .product-container, .product-container.flyover {
        padding-left: 15px;
        padding-right: 15px;
    }
    Damit wirst Du aber vermutlich ein Artikel weniger in die Reihe bekommen. Es könnte sein, dass das im Style Editor dann angepasst werden muss.

    Was meinst Du mit eigene Schriftart?
    Du kannst eine Google-Web-Font einbinden, das geht über den Style Editor.
     
  3. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    20. Juni 2017
    Beiträge:
    152
    Danke erhalten:
    16
    Danke vergeben:
    70
    Das mit dem 'eins weniger' dachte ich mir schon, das wäre okay, da kann ich ja dann mit den Grids rumtesten.

    Wo genau in meinem CSS muss ich den Text denn dann zufügen?
    Ich hab mal ein Bild gemacht davon, wie mein CSS aussieht wenn ich das aufmache.

    Unbenannt.png

    Die Schriftart, die ich nutzen will, soll nur an wenigen Stellen genutzt werden und sie ist leider nicht bei den Google-Web-Fonts dabei. Kann ich sie trotzdem einbinden?
     
  4. barbara

    barbara G-WARD 2014-2020

    Registriert seit:
    14. August 2011
    Beiträge:
    35.352
    Danke erhalten:
    11.198
    Danke vergeben:
    1.601
    Den Code einfach ganz unten, unter die letzte klammer einfügen.

    Ob auch eine andere Schrift da funktioniert, kann ich Dir leider nicht sagen.
    Handelt es sich denn um eine Web-Font?
     
  5. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    20. Juni 2017
    Beiträge:
    152
    Danke erhalten:
    16
    Danke vergeben:
    70
    Ich habs eingefügt und ein wenig rumprobiert. Es macht die Kacheln selbst schmaler und breiter, wenn ich mit den Werten spiele, aber es bringt leider keinen Abstand zwischen die Produkte. Weisst du, was ich meine oder soll ich mal ein Bild machen?


    Die Schrift, die ich nutzen will ist zumindest eine frei im Netz runterladbare, wenn du das meinst.
     
  6. barbara

    barbara G-WARD 2014-2020

    Registriert seit:
    14. August 2011
    Beiträge:
    35.352
    Danke erhalten:
    11.198
    Danke vergeben:
    1.601
    O.K.
    neuer Versuch:
    Code:
    .product-container {
        background-color: transparent;
        margin-bottom: 30px;
    }
    und
    Code:
    .product-container .inside {
        background-color: #fff;
    }
    Was die Schrift angeht:
    Wenn Du eine PC Schrift hast, können Browser die nicht unbedingt erkennen und fallen auf deine Standard-Schrift zurück.
    Web-Fonts sind von den meisten Browsern lesbar und man kann sie per html / css einbinden
     
  7. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    20. Juni 2017
    Beiträge:
    152
    Danke erhalten:
    16
    Danke vergeben:
    70
    Ich mach mich mal schlau, ob das ein Webfont ist, danke.

    Zu den Boxen, das hat grundsätzlich funktioniert, der Weg ist also offenbar richtig.
    Allerdings steht eine meiner Ribbons nun quasi aus der Kachel heraus und ragt in den Hintergrund.
    Ich dachte also, es müsste ja dann mit dem ersten Code von dir kombinierbar sein (der die Kacheln breiter gemacht hat) und hab da rumprobiert... leider ist die Sache so einfach nicht, der (die? das?) Ribbon schaut weiterhin stur aus meiner Kachel *seufz*

    Ich bin übrigens heilfroh, dass du auch so ein Nachtschattengewächs bist :)
    Sonst bedeutet zu "meinen Zeiten" Fragen stellen immer erstmal lange warten, vielen Dank, dass du dir hiermit die Nacht um die Ohren schlägst!
     
  8. barbara

    barbara G-WARD 2014-2020

    Registriert seit:
    14. August 2011
    Beiträge:
    35.352
    Danke erhalten:
    11.198
    Danke vergeben:
    1.601
    Das mit den Ribbons liegt daran, dass die Boxen nicht kleiner geworden sind, sondern der äußere Hintergrund wurde nur transparent.
    Man muss jetzt die Ribbons per css verschieben. Dazu muss man das aber auf der Seite sehen.

    Man könnte es noch mit einem margin-left oder margin-right versuchen, dann verschieben sich jedoch die swiper unschön

    Ja, ich bin auch gerne in den späten / frühen Stunden am Werkeln. Da ist es so schön ruhig ringsum. :)
    Allerdings werde ich jetzt in kürze auch in mein Bettchen verschwinden :D
     
  9. andreasschild

    andreasschild Erfahrener Benutzer

    Registriert seit:
    21. Mai 2014
    Beiträge:
    60
    Danke erhalten:
    5
    Danke vergeben:
    8
    Barbara, hast du eine Idee, wie man die Produkteliste Mobile etwas breiter machen kann? Wir haben zum Teil echt lange Wörter im Titel un dadurch wird alles verschoben bei Handys. Die Silbentrennung ist schlecht und das laden der Seite sehr unruhig.:-(
     
  10. barbara

    barbara G-WARD 2014-2020

    Registriert seit:
    14. August 2011
    Beiträge:
    35.352
    Danke erhalten:
    11.198
    Danke vergeben:
    1.601
    Hast Du ein Link, oder wenigsten ein Bild?