Einkaufswelt Horizontale Liste

Shopware 5 Allgemein
1

Hallo, ich bin so langsam am verzweifeln und weiß nicht was ich falsch mache.

Ich will eine horizontale Liste erstellen und die in einer Einkaufswelt einbringen. Jetzt habe ich speziell per CSS mir die Klassen erstellt und alles fertig gemacht, aber die werden in der Einkaufswelt einfach nicht angezogen.

Also habe ich versucht das mit den CSS Klassen einzubinden die man in der Einkaufswelt dann einstellt, auch ohne Erfolg. Kann mir jemand einen Tipp geben, wie ich das realisiert bekomme?

Hier mein Test HTML Code mal.

          Kostenlose Farbmuster
          Käuferschutz
          MADE IN GERMANY
          Hochwertige Badmöbel
     


.trustbar {
     float: left;
     width: 100%;
     padding: 20px 0;
     background: #01162f;
     color: #fff;
}
 
.trustbarul {
     position: relative;
     float: left;
     left: 50%;
     margin: 0 auto;
     padding: 0;
}
 
.trustbarli {
     position: relative;
     float: left;
     right: 50%;
     margin-right: 10px;
     padding: 5px 10px;
     background: transparent;
     list-style: none;
}

 

2

Der TinyMCE wird Dir höchstwahrscheinlich Deinen Code löschen…

3

Das ist richtig, deshalb habe ich den Code nur mit der ul und li Klasse drin. Dann habe ich die CSS Klasse trustbar hinterlegt und in einer global.less Datei im Template jetzt folgendes mal eingestellt, leider klappt es nur immer noch nicht.

.emotion--element.trustbar .emotion--html .html--content {
     float: left !important;
     width: 100% !important;
     padding: 20px 0 !important;
     background: #01162f !important;
     color: #fff !important;
}
 
.emotion--element.trustbar .emotion--html .html--content > ul {
     position: relative !important;
     float: left !important;
     left: 50% !important;
     margin: 0 auto !important;
     padding: 0 !important;
}
 
.emotion--element.trustbar .emotion--html .html--content > li {
     position: relative !important;
     float: left !important;
     right: 50% !important;
     margin-right: 10px !important;
     padding: 5px 10px !important;
     background: transparent !important;
     list-style: none !important;
}

 

4

Was kommt denn davon im Quelltext wirklich an?

5

Also in der obersten div ist das trustbar mit dabei, aber die Regeln aus der global.less werden nicht übernommen.

1471×193 19.3 KB

6

Ist die global.less den irgendwie eingebunden?
Also zumindest in der all.less oder eine andere less, die über all.less im Theme eingebunden wurde? Sonst kann das “less” ja nicht den Weg ins CSS finden  Wink

7

@sonic schrieb:

Ist die global.less den irgendwie eingebunden?
Also zumindest in der all.less oder eine andere less, die über all.less im Theme eingebunden wurde? Sonst kann das „less“ ja nicht den Weg ins CSS finden  Wink

Ja das ist sie :wink: Die anderen Angaben aus der global.less funktionieren auch alle. 

Sind denn sonst alle Werte korrekt?

8

Schnell überflogen: Nein. Du hast trustbar direkt mit Punkt an emotion–element gehängt. Das geht so aber nur,  wenn beide class zum gleichen Element gehören, was bei Dir mit der trustbar so nicht der Fall ist. Überdenke das ganze less nochmal, das trustbar ist ein eigenständiges Element und somit auch das letzte css in der Kette. Mehr kann ich jetzt so auf die Schnelle mit dem Doofphone nicht darstellen. Das less ist aktuell wohl eher etwas durcheinander.

Edit: .trustbar müsste dann als Extra-Klasse direkt dem EKW-Element im Designer mitgegeben werden. Von dort aus dann verschachteln. Hier mal ein Beispliel, wie ich mir für ein Element den Font verkleiner: EKW–SMALLTEXT trage ich dann beim Element ein.

.EKW--SMALLTEXT {
	.emotion--html {
		.html--title {
			border: 0;
			padding-bottom: 0.5rem;
		}
		.html--content {
			padding-top: 0.5rem;
		
			h4 {
				font-size: 0.9375rem;
				font-weight: normal;
				margin:0;
				color: #000;
			}
		
			p {
				font-size: 0.75rem;
				line-height:1.125rem;
			}
		}
	}
}

 

9

Habe ich hier einen Denkfehler?!

Ich habe es jetzt wie folgt probiert:

.trustbar {
	.emotion--html {
		.html--content {
    		float: left !important;
		    width: 100% !important;
		    padding: 20px 0 !important;
		    background: #01162f !important;
		    color: #fff !important;			
			}
			ul {
			position: relative !important;
    		float: left !important;
    		left: 50% !important;
    		margin: 0 auto !important;
     		padding: 0 !important;
			}
			li {
			position: relative !important;
     		float: left !important;
     		right: 50% !important;
     		margin-right: 10px !important;
     		padding: 5px 10px !important;
     		background: transparent !important;
     		list-style: none !important;
			}
	}
}


Kostenlose Farbmuster
Käuferschutz
MADE IN GERMANY
Hochwertige Badmöbel

 

10

Das CSS kann ich jetzt nicht auf die Schnelle überprüfen, die Struktur sieht aber grob passend aus.
Bischen viel floats und importants, eigentlich sollte nur ein float für die LI reichen. Die position vom Element und vom übergeordneten müssen passen  Halo
Einfach die Seite in den Dev-Tools vom Browser angucken und dort mal mit den Styles spielen.
Theme denn auch compiliert? Erst mal mit Kleinigkeiten anfangen, also z.B.: passt die Schriftfarbe? Dann weiter zu den floats und margins  Smile
 

Würde es selber mal basteln, bin jetzt aber erstmal weg.

11

@sonic schrieb:

Das CSS kann ich jetzt nicht auf die Schnelle überprüfen, die Struktur sieht aber grob passend aus.
Bischen viel floats und importants, eigentlich sollte nur ein float für die LI reichen. Die position vom Element und vom übergeordneten müssen passen  Halo
Einfach die Seite in den Dev-Tools vom Browser angucken und dort mal mit den Styles spielen.
Theme denn auch compiliert? Erst mal mit Kleinigkeiten anfangen, also z.B.: passt die Schriftfarbe? Dann weiter zu den floats und margins  Smile
 

Würde es selber mal basteln, bin jetzt aber erstmal weg.

Theme kompiliert, alles gemacht, die Daten kommen trotzdem nicht in der Einkaufswelt an.  ouh man, ich will doch nur eine Auflistung horizontal haben mit einem Hintergrund… kann doch nicht sein dass das so eine Geburt ist… da zweifel ich dann schon manchmal an Shopware das so eine Kleinigkeit einfach so extrem komliziert ist Foot-in-Mouth

12

@konsi‍

Hm, wo hast du denn den Code aus dem ersten Beitrag eingegeben?

Also wenn ich diesen Code in einem Code-Element der EKW einbinde, dann wird der Inhalt auch angezeigt. Allerdings muss das CSS dann auch mit < style >…< /style > eingebunden werden. Also so:
 

          Kostenlose Farbmuster
          Käuferschutz
          MADE IN GERMANY
          Hochwertige Badmöbel
     



.trustbar {
     float: left;
     width: 100%;
     padding: 20px 0;
     background: #01162f;
     color: #fff;
}
 
.trustbarul {
     position: relative;
     float: left;
     left: 50%;
     margin: 0 auto;
     padding: 0;
}
 
.trustbarli {
     position: relative;
     float: left;
     right: 50%;
     margin-right: 10px;
     padding: 5px 10px;
     background: transparent;
     list-style: none;
}

Ob du die ganzen “float” brauchst, darüber lässt sich streiten :slight_smile:

13

@R4M schrieb:

@konsi‍

Hm, wo hast du denn den Code aus dem ersten Beitrag eingegeben?

Also wenn ich diesen Code in einem Code-Element der EKW einbinde, dann wird der Inhalt auch angezeigt. Allerdings muss das CSS dann auch mit < style >…< /style > eingebunden werden. Also so:
 

Kostenlose Farbmuster
Käuferschutz
MADE IN GERMANY
Hochwertige Badmöbel

.trustbar {
float: left;
width: 100%;
padding: 20px 0;
background: #01162f;
color: #fff;
}

.trustbarul {
position: relative;
float: left;
left: 50%;
margin: 0 auto;
padding: 0;
}

.trustbarli {
position: relative;
float: left;
right: 50%;
margin-right: 10px;
padding: 5px 10px;
background: transparent;
list-style: none;
}

Ob du die ganzen „float“ brauchst, darüber lässt sich streiten :slight_smile:

 Okay das funktioniert auf diesem Weg zumindest schon mal. Jetzt passen halt die ganzen Abstände nur nicht, siehe Bild… mal gucken ob ich das irgendwie hinkriege, ich glaube aber nicht.

 

EDIT: Okay jetzt passt alles, lässt sich doch über die Style Ebene sowie die CSS Klasse trustbar in der EKW dann alles einstellen :slight_smile: Vielen Dank an alle!