ThemeWare® CMS-Styling für Erlebniswelten

In dieser Anleitung erfährst du, alles über das ThemeWare® CMS-Styling.

Für eine maximale Flexibilität und Kompatibilität, basiert das "ThemeWare® CMS-Styling" auf CMS-Blöcken und kann im Tab "Erlebniswelten" für verschiedene Seitentypen aktiviert/deaktiviert werden.

• Tab "Erlebniswelten" => Bereich "ThemeWare® CMS-Styling" => ThemeWare® CMS-Styling laden (CMS-Shopseiten / CMS-Landingpages / CMS-Kategorieseiten / CMS-Produktseiten)

Das "ThemeWare® CMS-Styling" wird nur in Erlebniswelten mit dem Größenmodus "Zentrierter Inhalt" (=boxed) und angewendet.

Tipp: Anwendungsbeispiele findest du in unseren Demoshops.

ThemeWare® CMS-Styling

Auf CMS-Seiten mit aktivem "ThemeWare® CMS-Styling" bekommen CMS-Blöcke eine Grundkonfiguration. Diese besteht derzeit aus einer Rahmenfarbe, einer Hintergrundfarbe und einem Außenabstand nach unten.

Diese Farben sind ebenfalls über den Tab "Erlebniswelten" konfigurierbar und werden auf allen Seiten mit aktivem "ThemeWare® CMS-Styling" angewendet.

• Tab "Erlebniswelten" => Bereich "ThemeWare® CMS-Styling" => Abschnitt "CMS-Block" bzw. "CMS-Sektion"

Individuelle Anpassungen mit CSS-Klassen

Da das "ThemeWare® CMS-Styling" quasi für alle CMS-Blöcke gleich ist, gibt es zusätzlich zum globalen Styling neue CSS-Klassen um gewünschte Blöcke gezielt zu "resetten". Damit kannst du das gesamte "ThemeWare® CMS-Styling" für einen CMS-Block oder jeweils die Rahmenfarbe, die Hintergrundfarbe oder den Außenabstand entfernen bzw. resetten.

Umgekehrt gibt es natürlich auch Fälle wo auf Seiten ohne "ThemeWare® CMS-Styling" dennoch CMS-Blöcke passend gestylt werden sollen. Auch daran haben wir gedacht: Über weitere neue CSS-Klassen kann jedem gewünschten CMS-Block manuell das "ThemeWare® CMS-Styling" hinzugefügt werden. Damit kann man das gesamte "ThemeWare® CMS-Styling" oder jeweils für die Rahmenfarbe, die Hintergrundfarbe oder den Außenabstand auf einem CMS-Block anwenden.

CSS-Klassen

Klasse	Bereich	Funktionsbeschreibung
twt-cms-block	Block	Der entsprechende CMS-Block erhält vordefiniertes Styling (Rahmenfarbe, Hintergrundfarbe, Außenabstand nach unten).
twt-cms-block-margin	Block	Der entsprechende CMS-Block erhält den Außenabstand nach unten vom vordefinierten Styling.
twt-cms-block-border	Block	Der entsprechende CMS-Block erhält die Rahmenfarbe vom vordefinierten Styling.
twt-cms-block-background	Block	Der entsprechende CMS-Block erhält die Hintergrundfarbe vom vordefinierten Styling.
twt-cms-block-reset	Block	Das vordefinierte Styling wird auf den entsprechenden CMS-Block nicht angewendet (Rahmenfarbe, Hintergrundfarbe, Außenabstand nach unten).
twt-cms-block-reset-margin	Block	Der Außenabstand nach unten vom vordefinierten Styling wird im entsprechenden CMS-Block entfernt.
twt-cms-block-reset-border	Block	Die Rahmenfarbe vom vordefinierten Styling wird im entsprechenden CMS-Block entfernt.
twt-cms-block-reset-background	Block	Die Hintergrundfarbe vom vordefinierten Styling wird im entsprechenden CMS-Block entfernt.
twt-cms-reset-padding	Section	Diese Klasse entfernt doppelte Paddings in Layouts mit Sidebar.

Hinweis: Alle ThemeWare® CSS-Klassen findest du in unserem Artikel ThemeWare® CSS-Klassen für Erlebniswelten.

Sidebar-Erlebniswelten

Ab ThemeWare® 0.3.1 gibt es für die Sidebar-Sektion zwei Layout-Varianten. Die entsprechende Konfiguration findest du im Tab "Erlebniswelten".

• Variante 1

  • Die Sidebar-Sektion und die Content-Sektion werden (wie gehabt) zu einem Container mit "ThemeWare® CMS-Styling" kombiniert bzw. zusammengefasst.

• Variante 2

  • Die Sidebar-Sektion wird nicht mit der Content-Sektion kombiniert bzw. zusammengefasst.

Tipp: Die Konfiguration "Sidebar-Sektionen zusammenfassen (CMS Seiten)" findest du im Tab "Erlebniswelten" => Bereich "ThemeWare® CMS-Styling" => Abschnitt "Basiskonfiguration".

Beispiele

Sidebar-Sektion und Content-Sektion zu einem Container mit "ThemeWare® CMS-Styling" kombiniert (Variante 1)

Sidebar-Sektion und Content-Sektion mit "ThemeWare® CMS-Styling" aber nicht kombiniert (Variante 2)

Sidebar-Sektion und Content-Sektion ohne "ThemeWare® CMS-Styling"

---

Bootstrap CSS-Klassen nutzen

Das CMS-Styling fügt dem jeweiligen CMS-Block – wie oben erklärt – einen Rahmen, eine Hintergrundfarbe und den Außenabstand nach unten hinzu.

ThemeWare® CMS-Styling

background-color: #ffffff;
border: 1px solid #eeeeee;
border-radius: 2px;
margin-bottom: 20px;

Shopware hat mit Version 6.6.0 !important Anweisungen für Bootstrap-Helfer-Klassen entfernt (siehe NEXT-29246). Dadurch werden nun einige in Bootstrap verfügbare CSS-Klassen aufgrund der entsprechenden CSS-Hierarchie vom CMS-Styling überschrieben.

Betroffen sind beispielsweise die folgenden CSS-Klassen und ihre Varianten:

.bg-info
.bg-opacity-10
.border-0
.border-5
.border-success
.border-info-subtle
.border-opacity-50
.mb-4
.rounded-bottom
.rounded-4

Möchtest du diese Bootstrap CSS-Klassen für den Rahmen, den Hintergrund oder den Abstand unterhalb nutzen, entferne bitte das CMS-Styling für den entsprechenden CMS-Block mit der CSS-Klasse twt-cms-block-reset.