Sidebar in Shopware mit css / less ausblenden

//Sidebar in Shopware mit css / less ausblenden

Sidebar in Shopware mit css / less ausblenden

Manchmal ist es nötig die Sidebar in den Kategorien auszuschalten. Das geht relativ einfach mit css / less Dateien in einem abgeleiteten Template.

Wichtig: Auf keinen Fall sidebar.tpl in der Index Template Datei überschreiben, da sonst keine mobile Navigation mehr verfügbar ist.
Voraussetzung:  Abgeleitetes Template

Vorgehen:
.sidebar-main in Responsive Template suchen -> es wird sidebar.less gefunden.

Diese Datei kopieren und im Ziel-Template bereitstellen (falls noch nicht geschehen)

um die Zeile 268 müsste folgender Block zu finden sein:

is–ctl-listing &,
.is–ctl-forms &,
.is–ctl-tellafriend &,
.is–ctl-newsletter &,
.is–ctl-sitemap &,
.is–ctl-custom &,
.is–ctl-note.is–user &,
.is–ctl-address &,
.is–ctl-account.is–user & {
display: block;

& + .content–wrapper {
.unitize(margin-left, 260);
}
}

 

diesen so anpassen:

.is–ctl-listing &,
.is–ctl-forms &,
.is–ctl-tellafriend &,
.is–ctl-newsletter &,
.is–ctl-sitemap &,
.is–ctl-custom &,
.is–ctl-note.is–user &,
.is–ctl-address &,
.is–ctl-account.is–user & {
display: none;

& + .content–wrapper {
margin: 0;
}
}

 

Wichtig sind hier:
display: none und margin:0 bei content-wrapper. Die ‚margin:0‘ Definition sorgt dafür, dass der Inhalt sich anschließend auf die ganze Breite ausweitet. Display: none; schaltet die Sichtbarkeit des Elementes aus.

 

Anschließend alles hochladen, das Template kompilieren und Cache leeren lassen. Schon müssten die Sidebar verschwinden und die Produkte nehmen die ganze Breite auf Desktop und Tablets ein.
Wir hoffen dir geholfen zu haben!

Grüße,
Dein WebComplex Team

By | 2017-06-23T23:55:25+02:00 Juni 23rd, 2017|Tipps & Tricks|1 Comment

About the Author:

One Comment

  1. magnolia4 28. Juni 2018 at 12:32 - Reply

    Vielen Dank dafür!

    Und so lässt sich die Sidebar nur ab Tablet (Landscape) ausblenden:

    @media screen and (min-width: @tabletViewportWidth) and (max-width: @tabletLandscapeViewportWidth) {
    .sidebar-main {
    .is–ctl-listing &,
    .is–ctl-forms &,
    .is–ctl-tellafriend &,
    .is–ctl-newsletter &,
    .is–ctl-sitemap &,
    .is–ctl-custom &,
    .is–ctl-note.is–user &,
    .is–ctl-address &,
    .is–ctl-account.is–user & {
    display: none;

    & + .content–wrapper {
    margin: 0;
    }
    }
    }
    }

Leave A Comment