ThemeWare® CSS-Klassen für Erlebniswelten (Übersicht)

Animationen – CSS-Animationen für CMS-Blöcke

Klasse	Bereich	Beschreibung
twt-cms-animation	Block	Aktiviert die konfigurierte CSS-Animation für den entsprechenden CMS-Block.

---

Boxed-Klassen – CSS-Klassen für Fullwidth-Sektionen

Klasse	Bereich	Beschreibung
twt-cms-block-boxed	Block	Setzt einen Block auf die maximale Container-Breite der Theme-Konfiguration (abzüglich 40px).
twt-cms-boxed-content	Sektion	Setzt eine Sektion auf die maximale Container-Breite der Theme-Konfiguration.

---

ThemeWare® CMS-Styling

CSS-Klasse	Bereich	Funktionsbeschreibung
twt-cms-block	Block	Der entsprechende CMS-Block erhält vordefiniertes Styling (Rahmenfarbe, Hintergrundfarbe, Außenabstand nach unten).
twt-cms-block-background	Block	Der entsprechende CMS-Block erhält die Hintergrundfarbe vom vordefinierten Styling.
twt-cms-block-border	Block	Der entsprechende CMS-Block erhält die Rahmenfarbe vom vordefinierten Styling.
twt-cms-block-margin	Block	Der entsprechende CMS-Block erhält den Außenabstand nach unten 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-background	Block	Die Hintergrundfarbe 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-margin	Block	Der Außenabstand nach unten vom vordefinierten Styling wird im entsprechenden CMS-Block entfernt.
twt-cms-reset-padding	Section	Diese Klasse entfernt doppelte Paddings in Layouts mit Sidebar.

---

Column-Klassen – Spaltenabstände in CMS-Blöcken

CSS-Klasse	Bereich	Beschreibung
twt-cms-col-padding-0	Block	Setzt den Innenabstand für Spalten in CMS-Blöcken auf 0 Pixel.
twt-cms-col-padding-5	Block	Setzt den Innenabstand für Spalten in CMS-Blöcken auf 5 Pixel.
twt-cms-col-padding-10	Block	Setzt den Innenabstand für Spalten in CMS-Blöcken auf 10 Pixel.
twt-cms-col-padding-15	Block	Setzt den Innenabstand für Spalten in CMS-Blöcken auf 15 Pixel.
-	-	20 Pixel ist der Standard Spalten-Abstand.
twt-cms-col-padding-25	Block	Setzt den Innenabstand für Spalten in CMS-Blöcken auf 25 Pixel.
twt-cms-col-padding-30	Block	Setzt den Innenabstand für Spalten in CMS-Blöcken auf 30 Pixel.
twt-cms-col-padding-35	Block	Setzt den Innenabstand für Spalten in CMS-Blöcken auf 35 Pixel.
twt-cms-col-padding-40	Block	Setzt den Innenabstand für Spalten in CMS-Blöcken auf 40 Pixel.

Mobile Darstellung

CSS-Klasse	Bereich	Beschreibung
-	-	0 Pixel ist der Standard Spalten-Abstand.
twt-cms-col-margin-5	Block	Setzt den "Abstand nach unten" für Spalten in CMS-Blöcken auf 5 Pixel.
twt-cms-col-margin-10	Block	Setzt den "Abstand nach unten" für Spalten in CMS-Blöcken auf 10 Pixel.
twt-cms-col-margin-15	Block	Setzt den "Abstand nach unten" für Spalten in CMS-Blöcken auf 15 Pixel.
twt-cms-col-margin-20	Block	Setzt den "Abstand nach unten" für Spalten in CMS-Blöcken auf 20 Pixel.
twt-cms-col-margin-25	Block	Setzt den "Abstand nach unten" für Spalten in CMS-Blöcken auf 25 Pixel.
twt-cms-col-margin-30	Block	Setzt den "Abstand nach unten" für Spalten in CMS-Blöcken auf 30 Pixel.
twt-cms-col-margin-35	Block	Setzt den "Abstand nach unten" für Spalten in CMS-Blöcken auf 35 Pixel.
twt-cms-col-margin-40	Block	Setzt den "Abstand nach unten" für Spalten in CMS-Blöcken auf 40 Pixel.
twt-cms-col-margin-45	Block	Setzt den "Abstand nach unten" für Spalten in CMS-Blöcken auf 45 Pixel.
twt-cms-col-margin-50	Block	Setzt den "Abstand nach unten" für Spalten in CMS-Blöcken auf 50 Pixel.
twt-cms-col-margin-55	Block	Setzt den "Abstand nach unten" für Spalten in CMS-Blöcken auf 55 Pixel.
twt-cms-col-margin-60	Block	Setzt den "Abstand nach unten" für Spalten in CMS-Blöcken auf 60 Pixel.
twt-cms-col-margin-65	Block	Setzt den "Abstand nach unten" für Spalten in CMS-Blöcken auf 65 Pixel.
twt-cms-col-margin-70	Block	Setzt den "Abstand nach unten" für Spalten in CMS-Blöcken auf 70 Pixel.
twt-cms-col-margin-75	Block	Setzt den "Abstand nach unten" für Spalten in CMS-Blöcken auf 75 Pixel.
twt-cms-col-margin-80	Block	Setzt den "Abstand nach unten" für Spalten in CMS-Blöcken auf 80 Pixel.

---

Gap-Klassen – Abstände in CMS-Blöcken

Klasse	Bereich	Funktionsbeschreibung
twt-cms-grid-gap-0	Block	Setzt den Abstand in CMS-Blöcken auf 0 Pixel.
twt-cms-grid-gap-5	Block	Setzt den Abstand in CMS-Blöcken auf 5 Pixel.
twt-cms-grid-gap-10	Block	Setzt den Abstand in CMS-Blöcken auf 10 Pixel.
twt-cms-grid-gap-15	Block	Setzt den Abstand in CMS-Blöcken auf 15 Pixel.
twt-cms-grid-gap-20	Block	Setzt den Abstand in CMS-Blöcken auf 20 Pixel.
twt-cms-grid-gap-25	Block	Setzt den Abstand in CMS-Blöcken auf 25 Pixel.
twt-cms-grid-gap-30	Block	Setzt den Abstand in CMS-Blöcken auf 30 Pixel.
twt-cms-grid-gap-35	Block	Setzt den Abstand in CMS-Blöcken auf 35 Pixel.
twt-cms-grid-gap-40	Block	Setzt den Abstand in CMS-Blöcken auf 40 Pixel.
twt-cms-grid-gap-45	Block	Setzt den Abstand in CMS-Blöcken auf 45 Pixel.
twt-cms-grid-gap-50	Block	Setzt den Abstand in CMS-Blöcken auf 50 Pixel.

---

Headline-Klassen – Überschriften in CMS-Text-Blöcken

CSS-Klasse	Bereich	Beschreibung
twt-cms-headline-bath	Block	Stylt die Headline und den nachfolgenden Absatz in CMS-Blöcken für verschiedene Themes.
twt-cms-headline-classic	Block	Stylt die Headline in CMS-Blöcken wie in Shopware 5 Einkaufswelten.
twt-cms-headline-clean	Block	Stylt die Headline und den nachfolgenden Absatz in CMS-Blöcken wie im Clean-Theme.
twt-cms-headline-flower	Block	Stylt die Headline in CMS-Blöcken wie im Flower-Theme.
twt-cms-headline-kids	Block	Stylt die Headline in CMS-Blöcken wie im Kids-Theme.
twt-cms-headline-ladieswear	Block	Stylt die Headline und den nachfolgenden Absatz in CMS-Blöcken wie im Ladieswear-Theme.
twt-cms-headline-plants	Block	Stylt die Headline in CMS-Blöcken wie im Ladieswear-Theme.

---

Image-Klassen – Dekorationsklassen für Bilder

Klasse	Bereich	Funktionsbeschreibung
twt-cms-image-border	Block	Fügt Bildern in einem CMS-Block einen 12px dicken Rahmen hinzu.
twt-cms-image-border-semi	Block	Fügt Bildern in einem CMS-Block einen 12px dicken, halbtransparenten Rahmen hinzu.
twt-cms-image-box-shadow	Block	Fügt Bildern in einem CMS-Block einen Schlagschatten hinzu.
twt-cms-image-box-shadow-level-1	Block	Fügt Bildern in einem CMS-Block einen Schlagschatten hinzu.
twt-cms-image-box-shadow-level-2	Block	Fügt Bildern in einem CMS-Block einen Schlagschatten hinzu.
twt-cms-image-box-shadow-level-3	Block	Fügt Bildern in einem CMS-Block einen Schlagschatten hinzu.
twt-cms-image-box-shadow-level-4	Block	Fügt Bildern in einem CMS-Block einen Schlagschatten hinzu.
twt-cms-image-box-shadow-level-5	Block	Fügt Bildern in einem CMS-Block einen Schlagschatten hinzu.
twt-cms-image-box-shadow-lg	Block	Fügt Bildern in einem CMS-Block einen auffälligen Schlagschatten hinzu.
twt-cms-image-box-shadow-sm	Block	Fügt Bildern in einem CMS-Block einen dezenten Schlagschatten hinzu.
twt-cms-image-rounded	Block	Rundet Bilder in einem CMS-Block ab.

---

Hover-Klassen – Hover-Effekte für Bilder

Klasse	Bereich	Funktionsbeschreibung
twt-cms-image-hover-blur	Block	Dreht Bilder mit einem Link (Hover-Effekt).
twt-cms-image-hover-blur-out	Block	Dreht Bilder mit einem Link (Hover-Effekt).
twt-cms-image-hover-flash	Block	Lässt Bilder mit einem Link aufblitzen (Hover-Effekt).
twt-cms-image-hover-grayscale	Block	Graut Bilder mit einem Link aus (Hover-Effekt).
twt-cms-image-hover-grayscale-out	Block	Färbt graue Bilder mit einem Link (Hover-Effekt).
twt-cms-image-hover-opacity	Block	Reduziert die Deckkraft für Bilder mit einem Link (Hover-Effekt).
twt-cms-image-hover-rotate	Block	Dreht Bilder mit einem Link (Hover-Effekt).
twt-cms-image-hover-rotate-left	Block	Dreht Bilder mit einem Link (Hover-Effekt).
twt-cms-image-hover-rotate-right	Block	Dreht Bilder mit einem Link (Hover-Effekt).
twt-cms-image-hover-shine	Block	Ein Highlight fährt über Bilder mit einem Link (Hover-Effekt).
twt-cms-image-hover-zoom	Block	Vergrößert Bilder mit einem Link (Hover-Effekt).
twt-cms-image-hover-zoom-out	Block	Verkleinert Bilder mit einem Link (Hover-Effekt).

---

Max-width-Klassen – Breite von CMS-Sektionen/-Blöcken

Klasse	Bereich	Beschreibung
twt-cms-max-width	Sektion, Block	Setzt die maximale Breite auf die "maximale Container-Breite" der Theme-Konfiguration.
twt-cms-max-width-500	Sektion, Block	Setzt die maximale Breite auf 500px.
twt-cms-max-width-576	Sektion, Block	Setzt die maximale Breite auf 576px.
twt-cms-max-width-600	Sektion, Block	Setzt die maximale Breite auf 600px.
twt-cms-max-width-700	Sektion, Block	Setzt die maximale Breite auf 700px.
twt-cms-max-width-768	Sektion, Block	Setzt die maximale Breite auf 768px.
twt-cms-max-width-800	Sektion, Block	Setzt die maximale Breite auf 800px.
twt-cms-max-width-900	Sektion, Block	Setzt die maximale Breite auf 900px.
twt-cms-max-width-992	Sektion, Block	Setzt die maximale Breite auf 992px.
twt-cms-max-width-1000	Sektion, Block	Setzt die maximale Breite auf 1000px.
twt-cms-max-width-1100	Sektion, Block	Setzt die maximale Breite auf 1100px.
twt-cms-max-width-1200	Sektion, Block	Setzt die maximale Breite auf 1200px.
twt-cms-max-width-1300	Sektion, Block	Setzt die maximale Breite auf 1300px.
twt-cms-max-width-1400	Sektion, Block	Setzt die maximale Breite auf 1400px.
twt-cms-max-width-1500	Sektion, Block	Setzt die maximale Breite auf 1500px.
twt-cms-max-width-1600	Sektion, Block	Setzt die maximale Breite auf 1600px.
twt-cms-max-width-1700	Sektion, Block	Setzt die maximale Breite auf 1700px.
twt-cms-max-width-1800	Sektion, Block	Setzt die maximale Breite auf 1800px.
twt-cms-max-width-1920	Sektion, Block	Setzt die maximale Breite auf 1920px.

---

Margin-/Padding-Klassen – Abstandsklassen für CMS-Sektionen/-Blöcke

Klasse	Bereich	Beschreibung
twt-m-1	Sektion, Block	Außenabstand, 10px (margin)
twt-mt-2	Sektion, Block	Außenabstand oben, 20px (margin-top)
twt-me-3	Sektion, Block	Außenabstand rechts, 30px (margin-right)
twt-mb-4	Sektion, Block	Außenabstand unten, 40px (margin-bottom)
twt-ms-5	Sektion, Block	Außenabstand links, 50px (margin-left)
twt-mx-6	Sektion, Block	Außenabstand links/rechts, 60px (margin-left, margin-right)
twt-my-7	Sektion, Block	Außenabstand oben/unten, 70px (margin-top, margin-bottom)
twt-my-md-8	Sektion, Block	Außenabstand oben/unten, 80px ab 768px (margin-top, margin-bottom)
twt-my-n-9	Sektion, Block	Außenabstand oben/unten, -90px (margin-top, margin-bottom)
twt-p-1	Sektion, Block	Innenabstand, 10px (margin)
twt-pt-2	Sektion, Block	Innenabstand oben, 20px (margin-top)
twt-pe-3	Sektion, Block	Innenabstand rechts, 30px (margin-right)
twt-pb-4	Sektion, Block	Innenabstand unten, 40px (margin-bottom)
twt-ps-5	Sektion, Block	Innenabstand links, 50px (margin-left)
twt-px-6	Sektion, Block	Innenabstand links/rechts, 60px (margin-left, margin-right)
twt-py-7	Sektion, Block	Innenabstand oben/unten, 70px (margin-top, margin-bottom)
twt-py-md-8	Sektion, Block	Innenabstand oben/unten, 80px ab 768px (margin-top, margin-bottom)
twt-py-n-9	Sektion, Block	Innenabstand oben/unten, -90px (margin-top, margin-bottom)

---

Overlay-Klassen

Die Overlay-Klassen funktionieren mit Standard CMS-Blöcken von Shopware. Nutzt du diese Klassen in einer CMS-Sektion wird der Hintergrund von einer Farbfläche überlagert.

CSS-Klasse	Bereich	Funktionsbeschreibung
twt-custom-cms-element-overlay-primary	Sektion	Überlagert das Hintergrundbild einer Sektion mit der Primärfarbe (Deckkraft 85%). Optimal zur Anzeige von Textinformationen auf einem Hintergrundbild.
twt-custom-cms-element-overlay-secondary	Sektion	Überlagert das Hintergrundbild einer Sektion mit der Sekundärfarbe (Deckkraft 85%). Optimal zur Anzeige von Textinformationen auf einem Hintergrundbild.
twt-custom-cms-element-overlay-success	Sektion	Überlagert das Hintergrundbild einer Sektion mit der Status-Farbe "Erfolg" (Deckkraft 85%). Optimal zur Anzeige von Textinformationen auf einem Hintergrundbild.
twt-custom-cms-element-overlay-info	Sektion	Überlagert das Hintergrundbild einer Sektion mit der Status-Farbe "Information" (Deckkraft 85%). Optimal zur Anzeige von Textinformationen auf einem Hintergrundbild.
twt-custom-cms-element-overlay-warning	Sektion	Überlagert das Hintergrundbild einer Sektion mit der Status-Farbe "Hinweis" (Deckkraft 85%). Optimal zur Anzeige von Textinformationen auf einem Hintergrundbild.
twt-custom-cms-element-overlay-danger	Sektion	Überlagert das Hintergrundbild einer Sektion mit der Status-Farbe "Fehler" (Deckkraft 85%). Optimal zur Anzeige von Textinformationen auf einem Hintergrundbild.
twt-custom-cms-element-overlay-light	Sektion	Überlagert das Hintergrundbild einer Sektion mit der Farbe Weiß (Deckkraft 85%). Optimal zur Anzeige von Textinformationen auf einem Hintergrundbild.
twt-custom-cms-element-overlay-dark	Sektion	Überlagert das Hintergrundbild einer Sektion mit der Farbe Schwarz (Deckkraft 85%). Optimal zur Anzeige von Textinformationen auf einem Hintergrundbild.

---

Sonstige

CSS-Klasse	Bereich	Funktionsbeschreibung
container	Block, Sektion	In Erlebniswelt-Sektionen mit dem Layout "Volle Breite" ist es in manchen Fällen sinnvoll einen Inhalts-Block im "Boxed"-Layout zu platzieren. Dies kannst du mit der Klasse "container" realisieren. Ein Beispiel dafür ist der Kategorie-Banner in der Kategorie "Höhenluft & Abenteuer" unserer Demoshops.