gelöst Abstände im der Produktkachel

Thema wurde von Anonymous, 3. August 2017 erstellt.

  1. Anonymous
    Anonymous Mitglied
    Registriert seit:
    7. Juli 2017
    Beiträge:
    11
    Danke erhalten:
    1
    Hallo, ich versuche verzweifelt die Abstände zwischen Produktbild - Preis - Lieferzeit zu ändern. Mit den Mitteln des StyleEditors ist mir das nicht gelungen. Siehe Screenshots. Hat jemand einen Tipp für mich?

    Grüße
    André
     

    Anhänge:

  2. Dennis (MotivMonster.de)
    Dennis (MotivMonster.de) G-WARD 2013/14/15/16
    Registriert seit:
    22. September 2011
    Beiträge:
    31.303
    Danke erhalten:
    6.268
    Danke vergeben:
    1.118
    Beruf:
    Mann für alles :)
    Ort:
    Weilburg
    Rechte taste "untersuchen" und da das CSS bestimmen was für den Bereich greift - Das dann im SE unter eigenes CSS ablegen um das Shopeigene damit zu überschreiben.
    Mit Link zum Shop können wir dir auch den Schnipsel fertig machen.
     
  3. barbara
    barbara G-WARD 2014-2020
    Registriert seit:
    14. August 2011
    Beiträge:
    35.657
    Danke erhalten:
    11.371
    Danke vergeben:
    1.617
    bitte daran denken, dass da auch Platz für Sonderangebote, Grundpreise und Bewertungs-Sterne vorhanden sein muss, falls man das nutzt.
    Sonst hast Du bei einem Angebot den Preis im Artikelbild darunter.
     
  4. Anonymous
    Anonymous Mitglied
    Registriert seit:
    7. Juli 2017
    Beiträge:
    11
    Danke erhalten:
    1
    Es scheint wohl so das es Platzhalter für andere Funktionen wie die Sterne sind. Mit einem CSS a la
    element.style {
    1. padding-top: 0px;
    2. padding-bottom: 100px;
    3. margin-top: 0px;
    4. margin-bottom: 100px;
    funktioniert es nicht. Habe es versucht über die Browser Elements (Untersuchen) probiert, aber ohne Erfolg. Will auch nicht unbedingt den Platzhalter rausschmeißen. Könnte ja sein dass ich in doch noch benötige.
     
  5. sabine_baumann
    sabine_baumann Erfahrener Benutzer
    Registriert seit:
    29. Juni 2017
    Beiträge:
    296
    Danke erhalten:
    25
    Danke vergeben:
    81
    Wie mache ich das? Möchte meine Kachel auch kleiner machen, ähnlich wie bei little monster (keine Ahnung ob ich hier einfach so Links anderer Gambio-Shops posten darf?)
     
  6. Dennis (MotivMonster.de)
    Dennis (MotivMonster.de) G-WARD 2013/14/15/16
    Registriert seit:
    22. September 2011
    Beiträge:
    31.303
    Danke erhalten:
    6.268
    Danke vergeben:
    1.118
    Beruf:
    Mann für alles :)
    Ort:
    Weilburg
    Ja kannst Links posten, solange es nicht SPam / Werbung ist = alles gut.
    In Chrome ist es rechte Taste und im Kontext Menü dann unten das "untersuchen" wählen.
    Dann siehst das html und css das da greift.
    Das musst dann am css testen bis es passt. - Oder dir von einem Designer für html Seiten helfen lassen.
    Und beachten dabei das da auch Freiraum ist für z.b. längere Artikelnamen, Angebotspreise, Bewertungssternchen
    Also nicht alles was weiß ist ist auch unbenutzt
     
  7. barbara
    barbara G-WARD 2014-2020
    Registriert seit:
    14. August 2011
    Beiträge:
    35.657
    Danke erhalten:
    11.371
    Danke vergeben:
    1.617
    Ich bin mir jetzt nciht sicher, aber ich meine man kann die Kachelhöe im Style Editor anpassen.
    Weiß aber nicht, ob man dann das css trotzdem noch ändern muss, weil der Text dann vielleicht unter der Kachel steht.
     
  8. sabine_baumann
    sabine_baumann Erfahrener Benutzer
    Registriert seit:
    29. Juni 2017
    Beiträge:
    296
    Danke erhalten:
    25
    Danke vergeben:
    81
    Ja Barbara, das stimmt. Ich habe die Kachelhöhe im SE verkleinert. Allerdings bleiben Schrift, Sterne und Preise am ursprünglichen Platz. Sieht bunt durcheinander gewürfelt aus. Geht wohl nicht ohne CSS.
     
  9. sabine_baumann
    sabine_baumann Erfahrener Benutzer
    Registriert seit:
    29. Juni 2017
    Beiträge:
    296
    Danke erhalten:
    25
    Danke vergeben:
    81
    #9 sabine_baumann, 14. August 2017
    Zuletzt von einem Moderator bearbeitet: 14. August 2017
    Ich als CSS-Laie hab mich jetzt mal daran versucht. Es hat auch geklappt, allerdings nur für das Flyover. Könnte mir jemand sagen, welchen Teil des Codes ich rausnehmen oder ändern müsste, damit es für die normale Kachelansicht greift? (Den CSS-Code für die normale Kachelansicht bekomme ich mit "Untersuchen" nicht zu greifen.

    Code:
    html body.page-index-type-gm_boosted_category.page-index-type-cat.page-index-type-cPath.filterbox-enabled div#outer-wrapper div#wrapper div.row div#main div.main-inside div.container-fluid div.row.product-filter-target.productlist.productlist-viewmode.productlist-viewmode-grid div.product-container.has-gallery form.no-sta.productlist-viewmode-grid .product-container .title, .productlist-swiper .product-container .title, .product-container.flyover .title {
        display: block;
        padding-top: 15px;
        height: 51px;
    }
    oder lieg ich total falsch?
     
  10. Versuche es mal damit:
    Code:
    html body.page-index-type-gm_boosted_category.page-index-type-cat.page-index-type-cPath.filterbox-enabled div#outer-wrapper div#wrapper div.row div#main div.main-inside div.container-fluid div.row.product-filter-target.productlist.productlist-viewmode.productlist-viewmode-grid div.product-container.has-gallery form.no-sta.productlist-viewmode-grid .product-container .title, .productlist-swiper .product-container .title{
        display: block;
        padding-top: 15px;
        height: 51px;
    }
    oder du schaltest Flyover vorübergehend ab zum bearbeiten der Kacheln(danach wieder löschen)
    Code:
    /* product-hover-js ausgeschaltet */
    .product-container.flyover{
        visibility: hidden;}
    
     
  11. sabine_baumann
    sabine_baumann Erfahrener Benutzer
    Registriert seit:
    29. Juni 2017
    Beiträge:
    296
    Danke erhalten:
    25
    Danke vergeben:
    81
    #11 sabine_baumann, 14. August 2017
    Zuletzt bearbeitet: 14. August 2017
    Super! Vielen Dank Gerd! Jetzt hat es geklappt! (nach Abschalten des Flyover!)