# CSS Klassen für Einkaufswelt anlegen **URL:** \ **Category:** Themes & Design\ **Created:** [22. Juni 2018 um 11:29 UTC](https://forum.shopware.com/t/css-klassen-fur-einkaufswelt-anlegen/53660 "2018-06-22T11:29:55Z")\ **Posts on this page:** 20\ **Page:** 1
**Author:** ![Str33tfight3r](https://avatars.discourse-cdn.com/v4/letter/s/5f9b8f/32.png) [@Str33tfight3r](https://forum.shopware.com/u/Str33tfight3r)\ **Post date:** [22. Juni 2018 um 11:29 UTC](https://forum.shopware.com/t/css-klassen-fur-einkaufswelt-anlegen/53660/1 "2018-06-22T11:29:55Z")
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 ---
**Author:** ![sschreier](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/sschreier/32/23296_2.png) [@sschreier](https://forum.shopware.com/u/sschreier)\ **Post date:** [22. Juni 2018 um 11:35 UTC](https://forum.shopware.com/t/css-klassen-fur-einkaufswelt-anlegen/53660/2 "2018-06-22T11:35:51Z")
Hallo, genau diese Funktion bietet dir unter anderem dieses Plugin: [Vollflächiger Hintergrund bei nicht vollflächigen Einkaufswelten | Erlebniswelten | Erweiterungen | Shopware Community Store](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 ---
**Author:** ![Str33tfight3r](https://avatars.discourse-cdn.com/v4/letter/s/5f9b8f/32.png) [@Str33tfight3r](https://forum.shopware.com/u/Str33tfight3r)\ **Post date:** [22. Juni 2018 um 11:56 UTC](https://forum.shopware.com/t/css-klassen-fur-einkaufswelt-anlegen/53660/3 "2018-06-22T11:56:48Z")
> [@sschreier schrieb:](https://forum.shopware.com/profile/18157/sschreier "sschreier") > > Hallo, > > genau diese Funktion bietet dir unter anderem dieses Plugin: [https://store.shopware.com/digi147422673213/vollflaechiger-hintergrund-bei-nicht-vollflaechigen-einkaufswelten.html](https://store.shopware.com/digi147422673213/vollflaechiger-hintergrund-bei-nicht-vollflaechigen-einkaufswelten.html?_ga=2.94573919.2135459347.1529657782-1792213344.1460710031) . 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? ---
**Author:** ![sschreier](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/sschreier/32/23296_2.png) [@sschreier](https://forum.shopware.com/u/sschreier)\ **Post date:** [22. Juni 2018 um 13:04 UTC](https://forum.shopware.com/t/css-klassen-fur-einkaufswelt-anlegen/53660/4 "2018-06-22T13:04:39Z")
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 ---
**Author:** ![Str33tfight3r](https://avatars.discourse-cdn.com/v4/letter/s/5f9b8f/32.png) [@Str33tfight3r](https://forum.shopware.com/u/Str33tfight3r)\ **Post date:** [22. Juni 2018 um 14:37 UTC](https://forum.shopware.com/t/css-klassen-fur-einkaufswelt-anlegen/53660/5 "2018-06-22T14:37:41Z")
> [@sschreier schrieb:](https://forum.shopware.com/profile/18157/sschreier "sschreier") > > 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 ---
**Author:** ![sschreier](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/sschreier/32/23296_2.png) [@sschreier](https://forum.shopware.com/u/sschreier)\ **Post date:** [22. Juni 2018 um 15:28 UTC](https://forum.shopware.com/t/css-klassen-fur-einkaufswelt-anlegen/53660/6 "2018-06-22T15:28:13Z")
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/images/articles/58128aca15b2f33929105ec07a1bff6f.jpg) ): [https://community.shopware.com/Einkaufswelten\_detail\_1852.html#Text\_Element](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 ---
**Author:** ![weater](https://avatars.discourse-cdn.com/v4/letter/w/ad7895/32.png) [@weater](https://forum.shopware.com/u/weater)\ **Post date:** [26. Mai 2019 um 12:56 UTC](https://forum.shopware.com/t/css-klassen-fur-einkaufswelt-anlegen/53660/7 "2019-05-26T12:56:39Z")
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: ![](https://europe1.discourse-cdn.com/flex013/uploads/shopware/original/2X/7/77131ad5fd21476c203fdebe4afc6827c89838c4.png) Leider greift das nicht.  Was mache ich für eine Falsche Ueberlegung?  Danke Euch für die Hilfe  Chris   ---
**Author:** ![weater](https://avatars.discourse-cdn.com/v4/letter/w/ad7895/32.png) [@weater](https://forum.shopware.com/u/weater)\ **Post date:** [26. Mai 2019 um 15:41 UTC](https://forum.shopware.com/t/css-klassen-fur-einkaufswelt-anlegen/53660/8 "2019-05-26T15:41:13Z")
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.  ---
**Author:** ![Moritz\_Naczenski](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/moritz_naczenski/32/7792_2.png) [@Moritz\_Naczenski](https://forum.shopware.com/u/Moritz_Naczenski)\ **Post date:** [26. Mai 2019 um 16:11 UTC](https://forum.shopware.com/t/css-klassen-fur-einkaufswelt-anlegen/53660/9 "2019-05-26T16:11:24Z")
Hast du denn das Element in der EKW untersucht und diese Klasse auch in dein Theme übernommen? Also siehst du die Klasse im Quellcode? ---
**Author:** ![weater](https://avatars.discourse-cdn.com/v4/letter/w/ad7895/32.png) [@weater](https://forum.shopware.com/u/weater)\ **Post date:** [26. Mai 2019 um 16:18 UTC](https://forum.shopware.com/t/css-klassen-fur-einkaufswelt-anlegen/53660/10 "2019-05-26T16:18:14Z")
[@Moritz Naczenski]([http://forum.shopware.com/profile/14574/Moritz](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. ---
**Author:** ![Moritz\_Naczenski](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/moritz_naczenski/32/7792_2.png) [@Moritz\_Naczenski](https://forum.shopware.com/u/Moritz_Naczenski)\ **Post date:** [26. Mai 2019 um 16:22 UTC](https://forum.shopware.com/t/css-klassen-fur-einkaufswelt-anlegen/53660/11 "2019-05-26T16:22:15Z")
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? ---
**Author:** ![weater](https://avatars.discourse-cdn.com/v4/letter/w/ad7895/32.png) [@weater](https://forum.shopware.com/u/weater)\ **Post date:** [26. Mai 2019 um 16:43 UTC](https://forum.shopware.com/t/css-klassen-fur-einkaufswelt-anlegen/53660/12 "2019-05-26T16:43:33Z")
In der all.less sieht das so aus. ![](https://europe1.discourse-cdn.com/flex013/uploads/shopware/original/2X/e/e075e758addfbe74d28d8b5a509b792e670b2361.png) Im Quellcode so: ![](https://europe1.discourse-cdn.com/flex013/uploads/shopware/original/2X/c/c0f8d393ba592ed3623ee0a4d580dc5e2e8cb345.png) ![](https://europe1.discourse-cdn.com/flex013/uploads/shopware/original/2X/a/a40e6884eaf5a34a5b49406974b29f6d31049048.png)     ---
**Author:** ![oldschool](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/oldschool/32/26605_2.png) [@oldschool](https://forum.shopware.com/u/oldschool)\ **Post date:** [26. Mai 2019 um 17:11 UTC](https://forum.shopware.com/t/css-klassen-fur-einkaufswelt-anlegen/53660/13 "2019-05-26T17:11:11Z")
Moin,   > mach mal im HTML-Code folgendes: > > **Unsere Spezialitäten**   Natürlich mit deinem vervollständigen 😉 ---
**Author:** ![weater](https://avatars.discourse-cdn.com/v4/letter/w/ad7895/32.png) [@weater](https://forum.shopware.com/u/weater)\ **Post date:** [26. Mai 2019 um 17:36 UTC](https://forum.shopware.com/t/css-klassen-fur-einkaufswelt-anlegen/53660/14 "2019-05-26T17:36:02Z")
@NahtlosShop‍ Danke für den super Tipp. Komme nun langsam näher an das ganze 🙂   ![](https://europe1.discourse-cdn.com/flex013/uploads/shopware/original/2X/a/aa32835407ab095b1815a15ab2009a42f2a2588c.png) Nur muss ich den Code noch umschreiben ☹   **Unsere Spezialitäten** ---
**Author:** ![weater](https://avatars.discourse-cdn.com/v4/letter/w/ad7895/32.png) [@weater](https://forum.shopware.com/u/weater)\ **Post date:** [26. Mai 2019 um 17:58 UTC](https://forum.shopware.com/t/css-klassen-fur-einkaufswelt-anlegen/53660/15 "2019-05-26T17:58:48Z")
> [@NahtlosShop schrieb:](https://forum.shopware.com/profile/29039/NahtlosShop "NahtlosShop") > > Moin, > >   > > > mach mal im HTML-Code folgendes: **Unsere Spezialitäten** > >   > > Natürlich mit deinem vervollständigen ![;)](https://dub1.discourse-cdn.com/flex013/resources/emoji/wink.png ";)") > >   > > Wieso kann ich den HTML Code nicht mehr sehen?  ---
**Author:** ![oldschool](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/oldschool/32/26605_2.png) [@oldschool](https://forum.shopware.com/u/oldschool)\ **Post date:** [26. Mai 2019 um 18:10 UTC](https://forum.shopware.com/t/css-klassen-fur-einkaufswelt-anlegen/53660/16 "2019-05-26T18:10:43Z")
Code wech 😃 Naja, vielleicht fummeln die wieder an der Forensoftware rum.   1. Dein Text     Witzig. Auch wieder verschwunden. ---
**Author:** ![weater](https://avatars.discourse-cdn.com/v4/letter/w/ad7895/32.png) [@weater](https://forum.shopware.com/u/weater)\ **Post date:** [26. Mai 2019 um 18:14 UTC](https://forum.shopware.com/t/css-klassen-fur-einkaufswelt-anlegen/53660/17 "2019-05-26T18:14:29Z")
Super ich sehe das nicht. ---
**Author:** ![oldschool](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/oldschool/32/26605_2.png) [@oldschool](https://forum.shopware.com/u/oldschool)\ **Post date:** [26. Mai 2019 um 18:18 UTC](https://forum.shopware.com/t/css-klassen-fur-einkaufswelt-anlegen/53660/18 "2019-05-26T18:18:14Z")
Sonst Wiki: [https://wiki.selfhtml.org/wiki/CSS/Selektoren/Klassenselektor](https://wiki.selfhtml.org/wiki/CSS/Selektoren/Klassenselektor) ---
**Author:** ![Moritz\_Naczenski](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/moritz_naczenski/32/7792_2.png) [@Moritz\_Naczenski](https://forum.shopware.com/u/Moritz_Naczenski)\ **Post date:** [26. Mai 2019 um 18:33 UTC](https://forum.shopware.com/t/css-klassen-fur-einkaufswelt-anlegen/53660/19 "2019-05-26T18:33:03Z")
HTML Code am besten über die Code-Funktion des Editors einfügen. Andernfalls interpretiert der Editor das. ---
**Author:** ![oldschool](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/oldschool/32/26605_2.png) [@oldschool](https://forum.shopware.com/u/oldschool)\ **Post date:** [27. Mai 2019 um 11:48 UTC](https://forum.shopware.com/t/css-klassen-fur-einkaufswelt-anlegen/53660/20 "2019-05-27T11:48:30Z")
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. [Nächste Seite](https://forum.shopware.com/t/css-klassen-fur-einkaufswelt-anlegen/53660.md?page=2)