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 |