#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

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:
  • m => Margin (Außenabstand)
  • p => Padding (Innenabstand)
t Seiten:
  • t => Top (oben)
  • r => Right (rechts)
  • b => Bottom (unten)
  • l => Left (links)
  • x => Left/Right (links und rechts)
  • y => Top/Bottom (oben und unten)
  • Keine Angabe => für alle vier Seiten
- Trennzeichen
md Breakpoint: (optional) [ab ThemeWare 0.2.8]
  • sm => ab 576px
  • md => ab 768px
  • lg => ab 992px
  • xl => ab 1200px
  • Keine Angabe => ab 0px
- Trennzeichen
n Negativer Wert (nur Margin): (optional)
  • n => Wert wird negativ verwendet (-x Pixel)
  • Keine Angabe => wird positiv verwendet
2 Größe:
  • 0 => 0 Pixel
  • 1 => 10 Pixel
  • 2 => 20 Pixel
  • 3 => 30 Pixel
  • 4 => 40 Pixel
  • 5 => 50 Pixel
  • 6 => 60 Pixel
  • 7 => 70 Pixel
  • 8 => 80 Pixel
  • 9 => 90 Pixel
  • auto

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:


Bitte teile uns deine Meinung mit!

Danke, das hat mir geholfen
Hat mir nicht geholfen

1d0a7d9e6c915f703f8f33d0bbc30a0a
Kurz die Cookies, dann geht's weiter...
Auch diese Seite nutzt die üblichen Arten von Cookies: Technische und funktionale Cookies sind unbedingt nötig,damit diese Website überhaupt funktionieren kann.Zusätzlich nutzen wir Marketing-Cookies,damit wir dich auf unseren Seiten wiedererkennen und unsere Website und Kampagnen stets verbessern können, sowie Personalisierungs-Cookies mit denen wir dich, auch außerhalb dieser Website, besser ansprechen können.

Mit der Auswahl "Akzeptieren und Schließen" erlaubst Du uns die Verwendung dieser Cookies und Technologien. Bitte besuche unsere Datenschutzerklärung für weitere Informationen. Dort erfährst Du auch wie wir die Daten für erforderliche Zwecke (z. B. Sicherheit) verwenden.

Hier kannst du einstellen, welche Cookies du zulassen möchtest.

Technisch erforderlich

Wir nutzen Cookies, um die Bedienung und die Bereitstellung der Website zu ermöglichen und um sicherzustellen, dass bestimmte Funktionen ordnungsgemäß funktionieren. Diese Cookies sind immer aktiviert, da Du die Website sonst nicht ordnungsgemäß bedienen könntest.

Marketing

Die TC-Innovations GmbH und unsere Werbepartner (einschließlich Social Media-Plattformen wie Google, Facebook und Instagram) nutzen Tracking, um Dir personalisierte Angebote anzubieten, die Dir das volle Nutzererlebnis bieten. Dies beinhaltet das Anzeigen von "Direktwerbung auf Werbeplattformen Dritter", wie in der Datenschutzerklärung beschrieben. Wenn Du dieses Tracking nicht akzeptierst, wirst Du dennoch zufällige Werbeanzeigen von uns auf anderen Plattformen angezeigt bekommen.

Analyse

Um unsere Websites und Services stetig zu verbessern, analysieren wir das Nutzerverhalten auf unseren Websites.

Mehr Informationen findest du in unserer Datenschutzerklärung.

SpeichernCookie-EinstellungenAkzeptieren und Schließen