#2129 ThemeWare® CSS-Klassen für Erlebniswelten
In der nachfolgenden Tabelle findest du eine Übersicht aller zusätzlichen CSS-Klassen, die wir mit ThemeWare® bereitstellen. Diese CSS-Klassen können in den Erlebniswelten über die Sektion- und Block-Einstellungen verwendet werden.
Inhaltsverzeichnis
- Startseiten der Demoshops
- ThemeWare® CMS-Styling
- Spaltenabstände in CMS-Blöcken
- Überschriften in CMS-Blöcken
- Dekorationsklassen für Bilder in CMS-Blöcken
- Hover-Effekte für Bilder in CMS-Blöcken
- Abstandsklassen
- Overlay-Banner
- Tipps
Startseiten der Demoshops
| Klasse | Bereich | Funktionsbeschreibung |
|---|---|---|
| twt-custom-cms-text-two-column-usp-list | Block | Hebt eine Liste mit Vorteilen im rechten Block eines "Zwei Spalten Elements" mit grünen Harken hervor. |
| twt-custom-cms-imagetext-teaser-1 | Sektion | Verbesserte Darstellung und Textausrichtung für ein "Zwei Spalten Element" (Bild links und Text rechts) im Sektions-Größenmodus "Volle Bereite". Optimal zur Anzeige eines Teasers/Banners. |
| twt-custom-cms-about-photo | Block | Verbesserte Darstellung und Textausrichtung für ein "Zwei Spalten Element" mit einem Bild links und weiteren Textinformationen rechts. Optimal zur Anzeige eines Ansprechpartners. Zusätzlich kann die Klasse "dark" verwendet werden damit der Hintergrund in einer sehr dunklen Erlebniswelt in hell angezeigt wird. |
ThemeWare® CMS-Styling (ab ThemeWare® 0.3.1)
ThemeWare® nutzt ein vordefiniertes Styling für CMS-Blöcke. Durch diese sogenannte "ThemeWare® CMS-Styling" erhalten alle CMS-Blöcke in Erlebniswelten mit dem Größenmodus "Zentrierter Inhalt" (= boxed) ein Rahmenfarbe, eine Hintergrundfarbe und einen Außenabstand nach unten.
Dieses Styling lässt sich zum einen konfigurieren, zum anderen kannst du das "ThemeWare® CMS-Styling" für verschiedene Seitentypen in der Konfiguration aktivieren bzw. deaktivieren.
Doch damit noch nicht genug: Es ist zudem möglich über CSS-Klassen das "ThemeWare® CMS-Styling" für bestimmte Blöcke zu nutzen oder gezielt nicht zu benutzen. Dafür stehen dir die folgenden Klassen zur Verfügung:
| 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: Mehr Informationen zum "ThemeWare® CMS-Styling" findest du im Artikel "ThemeWare® CMS-Styling für Erlebniswelten" (Link siehe unten).
Beispiel:
Links mit ThemeWare® CMS-Styling | rechts ohne ThemeWare® CMS-Styling
Spaltenabstände in CMS-Blöcken
| Klasse | Bereich | Funktionsbeschreibung |
|---|---|---|
| twt-cms-col-padding-10 | Block | Setzt den Innenabstand für Spalten in CMS-Blöcken von 20 Pixel auf 10 Pixel. [ab ThemeWare® 0.3.0, vorher "twt-custom-cms-col-padding-10"] |
| twt-cms-col-padding-15 | Block | Setzt den Innenabstand für Spalten in CMS-Blöcken von 20 Pixel auf 15 Pixel. [ab ThemeWare® 0.3.0, vorher "twt-custom-cms-col-padding-15"] |
| twt-cms-col-padding-25 | Block | Setzt den Innenabstand für Spalten in CMS-Blöcken von 20 Pixel auf 25 Pixel. [ab ThemeWare® 0.3.0] |
| twt-cms-col-padding-30 | Block | Setzt den Innenabstand für Spalten in CMS-Blöcken von 20 Pixel auf 30 Pixel. [ab ThemeWare® 0.3.0] |
Überschriften in CMS-Blöcken
ThemeWare® stellt dir mit individuellen CSS-Klassen die aus unseren Shopware 5 Themes bekannten Überschriften auch für deine Shopware 6 Erlebniswelten zur Verfügung. Dafür eignen sich besonders die CMS-Blöcke "Text-Banner" oder "Teaser-Text".
| Klasse | Bereich | Funktionsbeschreibung |
|---|---|---|
| twt-cms-headline-bath | Block | Stylt die Headline und den nachfolgenden Absatz in CMS-Blöcken wie im Bath-Theme. |
| twt-cms-headline-clean | Block | Stylt die Headline und den nachfolgenden Absatz in CMS-Blöcken wie im Bath-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. |
| twt-cms-headline-classic | Block | Stylt die Headline in CMS-Blöcken wie in Shopware 5 Einkaufswelten. |
Beispiel "twt-cms-headline-kids":
Dekorationsklassen für Bilder
Mehr Informationen folgen in Kürze...
Hover-Effekte für Bilder
| Klasse | Bereich | Funktionsbeschreibung |
|---|---|---|
| twt-custom-cms-image-hover-1 | Block | Reduziert die Deckkraft für Bilder mit einem Link (Hover-Effekt) |
| twt-custom-cms-image-hover-2 | Block | Skaliert Bilder mit einem Link (Hover-Effekt) |
Abstandsklassen
Neben den Bootstrap-Abstandsklassen bietet ThemeWare® dir eine erweiterte Sammlung an Abstandsklassen die auf Pixel-Werten basieren.
Unsere Klassen werden nach dem Format twt-{Eigenschaft}{Seiten}-{Größe} für xs und twt-{Eigenschaft}{Seiten}-{Breakpoint}-{Größe} für sm, md, lg und xl benannt.
Beispiel: twt-mt-md-n2 => margin-top: -20px (min-width: 768px)
ThemeWare®-Abstandsklassen aktivieren/deaktivieren
Du kannst die ThemeWare®-Abstandsklassen je nach Bedarf über Konfigurationsfelder aktivieren bzw. deaktivieren. Die Konfiguration findest du im Tab "Weiteres" => Bereich "Erweiterte Einstellungen" => Bereich "Zusätzliche CSS-Klassen".
| Aufbau | Beschreibung |
|---|---|
| twt | ThemeWare® Prefix |
| - | Trennzeichen |
| m |
Eigenschaft:
|
| t |
Seiten:
|
| - | Trennzeichen |
| md |
Breakpoint: (optional) [ab ThemeWare 0.2.8]
|
| - | Trennzeichen |
| n | Negativer Wert (nur Margin): (optional)
|
| 2 |
Größe:
|
Weitere Beispiele:
- twt-p-3 => padding: 30px
- twt-px-4 => padding: 0 40px
- twt-mt-2 => margin-top: 20px
- twt-mt-n3 => margin-top: -30px
- twt-m-md-4 => margin: 40px (ab 768px)
Overlay-Banner (siehe "Höhenluft & Abenteuer" in den Demoshops)
| 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. |
Beispiel "twt-custom-cms-element-overlay-primary":
Tipps
| Klasse | Bereich | Funktionsbeschreibung |
|---|---|---|
| container | Block | 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. |
Beispiel mit "container":
Beispiel ohne "container":
CSS-Scroll-Animationen
| Klasse | Bereich | Funktionsbeschreibung |
|---|---|---|
| twt-cms-animation | Block | Animiert einen CMS-Block mit einer in der Theme-Konfiguration ausgewählten Animation sobald dieser in den sichtbaren Bereich gescrollt ist. |
Mehr Informationen folgen in Kürze...
Weiterführende Links:
- ThemeWare® Video-Tutorial: "Erlebniswelten verstehen"
- ThemeWare® Video-Tutorial: "Startseite (ThemeWare® Erlebniswelt) einrichten"
- Anleitung: "Erlebniswelten mit Bootstrap CSS-Klassen gestalten"
- Anleitung: "Erlebniswelten mit Bootstrap CSS-Klassen optimieren" (für erfahrene Anwender)
- Anleitung: "Erlebniswelten mit Bootstrap HTML-Elementen optimieren" (für erfahrene Anwender)
- Anleitung: "Responsive Erlebniswelten mit Bootstrap"
- Anleitung: "ThemeWare® CMS-Styling für Erlebniswelten"
- Shopware 6 Dokumentation: "Erlebniswelten"
Bitte teile uns deine Meinung mit!
Lösung nicht gefunden?
Bitte sieh auch in den anderen Kategorien nach.
Fehler nicht gelöst?
Wenn du das Problem nicht mit den häufigsten Fehlern lösen konntest, starte die individuelle Fehlerbehebung. Hierüber kannst du auch ein Support-Ticket eröffnen, falls du den Fehler nicht selber beheben kannst.
Lösung nicht gefunden?
Bitte sieh auch in den anderen Kategorien nach.
Einführung Anleitungen Profiwissen Häufige Fragen Häufige Fehler Shopware allgemein
Fehler nicht gelöst?
Wenn du das Problem nicht mit den häufigsten Fehlern lösen konntest, starte die individuelle Fehlerbehebung. Hierüber kannst du auch ein Support-Ticket eröffnen, falls du den Fehler nicht selber beheben kannst.
Lösung nicht gefunden?
Bitte sieh auch in den anderen Kategorien nach.
Fehler nicht gelöst?
Wenn du das Problem nicht mit den häufigsten Fehlern lösen konntest, kannst du hier ein Support-Ticket eröffnen.