#2129 ThemeWare® CSS-Klassen für Erlebniswelten
In diesem Artikel findest du eine Übersicht über die 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.
Da wir einige Themen etwas ausführlicher beschreiben und mit Anwendungsbeispielen in unseren Demoshops demonstrieren, gibt es zu einigen Punkten separate Artikel. Die Links findest du im entsprechenden Absatz.
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
- CSS-Scroll-Animationen
- 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 dazu findest du im Artikel: "ThemeWare® CMS-Styling für Erlebniswelten"
Beispiel:
Links: mit ThemeWare® CMS-Styling | rechts: ohne ThemeWare® CMS-Styling
Spaltenabstände in CMS-Blöcken
Mehr Informationen hierzu findest du in einem separaten Artikel: "Spaltenabstände in CMS-Blöcken anpassen"
Beispiel:
Überschriften in CMS-Blöcken
Mehr Informationen zur diesem Thema findest du in folgendem Artikel: "Überschriften in CMS-Blöcken gestalten"
Beispiel:
Dekorationsklassen für Bilder
Mehr Informationen findest du in unserem separaten Artikel: "Bilder in CMS-Blöcken mit Dekorationsklassen verschönern"
Beispiel:
Hover-Effekte für Bilder
Mehr Informationen hierzu findest du im Artikel: "Bilder in CMS-Blöcken mit Hover-Effekten verschönern"
Beispiel:
CSS-Scroll-Animationen (ab ThemeWare® 0.3.0)
ThemeWare® bietet dir eine umfangreiche Auswahl an CSS-Animationen für deine Erlebniswelten. Nutze dafür die entsprechende CSS-Klasse an CMS-Blöcken oder gewünschten HTML-Elementen.
| Klasse | Bereich | Funktionsbeschreibung |
|---|---|---|
| twt-cms-animation | Block | Animiert einen CMS-Block und HTML-Elemente mit einer in der Theme-Konfiguration ausgewählten Animation sobald das Element in den sichtbaren Bereich gescrollt wird. |
Mehr Informationen hierzu findest du in unserem Artikel: "Erlebniswelten mit CSS-Animationen verschönern"
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":
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"
- 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.