Abstand der Tabs kleiner machen

Shopware 5 Themes & Design
1

Hallo ihr lieben,

in welcher Datei kann ich den Abstand der Tabs verkleinern z.B auf 0 um diese direkt nebeneinander anzeigen zu lassen.

Verwende das Plugin von @scharfemedia‍ (Erstellen von zusätzlichen Tabs , Eigenschaften- und Downloads - Tabs für die Artikeldetailseiten).

 

 

2

Hallo @Sarah_Tier‍,

das kannst du über die all.less Datei in deinem Template steuern. Der Code ist im Responsive-Template in der Datei “tab-menu.less”.

Hier ein Beispiel:

.js--tab-menu {

    .tab--link {
        .unitize-margin(0, -2, 0, 0);
    }

}

VG

image
enerSpace Webhosting
Tel.: +49 511 - 219 568 76 | Web: https://www.enerspace.de

1 „Gefällt mir“
3

Hallo @enerSpace‍, 

danke werde es einmal testen und ein Feedback geben :slight_smile:

Edit: Hat funktioniert, vielen dank.

Frage: kann ich es auch so ähnlich steuern mit den Artikel Übersicht wo 4 Spalten sind ?

 

1 „Gefällt mir“
4

Hallo @Sarah_Tier‍,

war der Edit mit einer neuen Frage versehen? Wenn ja, hätte ich das fast übersehen. Am besten du erstellst immer eine neue Antwort  Smile

Über .LESS kannst du auch das steuern. Kannst du mir im Testshop von Shopware (https://www.shopwaredemo.de) ein Beispiel zuschicken? Dann suche ich dir den teil gern raus.

VG

image
enerSpace Webhosting
Tel.: +49 511 - 219 568 76 | Web: https://www.enerspace.de

 

5

Hallo @Sarah_Tier‍,

wie per PM versprochen, habe ich dir einen Code zusammengestrickt, womit du die Breite und die Anzahl der Produktboxen wie folgt abändern kannst:

  1. Desktop: Standard 3 Kacheln
  2. Tablet Landscape: 3 Kacheln
  3. Tablet: 3 Kacheln
  4. Mobile Landscape: 2 Kacheln
  5. Mobile: 2 Kacheln

 Der Original-Code kommt dieses mal aus der Datei: " _modules/product-box.less"

LESS Code für die Produktboxen:

// Info: Ändert das Listing, damit die Breite der Produkt-boxen angepasst werden kann

// Wenn du die Breite oder die Höhe ändern möchtest, musst du hier die Pixel festlegen. Voreingestellt sind 5px
// Du kannst hier aber auch einen Prozentwert eingeben
@abstand-breite-der-produktbox: 5px;
@abstand-hoehe-der-produktbox: 5px;

.listing {
    margin: -@abstand-hoehe-der-produktbox 0 0 -@abstand-breite-der-produktbox;
}

.product--box {
    padding: @abstand-hoehe-der-produktbox 0 0 @abstand-breite-der-produktbox;
}

// Hier wird die Standardbreite für jede einzelne Produkt-box festgelegt. 50% bedeutet bei der Mobilen Ansicht 2 Boxen
.box--minimal {
    width: 50%;
}

// Ansicht phone landscape
@media screen and(min-width: @phoneLandscapeViewportWidth) {
    .box--minimal {
        width: 50%;
    }
}

// Ansicht tablet (33.3% = 3 Kacheln)
@media screen and(min-width: @tabletViewportWidth) {
    .box--minimal {
        width: 33.3%;
    }
}

// Ansicht tablet landscape
@media screen and(min-width: @tabletLandscapeViewportWidth) {
    .box--minimal {
        width: 33.3%;
    }
}

// Ansicht desktop
@media screen and(min-width: @desktopViewportWidth) {
    .box--minimal {
        width: 33.3%;
    } 
}

Das kannst du einfach wieder in deine all.less Datei kopieren.

Edit:

  • Höhe hinzugefügt

VG

image
enerSpace Webhosting
Tel.: +49 511 - 219 568 76 | Web: https://www.enerspace.de

1 „Gefällt mir“
6

Hallo @enerSpace‍,

Du bist der Beste! (Y) 

Funktionirt super und das ohne problem.

1 „Gefällt mir“
7

@Sarah_Tier schrieb:

Funktionirt super und das ohne problem.

Wie alles bei uns  Sticking-out-tongue

VG

image
enerSpace Webhosting
Tel.: +49 511 - 219 568 76 | Web: https://www.enerspace.de

1 „Gefällt mir“