[Version 5.2.3] Einkaufswelten CSS, Globale Element-Einstellungen

Shopware 5 Installation/Einstieg
1

Hallo allerseits,

ich möchte gerne mit etwas anderen als inline-style in den Einkaufswelten arbeiten nur finde ich keine weiteren Informationen für das meiner Meinung nach vorgesehene Feld: 

Globale Element-Einstellungen

CSS Klasse:
 

Mehrere Klassen können mit einem Leerzeichen getrennt hinzugefügt werden.

Vielleicht kann mir wer erklären wie genau das funktionieren soll oder ein Link zu einer Erklärung geben. Für beides wäre ich sehr dankbar.

Freundliche Grüße

_max_

2

Hallo,

die CSS Klassen welche Du in das Feld einträgst werden ebenfalls auf das Element gesetzt. Du kannst in Deinem eigenen CSS / LESS Code das Element über diese Klassen mit zusätzlichen Styles versehen.

Sonnige Grüße,
Phil

3

@Philipp Schuch schrieb:

Hallo,

die CSS Klassen welche Du in das Feld einträgst werden ebenfalls auf das Element gesetzt. Du kannst in Deinem eigenen CSS / LESS Code das Element über diese Klassen mit zusätzlichen Styles versehen.

Sonnige Grüße,
Phil

Wenn ich versuche eine Klasse wie folgt einzutragen bekomme ich die Rückmeldung, dass keine Sonderzeichen erlaubt sind.

.class {

color:black;
padding: 20px;

}

 

777×170 13.2 KB

Könntest du mir sagen was ich falsch mache? 

Grüße aus dem regnerischen Gebirge :slight_smile:

 

_max_

4

Hi,

du trägst dort nur den Klassennamen ein. Die Klasse an sich definierst du ganz normal über die Less/CSS Datei(en).

5

@Creatixx schrieb:

Hi,

du trägst dort nur den Klassennamen ein. Die Klasse an sich definierst du ganz normal über die Less/CSS Datei(en).

Ach das meinte er mit „eigenen“, Danke.  

6

Hallo,

ich möchte hier noch mal nachhaken. Ich habe eine Klasse in der bereits vorhanden global.less definiert. Die klasse habe ich “.banner” genannt.

Nun habe ich “banner” in den Globalen Element-Einstellungen CSS Klasse in den Einkaufswelten beim Banner Element eingetragen. 

Es passiert aber nichts. 

Das Bild soll hier nicht größer als 180px x 180px sein.

global.less: .banner {width:180px; height:180px}

Einkaufsmanager:

1398×774 81.6 KB

 

Wo ist der Fehler, kann mir bitte jemand helfen?

 

7

Kann Shopware hierzu bitte eine verständliche Anleitung -mit Beispiel- geben, die Dokumentation ist jedenfalls nicht hilfreich!?

Danke!

 

2 „Gefällt mir“
8

Würde mich der letzten frage gern anschließen.

Stehen nämlich grad vor dem gleiche “problem”.

 

EDIT:

doch schon gelöst :slight_smile:

9

Wie hast du es gelöst?

10

Du legst in einer .less Datei in deinem Thema den gewünschten Code abschnitt/ CSS an, z.b.

```

.text123 {
.panel{
display: contents;
}
.panel–body.is–wide {
padding: 0px;

			@media screen and (min-width: @tabletViewportWidth) {
				padding: 1.25rem 0rem 1.25rem 0rem;
		}
	}
}


Da die klasse nun den Namen "text123" verwendet, trägst Du dann "text123" bei CSS Klasse ein.