#2186 Erlebniswelten mit Bootstrap CSS-Klassen gestalten
Die Shopware 6 Storefront basiert auf dem Bootstrap-Framework. Aufgrund unserer HC-Architecture® ist ThemeWare® selbstverständlich ebenfalls vollständig kompatibel mit Bootstrap. Auf dieser Seite findest du die gängigsten Bootstrap-Klassen welche du auf CMS-Blöcke in deinen Erlebniswelten anwenden kannst. Ganz ohne Programmierkenntnisse!
Anwendungsbeispiele findest du bald in unseren Demoshops.
Inhaltsverzeichnis
Textausrichtung
Zum Ausrichten von Texten liefert dir Bootstrap bereits einige CSS-Klassen welche du nutzen kannst. Mehr dazu findest du hier.
| Klasse | Bereich | Funktionsbeschreibung |
|---|---|---|
| text-left | Block | Text linksbündig ausrichten. |
| text-center | Block | Text zentriert ausrichten. |
| text-right | Block | Text rechts ausrichten. |
Beispiele:
Textfarbe
Zum Einfärben von Texten liefert Bootstrap bereits einige Klassen für verschiedene Farben mit. Nachfolgend findest du Beispiele für die verfügbaren Farb-Varianten. Mehr dazu findest du hier.
| Klasse | Bereich | Funktionsbeschreibung |
|---|---|---|
| text-primary | Block | Text in der Primärfarbe ausgeben. |
| text-secondary | Block | Text in der Sekundärfarbe ausgeben. |
| text-success | Block | Text in der Farbe "Erfolg" ausgeben. |
| text-danger | Block | Text in der Farbe "Fehler" ausgeben. |
| text-warning | Block | Text in der Farbe "Hinweis" ausgeben. |
| text-info | Block | Text in der Farbe "Information" ausgeben. |
| text-white | Block | Text in der Farbe "Weiß" ausgeben. |
Beispiele:
Hintergrundfarbe
Das Bootstrap-Framework liefert dir auch Klassen zum einfärben von Hintergründen von Erlebniswelt-Elementen in verschiedenen Farben mit. Für dunkle Hintergründe empfiehlt es sich eine helle Textfarbe zu wählen (siehe oben). Mehr dazu findest du hier.
| Klasse | Bereich | Funktionsbeschreibung |
|---|---|---|
| bg-primary | Block | Hintergrund mit der Primärfarbe darstellen. |
| bg-secondary | Block | Hintergrund mit der Sekundärfarbe darstellen. |
| bg-success | Block | Hintergrund mit der Farbe "Erfolg" darstellen. |
| bg-danger | Block | Hintergrund mit der Farbe "Fehler" darstellen. |
| bg-warning | Block | Hintergrund mit der Farbe "Hinweis" darstellen. |
| bg-info | Block | Hintergrund mit der Farbe "Information" darstellen. |
Beispiele:
Rahmen (additiv)
Über Bootstrap-Klassen können auch die Rahmen von CMS-Blöcken definiert werden. Die Klasse "border-0" entfernt beispielsweise Rahmen von Elementen. Mehr dazu findest du hier.
Hinweis: Bitte beachte, dass das "ThemeWare® CMS-Styling" bereits einen Rahmen darstellt und additive CSS-Klassen dann keine Auswirkung haben. Additive CSS-Klassen sind für Erlebniswelten ohne "ThemeWare® CMS-Styling" relevant.
| Klasse | Bereich | Funktionsbeschreibung |
|---|---|---|
| border | Block | Rahmen hinzufügen. |
| border-top | Block | Rahmen oben hinzufügen. |
| border-right | Block | Rahmen rechts hinzufügen. |
| border-bottom | Block | Rahmen unten hinzufügen. |
| border-left | Block | Rahmen links hinzufügen. |
Rahmen (subtraktiv)
| Klasse | Bereich | Funktionsbeschreibung |
|---|---|---|
| border-0 | Block | Rahmen entfernen. |
| border-top-0 | Block | Rahmen oben entfernen. |
| border-right-0 | Block | Rahmen rechts entfernen. |
| border-bottom-0 | Block | Rahmen unten entfernen. |
| border-left-0 | Block | Rahmen links entfernen. |
Beispiel:
Rahmenfarbe
Ändere die Rahmenfarbe von CMS-Blöcken mithilfe von folgenden CSS-Klassen. Mehr dazu findest du hier.
| Klasse | Bereich | Funktionsbeschreibung |
|---|---|---|
| border-primary | Block | Rahmen mit der Primärfarbe darstellen. |
| border-secondary | Block | Rahmen mit der Sekundärfarbe darstellen. |
| border-success | Block | Rahmen mit der Farbe "Erfolg" darstellen. |
| border-danger | Block | Rahmen mit der Farbe "Fehler" darstellen. |
| border-warning | Block | Rahmen mit der Farbe "Hinweis" darstellen. |
| border-info | Block | Rahmen mit der Farbe "Information" darstellen. |
| border-light | Block | Rahmen mit der Farbe "Hell" darstellen. |
| border-dark | Block | Rahmen mit der Farbe "Dunkel" darstellen. |
| border-white | Block | Rahmen mit der Farbe "Weiß" darstellen. |
Beispiel:
Border-radius
Füge einem CMS-Block die nachfolgenden CSS-Klassen hinzu, um dessen Ecken einfach abzurunden. Mehr dazu findest du hier.
| Klasse | Bereich | Funktionsbeschreibung |
|---|---|---|
| rounded | Block | Element abrunden. |
| rounded-top | Block | Element oben abrunden. |
| rounded-right | Block | Element recht abrunden. |
| rounded-bottom | Block | Element unten abrunden. |
| rounded-left | Block | Element links abrunden. |
| rounded-0 | Block | Element nicht abrunden. |
Beispiel:
Schatten
Hinzufügen oder entfernen von Schatten zu CMS-Blöcken. Mehr dazu findest du hier.
| Klasse | Bereich | Funktionsbeschreibung |
|---|---|---|
| shadow-sm | Block | Kleiner Schlagschatten. |
| shadow | Block | Normaler Schlagschatten. |
| shadow-lg | Block | Großer Schlagschatten. |
Beispiele:
Weiterführende Links:
- ThemeWare® Video-Tutorial: "Erlebniswelten verstehen"
- ThemeWare® Video-Tutorial: "Startseite (ThemeWare® Erlebniswelt) einrichten"
- Anleitung: "ThemeWare® CSS-Klassen für Erlebniswelten"
- Anleitung: "Erlebniswelten mit Bootstrap CSS-Klassen optimieren" (für erfahrene Anwender)
- Anleitung: "Erlebniswelten mit Bootstrap HTML-Elementen optimieren" (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.