#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.
| 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) |
| twt-custom-cms-col-padding-10 | Block | Setzt den Standard-Innenabstand von 20 Pixel für Spalten auf 10 Pixel. |
| twt-custom-cms-col-padding-15 | Block | Setzt den Standard-Innenabstand von 20 Pixel für Spalten auf 15 Pixel. |
ThemeWare® Erlebniswelten (z.B. Startseite)
| 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 Sektion-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® Overlay-Banner (z.B. Kategorieseite)
| 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. |
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)
Weiterführende Links:
- ThemeWare® Video-Tutorial: "Erlebniswelten verstehen"
- ThemeWare® Video-Tutorial: "Startseite (ThemeWare® Erlebniswelt) einrichten"
- Anleitung: "Erlebniswelten mit Bootstrap CSS-Klassen optimieren"
- Anleitung: "Erlebniswelten mit Bootstrap HTML-Elementen optimieren"
- 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.