#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

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:
  • 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":


Weiterführende Links:


Bitte teile uns deine Meinung mit!

Danke, das hat mir geholfen
Hat mir nicht geholfen

4356ce11bf551ea96362fe0efd575b51
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