Design & Branding
Layout, Farben, Typografie und sichtbare Abschnitte einer Statusseite anpassen.
Design & Branding
Jede Statusseite hat eine visuelle Design-Konfiguration. Bearbeiten Sie sie in der App unter Dashboard → Statusseiten → (Seite) → Design oder über die Design-API. Änderungen werden zusammengeführt — Sie senden nur die Felder, die Sie ändern möchten, der Rest behält seine aktuellen Werte.
Layouts
Wählen Sie eines von acht Layout-Presets. Alle zeigen dieselben Daten (Gesamtstatus, Services, optionale Statistiken und Historie), unterscheiden sich aber in Struktur und Dichte — sehen Sie sich jedes im Design-Editor live an.
| Layout | Ideal für |
|---|---|
classic | Der Standard. Prominentes Hero-Banner mit dem Gesamtstatus, gefolgt von der Service-Liste. |
cards | Jeder Service als Karte in einem responsiven Raster. |
minimal | Reduzierte, textorientierte Darstellung mit minimalem Rahmen. |
sleek | Modernes Hero-Banner mit Akzentfarben-Verlauf. |
board | Dashboard-artiges Board, um viele Services auf einen Blick zu sehen. |
split | Header über die volle Breite mit zweispaltigem Body (Status neben Historie). |
timeline | Betont eine chronologische Timeline von Vorfällen und Wartungen. |
compact | Dichtes Layout, das viele Services auf wenig vertikalem Raum unterbringt. |
Erscheinungsbild
| Option | Werte | Standard | Beschreibung |
|---|---|---|---|
colorScheme | light, dark, auto | auto | auto folgt der Systemeinstellung des Besuchers. |
accentColor | Hex-Farbe #rrggbb | #6366f1 | Für Hervorhebungen, Links und Verläufe. |
headerStyle | simple, centered, hero | simple | Wie prominent der Seiten-Header ist. |
fontFamily | system, mono | system | mono gibt einen technischen, dicktengleichen Look. |
cardRadius | none, md, xl | md | Eckenrundung von Karten und Panels. |
pageWidth | sm, md, lg, xl | lg | Maximale Inhaltsbreite. |
Inhalt & Abschnitte
| Option | Typ | Standard | Beschreibung |
|---|---|---|---|
customTitle | String (≤120) | — | Überschreibt den Seitentitel im Header. |
customSubtitle | String (≤200) | — | Ein Untertitel unter dem Titel. |
showUptimeStats | Boolean | true | Verfügbarkeitsprozente pro Service anzeigen. |
showServiceUrls | Boolean | false | Die URL jedes Service neben dem Namen anzeigen. |
showLastChecked | Boolean | false | Den „zuletzt geprüft"-Zeitstempel pro Service anzeigen. |
showHistory | Boolean | true | Den Abschnitt „Letzte Historie" anzeigen. |
historyDays | Zahl | — | Wie viele Tage Historie einbezogen werden (begrenzt durch das Plattform-Min/Max). |
showPoweredBy | Boolean | true | Den „powered by Uptimeify"-Footer anzeigen. Für volles White-Labeling ausschalten. |
showHistory steuert, ob der Historien-Abschnitt gerendert wird. Die separaten Schalter Letzte Vorfälle anzeigen und Letzte Wartungen anzeigen (in den Haupteinstellungen der Seite) steuern, was in diesen Abschnitt kommt. Siehe Letzte Historie.Beispiel (API)
curl -X PATCH "$BASE_URL/api/status-pages/<id>/design" \
-H "Authorization: Bearer $TOKEN" \
-H "Content-Type: application/json" \
-d '{
"layout": "sleek",
"colorScheme": "dark",
"accentColor": "#10b981",
"showServiceUrls": true,
"showPoweredBy": false
}'
Nur die gesendeten Felder werden geändert; alles andere behält seinen aktuellen Wert. Siehe Statusseiten-Design aktualisieren für die vollständige Referenz.
White-Labeling
Für eine vollständig gebrandete Seite ohne Uptimeify-Verweise:
- Setzen Sie
showPoweredByauffalse. - Konfigurieren Sie eine eigene Domain, damit die Seite auf Ihrem Hostnamen läuft.
- Setzen Sie eine
accentColor(und optionalcustomTitle/customSubtitle) passend zu Ihrer Marke.