#2129 CSS-Klassen Bibliothek für CMS 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.


KlasseBereichFunktionsbeschreibung
twt-custom-cms-image-hover-1BlockReduziert 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-10BlockSetzt den Standard-Innenabstand von 20 Pixel für Spalten auf 10 Pixel.
twt-custom-cms-col-padding-15BlockSetzt den Standard-Innenabstand von 20 Pixel für Spalten auf 15 Pixel.


ThemeWare® Erlebniswelten (z.B. Startseite)

KlasseBereichFunktionsbeschreibung
twt-custom-cms-text-two-column-usp-listBlockHebt eine Liste mit Vorteilen im rechten Block eines "Zwei Spalten Elements" mit grünen Harken hervor.
twt-custom-cms-imagetext-teaser-1SektionVerbesserte 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-photoBlockVerbesserte 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)

KlasseBereichFunktionsbeschreibung
twt-custom-cms-element-overlay-primarySektionÜberlagert das Hintergrundbild einer Sektion mit der Primärfarbe (Deckkraft 85%). Optimal zur Anzeige von Textinformationen auf einem Hintergrundbild.
twt-custom-cms-element-overlay-secondarySektionÜberlagert das Hintergrundbild einer Sektion mit der Sekundärfarbe (Deckkraft 85%). Optimal zur Anzeige von Textinformationen auf einem Hintergrundbild.
twt-custom-cms-element-overlay-successSektionÜ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-infoSektionÜ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-warningSektionÜ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-dangerSektionÜ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-lightSektionÜberlagert das Hintergrundbild einer Sektion mit der Farbe Weiß (Deckkraft 85%). Optimal zur Anzeige von Textinformationen auf einem Hintergrundbild.
twt-custom-cms-element-overlay-darkSektionÜberlagert das Hintergrundbild einer Sektion mit der Farbe Schwarz (Deckkraft 85%). Optimal zur Anzeige von Textinformationen auf einem Hintergrundbild.

Abstandsklassen

Aufbau und Funktion der Abstandsklassen mit ThemeWare®

Beispiel-Klassen

  • twt-mt-n2 => margin-top: -20px
  • 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



Weiterführende Links:


Weitere Artikel in der Kategorie ""

1247cd18f0a1e5659bcabe6fd55bf5e5
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 undunsere 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