Wrapper Abstand verkleinern

Shopware 5 Themes & Design
1

Hallo,
ich möchte gerne die äusseren Abstände seitlich und jeweils oben und unten in der Einkaufswelt reduzieren.
Wenn ich es richtig gelesen habe ist es der „Wrapper“! oder?

Müssen die Änderungen in der global.less hinterlegt werdenn?
Ich füge mal ein Bild bei damit Ihr sehen könnt was ich meine!

Vielen Dank schon einmal im voraus für Eure Hilfe
Gruß

HMS

2

Die Änderungen im eigenen Theme machen:

https://developers.shopware.com/designers-guide/

3

@steinsoftware schrieb:

Die Änderungen im eigenen Theme machen:

https://developers.shopware.com/designers-guide/

Hallo,

vielen Dank für den Link, bringt mich jetzt aber nicht wirklich weiter da ich der englischen Sprache nicht bzw. so gut wie nicht mächtig bin.
Hast Du einen Tipp evtl. für mich wo ich die entsprechende Stelle im Guide finde, damit ich mir diese ggf. mit „Tante Google“ übersetzten lassen kann?
Ich sage schon einmal Danke für Deine Unterstützung

Gruß
HMS 

4

Das dürfte das Padding von content-main–inner sein.

5

Das Styling wird über less gemacht:

https://developers.shopware.com/designers-guide/less/

Vor allem die oberen Abschnitte sind für dich interessant.

Ein eigenes Theme erstellen im Theme-Manager. In der all.less dann mit @import deine eigene Less-Datei einbinden. Dort dann die gewünschten Änderungen einpflegen.

1 „Gefällt mir“
6

@NextMike schrieb:

Das dürfte das Padding von content-main–inner sein.

Hallo NextMike,
Danke für die Info!
Hast Du eine Ahnung wo ich die im welcher Less-Datei ich die „Class“ finde?
Gruß
HMS

7

global.less

Es reicht aber scheinbar nicht den Margin zu entfernen, weil der Inhalt den neuen Platz nicht füllt. Da hängt also mehr dran.

1 „Gefällt mir“
8

Hey @hms‍,

du brauchst hier nur das padding entfernen - beachte hier bitte die Media Queries. Wir verwenden die sogenannte Border-Box, deshalb brauchst du den Content nicht anpassen.

Viele Grüße,
Stephan Pohl  Shopware

1 „Gefällt mir“
9 
/*
Global Änderung
==========================================
.page-wrap {
    .unitize-min-width(320, 16);
}

.content-main,
.content--wrapper {
	.clearfix();
}

.content-main--inner {
	.unitize-padding(0, 10, 16);
	.clearfix();
}

.content {
	width: 100%;
	float: left;
}

@media screen and(min-width: @tabletViewportWidth) {
    .content-main {
        .box-shadow(0 0 4px 1px @border-color);
        .unitize(min-height, 750);
    }

    .content-main--inner {
        .unitize-padding(0, 30, 16);
        width: 100%;
    }
}

@media screen and (min-width: @desktopViewportWidth) {
    .content-main {
        .unitize(margin-top, 20);
        .unitize(margin-bottom, 45);
        .unitize(min-height, 700);
    }
    
    .content-main--inner {
        .unitize-padding(0, 5, 5, 5);
    }
}

Hey [@Stephan Pohl](http://forum.shopware.com/profile/2/Stephan Pohl “Stephan Pohl”)‍

Wo genau müssen die Änderungen vorgenommen werden. Ich habe bereits die “global.less” als Child angelegt und was ich augenscheinlich nicht brauchte gelöscht und den abgebildeten Inhalt in die neue less kopiert. Anschließend habe ich versucht mit der Änderung von “unitize-pading” von 50 auf 5 ein sichtbares Ergebis zu erhalten, funktioneirt aber irgendwie nicht. Bin ich in der richtigen less-Datei um den Rand zuverkleinern?

Vielleicht kann mir jemand helfen, wäre toll!

Danke schon mal im voraus!
Gruß
HMS

 

10

Hallo!
Ich suche noch immer nach einer Lösung, im Forum selber habe ich bisher nicht gefunden wie ich den Rahmenabstand in der Einkaufswelt verkleinern kann.

Ich sage schon einmal Danke
Gruß
HMS

11

Ich checke das mal wenn ich am DO zu Hause bin. 

12

Hi,

dein Weg ist der Richtige, aber hast du auch den Cache geleert und das Theme neu kompiliert?

Habe grade bei mir nochmals getestet und es klappt ohne Probleme.

@hms schrieb:

/*
Global Änderung

.page-wrap {
.unitize-min-width(320, 16);
}

.content-main,
.content–wrapper {
.clearfix();
}

.content-main–inner {
.unitize-padding(0, 10, 16);
.clearfix();
}

.content {
width: 100%;
float: left;
}

@media screen and(min-width: @tabletViewportWidth) {
.content-main {
.box-shadow(0 0 4px 1px @border-color);
.unitize(min-height, 750);
}

.content-main–inner {
.unitize-padding(0, 30, 16);
width: 100%;
}
}

@media screen and (min-width: @desktopViewportWidth) {
.content-main {
.unitize(margin-top, 20);
.unitize(margin-bottom, 45);
.unitize(min-height, 700);
}

.content-main–inner {
.unitize-padding(0, 5, 5, 5);
}
}

 

13

@DirkS schrieb:

Hi,

dein Weg ist der Richtige, aber hast du auch den Cache geleert und das Theme neu kompiliert?

Habe grade bei mir nochmals getestet und es klappt ohne Probleme.

@hms schrieb:

/*
Global Änderung

.page-wrap {
.unitize-min-width(320, 16);
}

.content-main,
.content–wrapper {
.clearfix();
}

.content-main–inner {
.unitize-padding(0, 10, 16);
.clearfix();
}

.content {
width: 100%;
float: left;
}

@media screen and(min-width: @tabletViewportWidth) {
.content-main {
.box-shadow(0 0 4px 1px @border-color);
.unitize(min-height, 750);
}

.content-main–inner {
.unitize-padding(0, 30, 16);
width: 100%;
}
}

@media screen and (min-width: @desktopViewportWidth) {
.content-main {
.unitize(margin-top, 20);
.unitize(margin-bottom, 45);
.unitize(min-height, 700);
}

.content-main–inner {
.unitize-padding(0, 5, 5, 5);
}
}

 

Also ich habe alles noch einmal gemacht, bekomme aber bisher kein sichtbares Ergebnis.

Meine Vorgehensweise STEP by STEP:

  1. Original globel.less dupliziert und in das Verzeichnis "meinTemplate/frontend/_public/src/les/_modules kopiert.
  2. Ich habe die global.less-Datei in unteren Bereich bei 
    ".content-main--inner { .unitize-padding(0, 5, 5, 5);" angepasst.
  3. In der all.less @import „_modules/global“; eingefügt und abgespeichert

Danach im Backend "Cache gelöscht und Template neu kompiliert.

Mein Abstand hat sich nicht verändert, der Wrapper hat noch immer rundherum einen Abstand von min. 50px

 

NACHTRAG
Ich habe gerade festgestellt die Einstellungen greifen, jedoch nicht auf der Startseite sondern nur auf den nachfolgenden Seiten. 
Stellt sich also nur noch die Frage: „Wie kann man die Startseite passen?“ - ist da eine andere Less-datei zuständig als die global.less??

Danke schon einmal im voraus für Alles :slight_smile:

Gruß
HMS

14

Hallo,

weiß jemand evtl. ein Lösung für mich wie ich die Startseite korrekt einstellen kann?

Gruß
HMS

15

@hms schrieb:

Hallo,

weiß jemand evtl. ein Lösung für mich wie ich die Startseite korrekt einstellen kann?

Gruß
HMS

Hallo!
Ich habe bisher noch keine Lösung gefunden wie man den Wrapper auf der Startseite anpassen kann.
Auf den nachfolgenden Seiten, die ohne Einkaufswelten laufen funktioniert die Einstellung allerdings bereits.

Weiß jemand wie ich vorgehen muss damit auch die Startseite mit der Einkaufswelt der Abstand verkleinert wird?
Vielleicht könnte ja mal jemand aus dem Hause Shopware eine kleine Hilfestellung geben!

Vielen Dank schon einmal im voraus!
HMS

16

@Stephan Pohl schrieb:

Hey @hms‍,

du brauchst hier nur das padding entfernen - beachte hier bitte die Media Queries. Wir verwenden die sogenannte Border-Box, deshalb brauchst du den Content nicht anpassen.

Viele Grüße,
Stephan Pohl  Shopware

Hallo Stefan,

wo müsste denn das padding entfernt werden, in der Globel.less oder wo?

Gruß
HMS 

17

Schick mal am besten den Link zur Seite so, dass man sich das angucken kann.

1 „Gefällt mir“
18

One beer for guidance :wink:
in emotions.less find class   .emotion–wrapper .  Here max-width and margin creates that un-needed space.

   

2 „Gefällt mir“
19

Riesen großes Dankeschön!  Thumb-Up

Ich war schon am verzweifeln bis ich diesen Beitrag gefunden habe.

Hat mir wirklich geholfen!

20

Hoffentlich im eigenen Theme…