Farben
Angaben im Contao-Backend für CSS-ID immer ohne vorhergehende Raute #id und CSS-Klassen ohne vorhergehenden Punkt .klasse vornehmen. Mehrere Klassen sind durch ein Leerzeichen zu trennen.
Textfarben
| Farbe | CSS-Klasse | Beispiel | Webfarbe | RGB-Farbraum |
|---|---|---|---|---|
| Weiß | .color_white |
Textfarbe | #ffffff | R: 255 G: 255 B: 255 |
| Hellgrau | .color_light |
Textfarbe | #e9ecef | R: 233 G: 236 B: 239 |
| Dunkelgrau | .color_dark |
Textfarbe | #343a40 | R: 52 G: 58 B: 64 |
| Schwarz | .color_black |
Textfarbe | #000000 | R: 0 G: 0 B: 0 |
| Erfolg (Grün) | .color_success |
Textfarbe | #28a745 | R: 40 G: 167 B: 69 |
| Info (Türkis) | .color_info |
Textfarbe | #17a2b8 | R: 23 G: 162 B: 184 |
| Warnung (Orange) | .color_warning |
Textfarbe | #ffc107 | R: 255 G: 193 B: 7 |
| Achtung (Rot) | .color_danger |
Textfarbe | #dc3545 | R: 220 G: 53 B: 69 |
| Primär (Blau) | .color_primary |
Textfarbe | #007bff | R: 0 G: 123 B: 255 |
| Sekundär (Grau) | .color_secondary |
Textfarbe | #6c757d | R: 108 G: 117 B: 125 |
Hintergrundfarben
| Farbe | CSS-Klasse | Beispiel | Webfarbe | RGB-Farbraum |
|---|---|---|---|---|
| Weiß | .bg_white |
Hintergrundfarbe | #ffffff | R: 255 G: 255 B: 255 |
| Hellgrau | .bg_light |
Hintergrundfarbe | #e9ecef | R: 233 G: 236 B: 239 |
| Dunkelgrau | .bg_dark |
Hintergrundfarbe | #343a40 | R: 52 G: 58 B: 64 |
| Schwarz | .bg_black |
Hintergrundfarbe | #000000 | R: 0 G: 0 B: 0 |
| Erfolg (Grün) | .bg_success |
Hintergrundfarbe | #28a745 | R: 40 G: 167 B: 69 |
| Info (Türkis) | .bg_info |
Hintergrundfarbe | #17a2b8 | R: 23 G: 162 B: 184 |
| Warnung (Orange) | .bg_warning |
Hintergrundfarbe | #ffc107 | R: 255 G: 193 B: 7 |
| Achtung (Rot) | .bg_danger |
Hintergrundfarbe | #dc3545 | R: 220 G: 53 B: 69 |
| Primär (Blau) | bg_primary |
Hintergrundfarbe | #007bff | R: 0 G: 123 B: 255 |
| Sekundär (Grau) | .bg_secondary |
Hintergrundfarbe | #6c757d | R: 108 G: 117 B: 125 |
Rahmenfarben
| Farbe | CSS-Klasse | Beispiel | Webfarbe | RGB-Farbraum |
|---|---|---|---|---|
| Standard | .border_default |
#cccccc | R: 204 G: 204 B: 204 | |
| Weiß | .border_white |
#ffffff | R: 255 G: 255 B: 255 | |
| Hellgrau | .border_light |
#e9ecef | R: 233 G: 236 B: 239 | |
| Dunkelgrau | .border_dark |
#343a40 | R: 52 G: 58 B: 64 | |
| Schwarz | .border_black |
#000000 | R: 0 G: 0 B: 0 | |
| Erfolg (Grün) | .border_success |
#28a745 | R: 40 G: 167 B: 69 | |
| Info (Türkis) | .border_info |
#17a2b8 | R: 23 G: 162 B: 184 | |
| Warnung (Orange) | .border_warning |
#ffc107 | R: 255 G: 193 B: 7 | |
| Achtung (Rot) | .border_danger |
#dc3545 | R: 220 G: 53 B: 69 | |
| Primär (Blau) | .border_primary |
#007bff | R: 0 G: 123 B: 255 | |
| Sekundär (Grau) | .border_secondary |
#6c757d | R: 108 G: 117 B: 125 |