Eine Marke endet nicht auf der Anmeldeseite. Wenn ein Kunde seine visuelle Identität im Inneren von GLPI möchte, im Menü und in der täglichen Navigation, ist CSS pro Einheit der tragfähige Weg und nicht noch ein weiteres Theme-Plugin, welches gepflegt werden muss. Ein Geheimnis liegt nicht darin, schönes CSS zu schreiben, sondern darin, auszuwählen, was Sie NICHT anpassen, um den Betrieb nicht zu stören. In diesem Leitfaden zeigen wir, wie Sie ein internes Thema anwenden (wir verwenden eine von Iron Man inspirierte Palette in Rot und Gold) und dabei Formulare, Statusfarben und Kennzahlen im nativen Standard von GLPI belassen.
Warum CSS pro Einheit und kein Theme-Plugin
Jedes visuelle Plugin wird zur Wartungsschuld: Bei jedem Update von GLPI hoffen Sie, dass ein Thema kompatibel bleibt. CSS pro Einheit hat diese Kosten nicht. Es ist nativ, wird in der Datenbank gespeichert (nicht in einer Datei, die ein Update überschreibt) und übersteht deshalb Updates des Kerns. Und weil es pro Einheit gilt, kann jede Niederlassung, jede Abteilung oder jeder Kunde eine eigene Identität haben, mit rekursiver Vererbung von übergeordneten zu untergeordneten Einheiten.
Im Betrieb von Kundeninstallationen ist genau dies der entscheidende Unterschied: null zusätzliche Abhängigkeiten, die bei jeder Version neu validiert werden müssen. Sie liefern visuelle Identität und fügen der Liste von Dingen, die beim nächsten Upgrade kaputtgehen können, kein weiteres Teil hinzu.
Wo GLPI CSS speichert
In GLPI befindet sich ein Feld für benutzerdefiniertes CSS der Einheit unter Setup > Entities > [your entity] > UI customization (die genaue Bezeichnung variiert je nach Version). Fügen Sie CSS ein, speichern Sie und laden Sie die internen Seiten neu. Da der Inhalt in der Datenbank gespeichert wird, ist er nicht betroffen, wenn ein Update Systemdateien ersetzt, und ein Rollback ist einfach: Stellen Sie den vorherigen Text wieder her.
Die rekursive Vererbung ist ein Detail, welches Arbeit spart: Legen Sie die Basisidentität in der Stammeinheit fest und überschreiben Sie sie in untergeordneten Einheiten nur, wenn Sie eine Variante brauchen. Wenn Sie eine bestimmte Einheit isolieren möchten, wenden Sie CSS direkt auf sie an.
Ein tragfähiger Umfang: Menü ja, Betrieb nein
Die Regel, die wir auf die harte Tour gelernt haben, ist einfach: Umfangreiche visuelle Anpassungen nur in nicht operativen Bereichen. Seitenmenü und Topbar tragen Identität und keine Datenbedeutung; Statusfarben, SLA-Badges und Formularfelder hingegen tragen Informationen, die ein Techniker in Millisekunden entschlüsselt. An diesen Farben zu drehen, sabotiert die Lesbarkeit der Seite.
| UI-Element | Anpassen? | Warum |
|---|---|---|
| Seitenmenü (Navigation) | Ja | Identitätsbereich; trägt keine Datensemantik |
| Topbar / Kopfzeile | Mit Vorsicht | Hintergrundfarbe ok; Status- und Suchsymbole beibehalten |
| Formularkarten | Nein | Fokus auf Eingabe und Lesbarkeit vor Ästhetik |
| Statusfarben (neu, zugewiesen, gelöst) | Nie | Ein Techniker liest den Status an der Farbe, bevor er den Text liest |
| SLA-Badges und Kennzahlen | Nie | Rot bei überschrittenem SLA muss rot bleiben |
| Primäre Aktionsschaltfläche | Mit Vorsicht | Kann thematisiert werden, wenn AA-Kontrast erhalten bleibt |
CSS des Themas (nur das Innere)
Folgendes ist der Kern des Themas, angewendet auf Menü und Navigation. Beachten Sie den abschließenden Kommentar: Was wir weglassen, ist ebenso wichtig wie das, was wir gestalten.
/* GLPI interior theme - Iron Man palette (red and gold)
Apply at: Setup > Entities > [your entity] > UI customization
Golden rule: menu and navigation only. No forms, no status. */
:root {
--ns-iron-red-900: #250108;
--ns-iron-red-500: #bc1023;
--ns-iron-gold-500: #d4a017;
--ns-iron-text: #fff6da;
/* Logo served FROM WITHIN GLPI - never hotlink an external site */
--glpi-logo-light: url("/pics/client-brand.png");
--glpi-logo-dark: url("/pics/client-brand.png");
}
/* Side menu - safe area to theme */
#navbar-menu, .sidebar, aside[role="navigation"] {
background: linear-gradient(180deg, #220307 0%, #170206 48%, #110104 100%) !important;
border-right: 1px solid rgb(212 160 23 / 18%) !important;
}
.sidebar #navbar-menu .nav-link { color: var(--ns-iron-text) !important; }
/* Active item in gold - still inside navigation */
.sidebar #navbar-menu .nav-item .nav-link.active {
color: #fff8e3 !important;
background: linear-gradient(90deg, rgb(212 160 23 / 22%), rgb(212 160 23 / 6%));
border-left: 3px solid var(--ns-iron-gold-500);
}
/* We deliberately do NOT touch: status colors, SLA badges,
forms and operational cards. They stay in GLPI native style. */Die Falle aus der Praxis: externe Bilder und zu viel !important
Der häufigste Fehler, den wir in Kundenthemen korrigieren, sind Hotlinks auf externe Bilder. Jemand fügt in CSS einen Hintergrund oder ein Logo ein, welches auf eine beliebige Website im Internet zeigt, und am Testtag funktioniert es. Später bricht es aus drei Gründen, immer im ungünstigsten Moment: Die Content Security Policy (CSP) blockiert externes img-src, der Drittanbieter-Host fällt aus oder beschränkt den Zugriff, oder GLPI läuft unter HTTPS und ein Bild unter HTTP wird zu gemischtem Inhalt und vom Browser verworfen.
Im Betrieb haben wir ein Thema gesehen, welches sein Logo von einem öffentlichen Bild-CDN holte; an einem Freitagabend verschärfte der Kunde seine CSP, und die Kopfzeile erschien in Produktion ohne Logo. Die Ursache war nicht GLPI, sondern der Hotlink. Seitdem gilt eine strenge Regel: Jedes visuelle Asset wird aus GLPI selbst ausgeliefert (Bildordner des Systems oder über ein Plugin verteilt) oder bei kleinen Logos als Data-URI eingebettet. Der zweite Fehler ist, !important über .form-control und die Statusfarben zu verteilen, was Dunkelmodus und Lesbarkeit zerstört. Beschränken Sie !important auf ein Menü.
Checkliste vor der Veröffentlichung
- Kopieren Sie vor dem Überschreiben aktuelles CSS der Einheit in eine Rollback-Datei.
- Wenden Sie es zuerst in einer Testeinheit an, nie direkt in der Stammeinheit der Produktion.
- Gehen Sie Dashboard, Ticketliste, Ticketformular, Benutzer und Berichte durch.
- Testen Sie Dunkelmodus und mobile Ansicht des Themas.
- Bestätigen Sie, dass alle Assets intern sind (kein externer Hotlink).
- Prüfen Sie den Kontrast der Texte zum Hintergrund (Ziel: WCAG AA).
Mit diesem Umfang liefert ein Thema Identität und bleibt für den Betrieb unsichtbar: Ein Menü gehört dem Kunden, und der Rest von GLPI bleibt ein GLPI, welches ein Techniker bereits zu lesen weiß.
Nächster Schritt
Anpassungen der Oberfläche sind Teil des Betriebs, den wir zusammen mit NexTool leisten. Wenn Sie die Identität von GLPI vereinheitlichen möchten, ohne den Betrieb zu gefährden, sprechen Sie mit unserem Team.
Geprüft vom Team von NexTool Solutions.
