Verzweiflung mit dem Banner / Bitte um Hilfe

Shopware 5 Themes & Design
1

Hallo Leut,

 

Nachdem ich nun wirklich alles gelesen habe und den Code untersucht noch und nöcher, komme ich zu keiner Lösung.

  1. Der Banner wird immer mit einem Rand dargestellet. Wie bekomme ich den Weg. daß das Element den ganzen Container füllt?

  1. Wie bekomme ich den vergrößerungs Effekt weg? Das Bild wird immer skaliert und pixelig.

 

Ich weiß mir wirklich nicht zu helfen und hoffe auf Unterstützung von euch.

Wenn ich das nicht anständig hin bekomme muss Sopware gehen. So kann ich das nicht freigeben.

 

2

Hi,

welche Styles hast du den auf den Element bzw. was ist das überhaupt für ein Element?

Was steht in der Browser-Toolbar, wenn du Rechtsklick > Prüfen machst?

Gruß Heiner

3

Ahoi, um den Abstand dort wegzubekommen musst du wahrscheinlich im eigenen Template in widgets/emotion/index.tpl die Variable $basewidth ändern, ggf. noch CSS/LESS Anpassungen.

Die Bild-Sklaierung wegzubekommen ist nicht so mal eben da das Ganze EinkaufsweltGedöhns „absolute“ positioniert ist.

Es gibt zb. Templates von TAB10 die eine „floating“ Variante der Einkaufswelten anbieten.

Gruß

4

Sind mehrere Baustellen:
Der Container für die Seite ist max 1260px breit.
Die Einkaufswelten sind per default 1160px breit. => 100px Leerraum - verteilt auf links und rechts.
Das emotion-widget auf 1260px erweitern wäre eine Möglichkeit, aber dann muss immer noch im Wrap-Container das padding auf 0 gesetzt werden. Auch die ganze interne “Logik” von den Einkaufswelten ist auf 1160 ausgelegt.

Es wäre wohl einfacher, den ganzen wrap-container zu verkleinern und das padding auf 0 setzen. Diese Änderungen ergeben den Screenshot - einfach mal mit den Developertools von Chrome spielen!
DesktopViewPort

.container von max-width: 78.75rem auf 72.5rem
.content–main-inner auf padding: 0 0 3.125rem 0
.content–home margin-top:0 

Das wäre in der Form aber dann für alle Seiten.

1363×767 185 KB

1 „Gefällt mir“
5

Liebe Leute,

 

Ertst mal herzlichen Dank für die Hilfe.

 

Hab den Contaiber jetzt sogar auf 65rem runter gesetzt (muss ich noch auf allen Seiten prüfen)

So ist die Gesamtanmutung halbwegs erträglich.

Nervig ist immer noch der weiße Rahmen zwischen Container und Container-main-inner bzw. Einkaufwelt.

das wäre netter vollflächig.

danke, es kann weiter gehen :wink:

cheers!

6

@sonic:

den Abstand content zu container hab ich noch nicht rausgebracht…

7

On the Fly im Chrome für Desktop

@media screen and (min-width: 78.75em) {
.content-main--inner {
	padding:0;
 }
}

@media screen and (min-width: 78.75em){
.content--home {
	margin-top:0;
 }
}
8

Moin,

ich stehe jetzt etwas auf dem Schlauch.

Könnt ihr mir kurz sagen wo genau was ändern muss?

 

9

 

He sonic,

 

danke erstmal. Hat geklappt, zwei Tippfehler waren das Problem. Ich hab den  Container per Custom css auf 65rem gesetzt. Soll man da nicht lieber die Klasse im LESS ändern und wenn ja wo? Sozusagen als Template dann?

 

herzlichen Dank ü@sonic schrieb:

On the Fly im Chrome für Desktop

@media screen and (min-width: 78.75em) {
.content-main–inner {
padding:0;
}
}

@media screen and (min-width: 78.75em){
.content–home {
margin-top:0;
}
}

 

 

10

So,

ich habe eine Lösung gefunden.
Habe die global.less und home.less angepasst und sie per all.less in meine Theme geladen.

home.less

/*
Home
==============================================
Defines the styling of the home-page content elements.
*/

.content--home {
    .unitize(margin-top, 0);

    @media screen and (min-width: @tabletViewportWidth) {
        .unitize(margin-top, 0);
    }

    @media screen and (min-width: @desktopViewportWidth) {
        .unitize(margin-top, 0);
    }
}

global.less
 

@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, 0, 0, 0);
    }
}

Hoffe das hilft weiter.

Beste Grüße
Fabian

1 „Gefällt mir“
11

Ihr müsst halt nur gucken, wie sich die Einkaufswelten nun verhalten. Die Basis hat intern eine Breite von 1160px

/Frontend/Bare/widgets/emotion/index.tpl

{$baseWidth = 1160}

Wenn nun nur die Paddings verkleinert (auf 0) gesetzt werden, wird natürlich dem entsprechend erstmal die Emotion-Box größer - sofern nicht in gleicher Große auch der Container verkleinert wird. Also gucken ob Masonry und resize noch so aussehen, wie sie sollen  Wearing-Sunglasses

1 „Gefällt mir“
12

Heißt das: wenn ich die base width anpasse wie oben…dann muss ich in alle LESS Dateien rein und adaptieren weil alles schmaler und dann rutscht das hübsch? 

Ist es nicht möglich, der seite eine max, basis breite von z.B. 960 zu verpsassen? Gültig für alle unterseiten und categorien etc. Such mich grad wund…

Wenn ich das in der Global less mache hab ich alles links kleben und nix mehr responsiv…

13

Hi,

ich hatte mich auch über den Rand gestört. Ich habe es dann so gelöst:

.content-main--inner {
    padding: 0rem 1.5625rem 1.5625rem;
}

.content--home {
    margin-top: 1.5625rem;
}

 

So bekommt man einen schönen kleinen Rand und es sieht allgemein besser aus mMn. 

Interessant ist dass es nur mit Einkaufswelten funktioniert die auf Masonry-Effekt gestellt sind. Wenn die Einkaufswelt auf Resize gestellt ist wird automatisch wieder ein großer Rand links und rechts angezeigt…

14

Das war die Lösung!!! Perfekt und herzlichen Dank!

 

BTW: die gesamtanmutung (container zu breit wie oben gefragt) lässt sich über container.less leicht ändern (in meinem Fall 960px). Man muss dann halt in die blog.less und all die anderen um padding anzupassen, da jetzt alle blöcke am Rand kleben.

 

 

@sloth schrieb:

So,

ich habe eine Lösung gefunden.
Habe die global.less und home.less angepasst und sie per all.less in meine Theme geladen.

home.less

/*
Home

Defines the styling of the home-page content elements.
*/

.content–home {
.unitize(margin-top, 0);

@media screen and (min-width: @tabletViewportWidth) {
.unitize(margin-top, 0);
}

@media screen and (min-width: @desktopViewportWidth) {
.unitize(margin-top, 0);
}
}

global.less
 

@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, 0, 0, 0);
}
}

Hoffe das hilft weiter.

Beste Grüße
Fabian