Komponenten¶

Die derzeitigen Einstellungen der Komponenten im ThemeManager definieren momentan das Erscheinungsbild von Inhaltselementen, Modulen, Tabellen und der visuellen Trennung zwischen zwei Artikeln.

Box¶

Im eigentlichen Sinne auch als Card oder Kachel bekannt, existiert die box Eigenschaft für die verfügbaren Gruppen 'Components' und 'Elements' im StyleManager.

Erklärungen zu StyleManager Gruppen

Mehr zu den StyleManager-Gruppen Global, Components und Elements kann hier nachgelasen werden.

Wird im StyleManager-Reiter Layout eine der Optionen unter Box aktiviert, werden der Hintergrund und der Rahmen der Komponente bzw. der sich darin befindlichen Elemente gemäß den hier konfigurierten CSS-Einstellungen geändert.

Exkurs: Padding von Components und Elements¶

Wenn die Option box aktiviert ist, greifen automatisch $top-bottom-padding-small und $left-right-padding-small, die in Abstände (Innen) eingestellt werden können.

Innerhalb von Components und Elements kann das Padding für jeden Breakpoint einzeln konfiguriert werden.

Die Option Reset hebt den Innenabstand auf. Diese Option empfiehlt sich jedoch nur für Bilder. Bild-Text-Elemente haben eine zusätzliche Einstellung, um das Bild an den Rahmen zu binden, sodass der Text mit dem Padding versehen wird.

Info

Abweichend der Einstellungen Top, Bottom, Left und Right des äußeren Abstands (Margin), existiert für das Padding nur eine Option.

Hintergrundfarbe¶

$boxed-background-color

Diese Einstellung beeinflusst die Hintergrundfarbe (background-color) der Kachel für folgende StyleManager-Gruppen:

Components

.box > .inside

Elements

.box-list .item > .inside

Der Standardwert ist hier die Hintergrundfarbe des <body> sofern nicht anders konfiguriert.

Weitere Hintergrundfarben in Components und Elements

Die hier gesetzte Hintergrundfarbe kann jederzeit durch eine Hintergrundfarbe innerhalb der Components und Elements-Gruppen überschrieben werden. Details dazu können im Kapitel Hintergründe nachgelesen werden.

Wenn eine dunkle Hintergrundfarbe ausgewählt wird, können die Textfarben der Listen-Items über Components > Text > Text-Color und die der Überschrift über Global > Headlines > Text-Color (oder im Artikel) angepasst werden.

Verfügbare (S)CSS-Variablen

SCSS

$boxed-background-color

CSS

/* Components (.box) */
var(--b-bg)

/* Elements (.box-list) */
var(--i-bg)

Rahmen¶

$boxed-border-color $boxed-border-radius $boxed-border-width $boxed-border-style

Bekannt als border, stehen uns hierbei die folgenden Einstellungen zur Verfügung, sodass der Rahmen der Kachel beeinflusst werden kann.

Rahmenfarbe Rahmenradius Rahmenbreite Rahmenstil

Verfügbare (S)CSS-Variablen

SCSS

$boxed-border-width
$boxed-border-style
$boxed-border-color
$boxed-border-radius

CSS

var(--b-bdr-wdth)
var(--b-bdr-style)
var(--b-bdr-clr)
var(--b-bdr-r)

Die Option box-shadow¶

Bei Einstellung der Option box-shadow wird ein zusätzlicher Schatten/Schlagschatten ergänzt, der in den sonstigen Einstellungen konfiguriert werden kann.

Wenn für alle Box-Komponenten nur der Schlagschatten ohne Rahmen erwünscht ist, kann der $boxed-border-width auf 0 gestellt werden. Soll der Rahmen bei box weiterhin bestehen bleiben, kann eine Option über einen eigenen Skin individuell erweitert werden.

Linien (Divider)¶

$divider-size $divider-style $divider-color

Linien sind Rahmen, die in Artikeln verwendet werden, um diese optisch vom vorherigen oder nachfolgenden Artikel zu trennen.

In den StyleManager-Optionen von Artikeln stehen sowohl für den oberen (Top) als auch für den unteren (Bottom) Rahmen folgende Optionen unter Component > Divider zur Verfügung:

Option	Beschreibung
Full	Durch Setzen der Option `Full` wird zwischen den Artikeln eine Linie mit voller Breite gesetzt, sodass die gesamte Bildschirmbreite verwendet wird.
Inner	Die Option `Inner` folgt dem inneren Abstand von Artikeln, sodass sie sich anhand der Breite der Inhaltselemente orientiert.

Folgende Einstellungen können hierbei vorgenommen werden:

$divider-size: Höhe der Linie
$divider-style: Stil der Linie
$divider-color: Farbe der Linie

Verfügbare SCSS-Variablen und Klassen

SCSS

$divider-size
$divider-style
$divider-color

Klassen

.line-top /* Top -> Full */
.line-btm /* Bottom -> Full */
.line-inner-top /* Top -> Inner*/
.line-inner-btm /* Bottom -> Inner*/

Tabelle¶

Über die nachfolgenden Einstellungen kann das Aussehen von Tabellen <table> auf der Website angepasst werden.

Warning

Alle hier eingestellten Tabellenstyles beeinflussen das Element <table>, sodass auch jene Tabellen gestyled werden, welche im TinyMCE-Editor erstellt wurden.

Es ist derzeit nicht möglich, dass Tabellenstyles über den StyleManager aktiviert oder *deaktiviert werden können. Ist dies nicht erwünscht, können Tabellen im eigenen Skin angepasst werden.

Tabellenzelle¶

$table-cell-spacing $table-cell-padding $table-cell-border-radius

Der Abstand zwischen Zellen kann über die Variable $table-cell-spacing eingestellt werden, der innere Abstand über $table-cell-padding.

Wird zusätzlich eine Zellen-Hintergrundfarbe gesetzt, wird der Rahmenradius ($table-cell-border-radius) sichtbar.

Rahmen¶

Tabelle (Außen)

$table-border-color $table-border-style $table-border-width

Beeinflusst die Rahmenfarbe, den Rahmenstil sowie die Rahmenbreite einer Tabelle (<table>).

Tabellenkopf

$table-head-border-color $table-head-border-style $table-head-border-width

Beeinflusst die Rahmenfarbe, den Rahmenstil sowie die Rahmenbreite eines Tabellenkopfs (<th>).

Tabellenzelle

$table-cell-border-color $table-cell-border-style $table-cell-border-width

Beeinflusst die Rahmenfarbe, den Rahmenstil sowie die Rahmenbreite einer Tabellenzelle (<td>).

Tabellenbeschreibung¶

$table-caption-*

Oft unter der Tabelle positioniert, kann die Tabellenbeschreibung genutzt werden, um den Inhalt einer Tabelle zusammenzufassen. Diese kann über $table-caption-side unter oder über der Tabelle angezeigt werden, über das $table-caption-alignment kann der Text ausgerichtet werden.

Weitere Einstellungen wie Innenabstand, Farbe, Hintergrund und Schriftgröße sind möglich.

Textausrichtung¶

$table-text-align

Standardmäßig steht die Text-Ausrichtung einer Tabelle auf inherit, sodass diese durch die Einstellungen eines Artikels oder Inhaltselements kontrolliert werden können. Über $table-text-align kann die Text-Ausrichtung für alle Tabellen global kontrolliert werden.

Schriftstärken¶

$table-head-font-weight $table-body-font-weight $table-foot-font-weight

Über diese Einstellungen kann die Schriftstärke von Tabellenkopf, normalen Zellen und dem Tabellenfuß eingestellt werden. Mehr Informationen zu Schriftstärken kann dem Kapitel Schriften entnommen werden.

Farben¶

$table-head-* $table-foot-* $table-body-*

Über diese Variablen lassen sich die Textfarbe (-color), sowie die Hintergrundfarbe (-background) der nachfolgenden Bestandteile einer Tabelle einstellen:

Tabellenkopf ($table-head-*)
Tabellenfuß ($table-foot-*)
Gerade Zellen ($table-body-even-*)
Ungerade Zellen ($table-body-odd-*)

Icon¶

Bis auf die Icon-Schriftart bezieht sich die nachfolgende Konfiguration auf das Aussehen der durch den ThemeManager bereitgestellten Inhaltselemente Icon, Icon-Text und Icon-Text-Liste.

Icon-Schriftart¶

$icon-font-family

Diese Einstellung überschreibt die Schriftart der Icons, die vom ThemeManager verwendet werden.

Ändern der $icon-font-family

Wird die Einstellung "ctm-icon" abgeändert, funktioniert die unter Icons beschriebene Generierung und Bereitstellung von Icons nicht mehr.

Das Ändern der hier eingestellten Schriftart wird nur empfohlen, wenn das Feature nicht benötigt wird und die verwendeten Icons über einen eigenen Skin festgelegt werden.

Größe der Icons¶

$icon-size-tiny $icon-size-small $icon-size-medium $icon-size-large $icon-size-large

Die Icon-Größe bestimmt die Schriftgröße des ausgewählten Icons und kann im StyleManager für Icon-Elemente eingestellt werden. Unter der Einstellung Size finden sich die Optionen tiny, small, medium und large. Der Standard-Wert bei keiner Einstellung ist medium.

Innerer Abstand¶

$icon-shape-spacing

Die Gestaltung des Inneren eines Icons wird durch $icon-shape-spacing innerhalb der Icon-Einstellungen beeinflusst. Sowohl bei Filled als auch bei Outline wird ein innerer Abstand gesetzt, der durch $icon-shape-spacing definiert wird.

Icon Designs¶

$icon-outlined-width

Über die Optionen Design sowie Shape kann das Aussehen von Icons modifiziert werden. Die Auswahl des Designs Outline in den zuvor beschriebenen Einstellungen bewirkt das Hinzufügen eines Rahmens um das Icon. Die Breite des Rahmens kann über $icon-outlined-width eingestellt werden.

Exkurs: Layout Mode für Icon- und Bild-Text¶

Sowohl in Icon- als auch Bild-Text-fähigen Elementen und Modulen kann unter Components > Layout der Mode eingestellt werden, durch welches sich das Layout ändert.

Icon-Text

Mode	Beschreibung
-	Das Icon wird über dem Text angezeigt.
Top	Das Icon wird über dem Text angezeigt und bekommt einen Abstand.
Left (Flex)	Das Icon wird über `CSS-Flexbox` links vom Text angezeigt.
Right (Flex)	Das Icon wird über `CSS-Flexbox` rechts vom Text angezeigt.
Left (Float)	Das Icon floatet links vom Text. Ist der Text länger als die Größe des Bildes, umschließt dieser das Icon.
Right (Float)	Das Icon floatet rechts vom Text. Ist der Text länger als die Größe des Bildes, umschließt dieser das Icon.

Tip

Ist ein Modus eingestellt, kann das Element -> Spacing genutzt werden, um den Abstand von Icon zu Text einzustellen.

Bild-Text

Mode	Beschreibung
-	Das Bild wird über dem Text angezeigt.
Flex	Aktiviert `CSS-Flexbox` und ermöglicht die Positionierung des Bildes auf vertikaler (`Vertical Alignment`) und horizontaler Achse (`Horizontal Alignment`).
Float	Floatet das Bild und ermöglicht die Positionierung des Bildes auf vertikaler (`Vertical Alignment`) Achse.
Text-within	Positioniert den Text absolut über dem Bild und sollte nur mit passenden Bildgrößen und wenig Text verwendet werden.
Text-within (Hover)	Hat den selben Effekt wie `Text-within`, der Text wird jedoch ausgeblendet und ist nur bei Hover oder Klick sichtbar.

Für Bild-Text werden weitere Einstellungen bereitgestellt, sodass Cards konfiguriert werden können:

Horizontal Alignment

Positioniert das Bild Links oder Rechts und kann je nach Modus mit Vertical Alignment verwendet werden.

Vertical Alignment

Positioniert das Bild Oben oder Unten und funktioniert nicht im Float-Modus.

Width

Über diese Option kann die Breite des Bildes eingestellt werden. Weitere Optionen können über die $image-text-ratio-options ergänzt werden.

Dynamische Variable

Hierbei handelt es sich um eine dynamische Variable, welche weitere Optionen ergänzen kann.

Dynamische Einstellungen stehen erst nach Speichern & Kompilieren zur Verfügung, da die neuen Optionen sowohl in den Style-Sheet-Dateien als auch in den dynamischen Style-Manager-Optionen (templates/style-manager-tm.xml) hinterlegt werden.

Image outset

Wenn Box, der Flex-Modus und Vertical Alignment konfiguriert sind, kann das Bild durch Aktivieren dieser Option auf die gesamte Breite der Kachel gestreckt werden.

Image stretch

Wenn Box, der Flex-Modus und Horizontal Alignment konfiguriert sind, kann das Bild durch Aktivieren dieser Option auf die gesamte Höhe der Kachel gestreckt werden.

Mehr Informationen zum Verhalten von Bild und Text im Box-Modus können im Exkurs: Padding von Components und Elements nachgelesen werden.

Text-Modus und Mobile Ansicht von Bild-Text

Text-Modus

Wird einer der Text-within-Modi eingestellt, beeinflussen die Optionen Vertical Alignment, Horizontal Alignment, Width und Element -> Spacing das Verhalten des Textes.

Layout-Aktivierung ab bestimmter Bildschirmbreite

Wird ein Bild links oder rechts vom Text positioniert, greift diese Einstellung erst ab der eingestellten Bildschirmbreite unter $image-text-behaviour-min-width.

Medien¶

Video¶

$video-bg

Dient der Einstellung der Hintergrundfarbe von selbst gehosteten Videos, welche über das Element Video eingebunden werden. Für Videos können nicht nur Höhe und Breite eingegeben werden, es kann auch ein Video-Poster (Vorschaubild) ausgewählt werden, welches jedoch keine Bildgröße erhält.

Es wird empfohlen, dass das genutzte Vorschaubild dasselbe Seitenverhältnis wie das des Videos hat. Sollte dies nicht ausreichen, kann im StyleManager unter Element > Image das Seitenverhältnis angepasst werden. Dieses beeinflusst den Container des Videos, sodass das Video seine Originalgröße behält.