CSS Klassen für Einkaufswelt anlegen

Hallo,

ich würde gerne verschiedenen Elementen der Einkaufswelt z.B. Textblöcken einen Hintergrund bzw. eine Hintergrundfarbe geben.
In den Blöcken kann man ja eine CSS Klasse angeben, wo muss man diese dafür angelegt haben da ich ja nicht einfach den CSS Befehl reinschreiben kann.

 

Gruß

Christian

Hallo,

genau diese Funktion bietet dir unter anderem dieses Plugin: Vollflächiger Hintergrund bei nicht vollflächigen Einkaufswelten | Erlebniswelten | Erweiterungen | Shopware Community Store . Damit erhälst du neben einer individuellen CSS-Klasse für jede Einkaufswelt (basierend auf der Einkaufswelt - ID) auch die Möglichkeit, bei den Einkaufswelt - Freitextfeldern eine eigene CSS-Klasse über das Backend für die jeweilige Einkaufswelt festzulegen.

Grüße

Sebastian

@sschreier schrieb:

Hallo,

genau diese Funktion bietet dir unter anderem dieses Plugin: https://store.shopware.com/digi147422673213/vollflaechiger-hintergrund-bei-nicht-vollflaechigen-einkaufswelten.html . Damit erhälst du neben einer individuellen CSS-Klasse für jede Einkaufswelt (basierend auf der Einkaufswelt - ID) auch die Möglichkeit, bei den Einkaufswelt - Freitextfeldern eine eigene CSS-Klasse über das Backend für die jeweilige Einkaufswelt festzulegen.

Grüße

Sebastian

Hallo Sebastian,

vielen Dank für deine Antwort.
Sprich ich kann damit den einzelnen Elemten der Einkaufswelt z.b. Textblock A: Hintergrund grün und Texblock B: Hintergrund gelb, Banner A: grüner Rahmen, usw. jeweils zuweisen?

Hallo,

durch eine Einkaufswelten - CSS - Klasse kannst du halt CSS - Anpassungen auch auf eine einzelne Einkaufswelt beziehen, wenn bei dieser etwas anders aussehen soll als bei allen anderen. Bei den Einkaufswelten - Elementen selbst hast du ja auch jeweils die Möglichkeit, eine eigene CSS-Klasse festzulegen, über diese kannst du wahrscheinlich auch Hintergründe für die jeweiligen Einkaufswelten - Elemente realisieren. Für die komplette Zeile müssten du dann aber wahrscheinlich über die Einkaufswelten - CSS - Klasse gehen.

Das entsprechende CSS (beispielsweise für die Hintergründe) kannst du ja dann entweder in deinem Theme in einer LESS-Datei oder im Code-Container einer Einkaufswelt ablegen.

Grüße

Sebastian

@sschreier schrieb:

Hallo,

durch eine Einkaufswelten - CSS - Klasse kannst du halt CSS - Anpassungen auch auf eine einzelne Einkaufswelt beziehen, wenn bei dieser etwas anders aussehen soll als bei allen anderen. Bei den Einkaufswelten - Elementen selbst hast du ja auch jeweils die Möglichkeit, eine eigene CSS-Klasse festzulegen, über diese kannst du wahrscheinlich auch Hintergründe für die jeweiligen Einkaufswelten - Elemente realisieren. Für die komplette Zeile müssten du dann aber wahrscheinlich über die Einkaufswelten - CSS - Klasse gehen.

Das entsprechende CSS (beispielsweise für die Hintergründe) kannst du ja dann entweder in deinem Theme in einer LESS-Datei oder im Code-Container einer Einkaufswelt ablegen.

Grüße

Sebastian

Ok, mir stellt sich die Frage wo und wie lege ich die CSS Klassen an damit die Sachen darauf zugreifen können?
Also habe im eigenen Theme klar die all.less, wie müsste dafür der Code aussehen, dass die Einkaufswelt darauf zugreifen kann?

Gruß
Christian

Hallo,

bei dem genannten Plugin hast du ja dann bei der Einkaufswelt bei den Freitextfeldern ein Eingabefeld CSS-Klasse, wenn du dort bspw. blue eingibst und dann in der all.less in deinem eigenen Theme folgendes hinterlegst: 

.blue {
     Background: red;
}

dürfte die Einkaufswelt einen roten Hintergrund erhalten. Willst du einzelne Elemente ansprechen, musst du noch deren CSS-Klasse ergänzen oder bei deren Eingabefeld CSS Klasse die CSS-Klasse ergänzen, wie hier auf den Bildern zu sehen ( https://community.shopware.com/images/articles/58128aca15b2f33929105ec07a1bff6f.jpg ): https://community.shopware.com/Einkaufswelten_detail_1852.html#Text_Element .

Für ein Artikel - Element wäre das beispielsweise (wenn du bei der Einkaufswelt beim Freitextfeld des Plugins blue hinterlegt hast):

.blue .emotion--product {
     background: red;
}

Grüße

Sebastian

Hallo zusammen 

Genau an diesem Thema bin ich schon länger dran.

Möchte gerne in der Einkaufswelt ein Textfeld die Hintergrundfarbe ändern.

In der all.less habe ich nun zum Testen folgendes eingetragen:

.blue {
 background: #999;
  
}

Dancht in der EKW dieses hier:

Leider greift das nicht. 

Was mache ich für eine Falsche Ueberlegung? 

Danke Euch für die Hilfe 

Chris
 

Oder werden die erstellten „eigenen“ Klassen nicht in der all.less abgelegt? Versuche im Moment mit Google und selbst innovative das herauszufinden. 

Wäre ein cooles Gadet diese css Klasse nur die Doku ist dürftig. 

Hast du denn das Element in der EKW untersucht und diese Klasse auch in dein Theme übernommen? Also siehst du die Klasse im Quellcode?

[@Moritz Naczenski](http://forum.shopware.com/profile/14574/Moritz Naczenski “Moritz Naczenski”)‍ Danke für die Antwort nein es erscheint nicht im Code. Wird nicht geladen? In der all.less ist das schon richtig oder? Möchte nur den Background in diversen Elementen individuell anpassen.

Ich meine ob das Element im Quelltext die richtige Klasse hat. Also nicht im css/less, sondern das HTML Element im Quelltext.

Wie sieht denn dein Less-Code aus?

In der all.less sieht das so aus.

Im Quellcode so:

 

 

Moin,

 

mach mal im HTML-Code folgendes:

Unsere Spezialitäten

 

Natürlich mit deinem vervollständigen :wink:

@NahtlosShop‍ Danke für den super Tipp. Komme nun langsam näher an das ganze :slight_smile:

 

Nur muss ich den Code noch umschreiben :frowning:

 Unsere Spezialitäten

@NahtlosShop schrieb:

Moin,

 

mach mal im HTML-Code folgendes: Unsere Spezialitäten

 

Natürlich mit deinem vervollständigen ;)

 

Wieso kann ich den HTML Code nicht mehr sehen? 

Code wech :smiley:

Naja, vielleicht fummeln die wieder an der Forensoftware rum.

 

  1. Dein Text

 

 

Witzig. Auch wieder verschwunden.

Super ich sehe das nicht.

Sonst Wiki: https://wiki.selfhtml.org/wiki/CSS/Selektoren/Klassenselektor

1 Like

HTML Code am besten über die Code-Funktion des Editors einfügen. Andernfalls interpretiert der Editor das.

1 Like

Moin Moritz,

 

habe ich gemacht. Wurde wieder rausgehauen. Komisch war, dass man nach dem posten was sehen konnte und dann nach ca. 30 sek., war es wieder weg.

Versucht mit Codeschnipsel, Zitatblock.

1 Like