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. |