Auf der Seite zum Layout-Builder wird beschrieben, wie man Blöcke im Layout Builder konfiguriert. Dabei gibt es im Abschnitt Content-Designer-Einstellungen oft auch die Möglichkeit, den Block oder Teile des Blocks mit CSS-Klassen weiter zu gestalten.
Auf dieser Seite finden Sie eine Auflistung der wichtigsten mitgelieferten Klassen der Dialogzentrale.
Manche dieser Klassen setzen nur genau eine Eigenschaft, andere bringen eine komplexere Gestaltung mit sich.
Wichtig: Diese Klassen sind für fortgeschrittene Anwender mit CSS-Kenntnissen gedacht.
Zur normalen Formatierung von Texten gibt es in vielen Inhaltsarten sowie im Text-Block einen graphischen Editor.
¶ Text
Mit folgenden Klassen lässt sich Text formatieren.
| Info | Klasse |
|---|---|
| Schriftgröße | fs-10 über fs0 bis fs10 |
| Fett | fw-bld |
| Kursiv | fsy-itlc |
| Unterstrichen | td-undrln |
| GROSSBUCHSTABEN | tt-upcse |
| kleinbuchstaben | tt-lwrcse |
| Linksbündig | ta-l |
| Zentriert | ta-c |
| Rechtsbündig | ta-r |
| Blocksatz | ta-j |
| Textumbruch in langen Worten | wrd-wrp |
| Kein Textumbruch | ws-nowrp |
Anmerkungen:
fs0= normale Schriftgröße, negative Zahlen = kleinere Schriftgröße- Fett und Kursiv jeweils mit Suffix
nrmzurücksetzen, alsofw-nrmum fette Schrift wieder normal darzustellen
¶ Abstände
Die folgenden Klassen regeln Außen- und Innenabstände von Bereichen.
| Info | Klasse |
|---|---|
| Außenabstand | m-10 über m0 bis m10 |
| Außenabstand nur links | ml-10 über ml0 bis ml10 |
| Außenabstand nur rechts | mr-10 über mr0 bis mr10 |
| Außenabstand nur oben | mt-10 über mt0 bis mt10 |
| Außenabstand nur unten | mb-10 über mb0 bis mb10 |
| Innenabstand | p-10 über p0 bis p10 |
| Innenabstand nur links | pl-10 über pl0 bis pl10 |
| Innenabstand nur rechts | pr-10 über pr0 bis pr10 |
| Innenabstand nur oben | pt-10 über pt0 bis pt10 |
| Innenabstand nur unten | pb-10 über pb0 bis pb10 |
Anmerkungen:
- Klassennamen mit
0setzen den Abstand auf 0. - Negative Abstände rücken etwas aus dem Bereich hinaus.
- Der Unterschied zwischen Außen- und Innenabstand ist relevant, wenn ein Bereich z.B. eine Hintergrundfarbe hat.
¶ Breite und Höhe
Folgende Klassen regeln die Breite und Höhe von Bereichen oder Bildern.
| Info | Klasse |
|---|---|
| Breite | w1 bis w12 |
| Maximale Breite | maxw1 bis maxw12 |
| Minimale Breite | minw1 bis minw12 |
| Höhe 100%, z.B. für Bilder in Bereichen | h-100-prcnt |
| Minimale Höhe in Viewport Height | minh10-vh bis minh100-vh |
| Längere Inhalte mit Scrollbalken | of-s |
Anmerkungen:
- Die Angaben von 1 bis 12 beziehen sich auf eine Breite von 100%, welche in 12 gleichbreite Spalten eingeteilt ist.
10-vhentspricht 10% der Bildschirm-Größe.
¶ Kanten und Schatten
Mit folgenden Klassen lassen sich Bereiche mit einer Kante versehen.
| Info | Klasse |
|---|---|
| Rand anzeigen | brdr |
| Rand anzeigen, nur link | brdr-l |
| Rand anzeigen, nur rechts | brdr-r |
| Rand anzeigen, nur oben | brdr-t |
| Rand anzeigen, nur unten | brdr-b |
| kein Rand | no-brdr |
| Schatten | bs |
¶ Links
Folgende Klassen lassen sich vor allem auf Links anwenden.
| Info | Klasse |
|---|---|
| nicht unterstrichen | td-none |
| Link als Badge darstellen, siehe z.B. Kategorien | badge |
| Link als Button darstellen | btn |
| Dehnt den anklickbaren Bereich auf die ganze Box aus | boxlink |
¶ Anzeige und Position von Elementen
Mit den folgenden Klassen lässt sich die Anzeige und Position von Elementen beeinflussen.
| Info | Klasse |
|---|---|
| Element linksbündig anzeigen | algn-l |
| Element zentriert anzeigen | algn-c |
| Element rechtssbündig anzeigen | algn-r |
| Element nicht anzeigen | d-n |
| Element ausblenden | v-h |
| Element inline anzeigen | d-i |
| Element als Block anzeigen | d-b |
| Element als Inline-Block anzeigen | d-ib |
| Element relativ positionieren | p-rltv |
| Element absolut positionieren | p-abslt |
| Links von Inhalten anzeigen (float: left) | fl |
| Rechts von Inhalten anzeigen (float: right) | fr |
| Umfließen beenden (clear) | clr-b bzw. clr-l oder clr-r |
¶ Farben
Die folgenden Klassen dienen zum Einfärben von Bereichen. In der Regel sollten die Farbbuttons dafür verwendet werden. Der Effekt ist der gleiche.
| Info | Klasse |
|---|---|
| Text- und Hintergrundfarbe setzen | cc0 bis cc... |
| Farbkombination anwenden | set-colors |
| Text- und Hintergrundfarbe umdrehen | inverted |
Im Design der Dialogzentrale sind Kombinationen aus Text- und Hintergrundfarbe definiert. Meist sind es mindestens 8 Farben, manchmal auch mehr. Es wird von "cc0" hochgezählt. Zur Farbnummer muss die Klasse set-colors benutzt werden, um die Farbe anzuwenden.
¶ Angaben für bestimmte Bildschirmbreiten
Sie können Angaben auch abweichend nur für bestimmte Bildschirmbreiten treffen. Insbesondere lassen sich zusätzlich zu den allgemeingültigen Angaben Klassen nur für mittlere und kleine Bildschirme definieren. Damit können Sie z.B. Elemente auf Smartphones anders gestalten.
- Nur für mittlere Bildschirmbreite: "-m" anhängen
- Nur für kleine Bildschirmbreite: "-s" anhängen
Beispiel: w6 p2 w12-s p1-s würde einen Bereich auf die halbe Bildschirmbreite mit einem größeren Innenabstand setzen. Abweichend davon wird auf sehr kleinen Bildschirmen jedoch der Bereich über die volle Breite mit kleinerem Innenabstand gesetzt.