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.


KlasseBereichFunktionsbeschreibung
twt-custom-cms-image-hover-1Block
Reduziert die Deckkraft für Bilder mit einem Link (Hover-Effekt)
twt-custom-cms-image-hover-2BlockSkaliert 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.
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.
twt-custom-cms-element-overlay-primary
Sektion
Überlagert das Hintergrundbild einer Sektion mit der Primärfarbe (Deckkraft 85%). Optimal zur Anzeige von Textiformationen 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 Textiformationen 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 Textiformationen 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 Textiformationen 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 Textiformationen 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 Textiformationen 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 Textiformationen 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 Textiformationen auf einem Hintergrundbild.

Abstandsklassen

Aufbau und Funktion der Abstandsklassen mit ThemeWare®

Beispiel-Klassen: "twt-mt-n2" => "margin-top: -20px;" oder "twt-p-4" => "padding: 40px;"


AufbauBeschreibung
twtThemeWare® Prefix
-Trennzeichen
mInnen- oder Außenabend:
  • m => Außenabstand
  • p => Innenabstand
tPosition:
  • t => Top (oben)
  • r => Right (rechts)
  • b => Bottom (unten)
  • l => Left (links)
  • Keine Angabe => Für alle Seiten
-Trennzeichen
nNegativer Wert:
  • n => Pixel wird negativ verwendet (-x Pixel)
  • Keine Angabe => wird nicht verwendet
2Abstand:
  • 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