Die Anmeldeseite von GLPI anzupassen, ist die häufigste Branding-Anfrage, die wir im Betrieb erhalten - und fast alle fangen falsch an, indem sie den Core bearbeiten oder ein Theme-Plugin installieren. Der saubere Weg existiert in GLPI bereits: CSS pro Einheit, ein natives Feld, welches Upgrades übersteht und ein Rollback in Sekunden erlaubt. Diese Anleitung zeigt, wo die realen Felder liegen (enable_custom_css und custom_css_code), warum Farben ohne !important nicht greifen, und welche Falle der Einheitenvererbung Ihr Anmelde-Theme verschwinden lässt, obwohl Ihr CSS gespeichert ist.
Warum CSS pro Einheit (und nicht Theme-Plugin oder Core)
Core-Dateien zu bearbeiten, hilft für eine Version und bricht beim nächsten Upgrade - ein Patch geht verloren, und Sie suchen, was sich geändert hat. Ein Theme-Plugin hilft, bindet eine Optik aber an seinen Update-Zyklus und seine Kompatibilität (beim Wechsel auf GLPI 11 gehörten Themes von Drittanbietern zu den Ersten, die brachen). CSS pro Einheit ist nativ, lässt sich in Ihrem eigenen Change-Management versionieren und durch Einfügen eines vorherigen CSS rückgängig machen. Für eine visuelle Identität - Farben, Logo, Hintergrund der Anmeldeseite - bietet es mehr Kontrolle als jedes Plugin, weil Sie jeden Selektor einer Oberfläche erreichen.
| Ansatz | Übersteht Upgrades | Rollback | Geltungsbereich |
|---|---|---|---|
| Core bearbeiten (CSS/SCSS) | Nein (Patch geht verloren) | Manuell und riskant | Global |
| Theme-Plugin | Hängt vom Plugin ab | Plugin deinstallieren | Global |
| CSS pro Einheit (nativ) | Ja | Vorheriges CSS einfügen und speichern | Pro Einheit, mit Vererbung |
Wo Sie es in GLPI konfigurieren
Öffnen Sie ein Einheitenformular unter Verwaltung > Einheiten > [Ihre Einheit] und suchen Sie den Abschnitt zur Anpassung der Oberfläche. Zwei Felder sind wichtig:
- Enable CSS customization (
enable_custom_css) - das Auswahlfeld mit Vererbung (vom übergeordneten Element erben, oder Sie erzwingen aktiviert/deaktiviert in einer aktuellen Einheit). - Benutzerdefiniertes CSS (
custom_css_code) - der Editor, in welchen Ihr CSS eingefügt wird.
Hier liegt ein erster Haken: Solange enable_custom_css nicht aktiv ist, erscheint der Editor gesperrt mit dem Hinweis „Custom CSS is disabled“, und nichts wird angewendet - Sie fügen Ihr CSS ein, speichern, laden neu, und „es funktioniert nicht“. Aktivieren Sie zuerst das Auswahlfeld. Speichern Sie und laden Sie die Anmeldeseite neu, um zu prüfen.
Fertiges CSS: Anmeldeseite in Markenfarben
Das Frontend von GLPI 11 nutzt Tabler (auf Bootstrap 5), daher färben Sie am saubersten um, indem Sie Design-Tokens --tblr-* überschreiben, statt Selektor für Selektor zu suchen. Das folgende Beispiel wendet eine Markenpalette an (Rot und Gold), gestaltet einen Hintergrund und deckt verschiedene Body-Klassen ab, die die Anmeldeseite zwischen GLPI 10 und 11 verwendet:
/* Login por marca - colar em custom_css_code da entidade.
GLPI 11 usa Tabler: sobrescreva os tokens --tblr-* para a cor primaria. */
:root {
--brand-500: #b11123;
--brand-700: #7f0e18;
--brand-gold: #d4a017;
--tblr-primary: var(--brand-500);
--tblr-primary-rgb: 177, 17, 35;
}
/* A tela de login muda de classe de body entre versoes - cubra as duas. */
body.page-login,
body.welcome-anonymous,
body[class*="login"] {
min-height: 100vh;
background-color: #140104 !important;
background-image:
linear-gradient(145deg, rgba(16,0,0,.74) 2%, rgba(127,14,24,.56) 60%, rgba(212,160,23,.34) 100%),
url("/front/logos/login-bg.jpg") !important; /* hospede local, evite URL externo */
background-size: cover !important;
background-position: center !important;
background-attachment: fixed !important;
}
/* Cores do GLPI vencem por especificidade: precisa de !important. */
body[class*="login"] .btn-primary {
border: 1px solid var(--brand-gold) !important;
background: linear-gradient(180deg, var(--brand-500), var(--brand-700)) !important;
color: #fff !important;
}
/* O rodape do login e .copyright (nao um id/classe obvia). */
body[class*="login"] .copyright { color: #fff6da !important; }
/* fixed pesa em mobile: troque por scroll no telefone. */
@media (max-width: 767.98px) {
body[class*="login"] { background-attachment: scroll !important; }
}Die Vererbungsfalle: warum die Anmeldeseite kein Theme hat
Hier kommt ein Detail, welches erst im Betrieb sichtbar wird: Die Anmeldeseite läuft vor jeder Authentifizierung, es gibt in diesem Moment also keine aktive Einheit. GLPI bestimmt eine Optik vor dem Login über die Stamm-Einheit (id 0). Wenn Sie Ihr CSS in einer untergeordneten Einheit angewendet haben - etwa jener eines Kunden -, trägt ein internes Dashboard zwar die Marke, aber die Anmeldeseite bleibt im Standard, weil sie diese Einheit nie „betritt“. Unsere Praxisregel: Ein Anmelde-Theme gehört in die Stamm-Einheit; eine Kundenanpassung, die erst nach dem Login sichtbar sein muss, kann in einer untergeordneten Einheit liegen und nach unten vererbt werden. Weil das Feld Vererbung hat, gilt, was Sie in der Stamm-Einheit setzen, für alle untergeordneten Einheiten, sofern keine davon es überschreibt.
Checkliste für Produktion
- Versionieren Sie ein vorheriges CSS vor jeder Änderung (speichern Sie den Feldinhalt).
- Wenden Sie ein Anmelde-Theme in der Stamm-Einheit an; Anpassungen nach dem Login können in einer untergeordneten Einheit liegen.
- Aktivieren Sie
enable_custom_cssvor dem Einfügen - sonst bleibt der Editor gesperrt. - Hosten Sie ein Hintergrundbild lokal (ein Dokument in GLPI oder eine vom eigenen Host ausgelieferte Datei); eine externe URL bricht durch CSP, Mixed Content oder Nichtverfügbarkeit.
- Testen Sie mit Techniker- und Anforderer-Profil, auf Desktop und mobil.
- Prüfen Sie den Kontrast von Formular und Schaltfläche (Barrierefreiheit); halten Sie ein Rollback bereit.
Fallen aus der Praxis
Drei Dinge haben uns bei Kunden Zeit gekostet und sind zu einer internen FAQ geworden. Erstens: Farben ohne !important greifen nicht - ein Stylesheet von Tabler lädt mit hoher Spezifität, und Ihr Override muss gewinnen. Zweitens: Hintergrundbilder über externe URL sind fragil; in einer Umgebung mit restriktiver Content-Security-Policy oder ohne Internetzugang lädt ein Hintergrund schlicht nicht, und die Anmeldeseite bleibt schwarz - hosten Sie eine Datei auf dem eigenen Server. Drittens: Verwechseln Sie die Anpassung pro Einheit nicht mit dem globalen CSS von GLPI (Einstellungen > Allgemein); beide existieren, und sie zu vermischen, führt zu Kopfschmerzen bei der Rangfolge. Dokumentieren Sie, welche Ebene welche Regel lädt.
Nächster Schritt
Markenstandardisierung in GLPI ist Routine in unserem Betrieb - von einer Anmeldeseite bis zum internen Theme, mit kontrolliertem Rollback. Wenn Sie eine Umgebung Ihres Kunden mit der richtigen Identität ausstatten möchten, ohne den Core anzufassen, sprechen Sie mit unserem Team.
Geprüft vom Team von NexTool Solutions.
