Personalizzare la schermata di login di GLPI è la richiesta di branding più frequente che riceviamo in sostentamento - e quasi tutti partono male, modificando il core o installando un plugin a tema. La via pulita esiste già in GLPI: il CSS per entità, un campo nativo che sopravvive agli aggiornamenti e consente un rollback in pochi secondi. Questa guida mostra dove sono i campi reali (enable_custom_css e custom_css_code), perché il colore non prende senza !important, e la trappola dell'ereditarietà di entità che fa sparire il tema del login anche con il CSS salvato.
Perché il CSS per entità (e non un plugin a tema o il core)
Modificare i file del core funziona per una versione e si rompe all'aggiornamento successivo - la patch va persa e si ritrova a cercare cosa è cambiato. Un plugin a tema funziona, ma lega l'aspetto al ciclo di aggiornamento e alla compatibilità del plugin (nel passaggio a GLPI 11, i temi di terze parti sono stati tra i primi a rompersi). Il CSS per entità è nativo, versionabile nel Suo controllo delle modifiche e reversibile incollando il CSS precedente. Per l'identità visiva - colori, logo, sfondo del login - offre più controllo di qualsiasi plugin, perché raggiunge qualsiasi selettore dell'interfaccia.
| Approccio | Sopravvive all'aggiornamento | Rollback | Ambito |
|---|---|---|---|
| Modificare il core (CSS/SCSS) | No (la patch va persa) | Manuale e rischioso | Globale |
| Plugin a tema | Dipende dal plugin | Disinstallare il plugin | Globale |
| CSS per entità (nativo) | Sì | Incollare il CSS precedente e salvare | Per entità, con ereditarietà |
Dove configurarlo in GLPI
Apra il modulo dell'entità in Amministrazione > Entità > [la Sua entità] e individui la sezione di personalizzazione dell'interfaccia. Contano due campi:
- Enable CSS customization (
enable_custom_css) - un menu a tendina con ereditarietà (eredita dal padre, o forza attivato/disattivato sull'entità corrente). - CSS personalizzato (
custom_css_code) - l'editor dove si incolla il CSS.
La prima insidia è qui: finché enable_custom_css non è attivo, l'editor appare bloccato con l'avviso "Custom CSS is disabled" e non viene applicato nulla - incolla il CSS, salva, ricarica e "non funziona". Attivi prima il menu a tendina. Salvi e ricarichi la pagina di login per validare.
CSS pronto: ricolorare il login per marca
Il front-end di GLPI 11 usa Tabler (su Bootstrap 5), quindi il modo pulito per ricolorare è sovrascrivere i design token --tblr-* invece di cacciare selettore per selettore. L'esempio qui sotto applica una palette di marca (rosso e oro), gestisce lo sfondo e copre le varie classi di body che la schermata di login usa tra GLPI 10 e 11:
/* Login per marca - incollare in custom_css_code dell'entita.
GLPI 11 usa Tabler: sovrascrivi i token --tblr-* per il colore primario. */
:root {
--brand-500: #b11123;
--brand-700: #7f0e18;
--brand-gold: #d4a017;
--tblr-primary: var(--brand-500);
--tblr-primary-rgb: 177, 17, 35;
}
/* La schermata di login cambia classe di body tra versioni - copri entrambe. */
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; /* ospita in locale, evita un URL esterno */
background-size: cover !important;
background-position: center !important;
background-attachment: fixed !important;
}
/* I colori di GLPI vincono per specificita: serve !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;
}
/* Il pie di pagina del login e .copyright (non un id/classe ovvia). */
body[class*="login"] .copyright { color: #fff6da !important; }
/* fixed pesa su mobile: passa a scroll sul telefono. */
@media (max-width: 767.98px) {
body[class*="login"] { background-attachment: scroll !important; }
}La trappola dell'ereditarietà: perché il login resta senza tema
Ecco il dettaglio che emerge solo quando opera: la schermata di login gira prima di qualsiasi autenticazione, quindi in quel momento non esiste un'entità attiva. GLPI risolve l'aspetto pre-login dall'entità radice (id 0). Se ha applicato il CSS su un'entità figlia - quella del cliente, per esempio - la dashboard interna prende sì la marca, ma la pagina di login resta di default, perché non "entra" mai in quell'entità. La regola pratica che adottiamo: il tema del login va sull'entità radice; la personalizzazione per cliente che deve comparire solo dopo il login può stare sull'entità figlia, ereditata verso il basso. Poiché il campo ha ereditarietà, ciò che mette nella radice scende a tutte le figlie, a meno che una non lo sovrascriva.
Checklist di produzione
- Versioni il CSS precedente prima di ogni modifica (salvi il testo del campo).
- Applichi il tema del login sull'entità radice; la personalizzazione post-login può andare sull'entità figlia.
- Attivi
enable_custom_cssprima di incollare - altrimenti l'editor resta bloccato. - Ospiti l'immagine di sfondo localmente (un Documento in GLPI o un file servito dall'host stesso); un URL esterno si rompe per CSP, mixed-content o indisponibilità.
- Testi con un profilo tecnico e uno richiedente, su desktop e mobile.
- Verifichi il contrasto del modulo e del pulsante (accessibilità); tenga pronto il rollback.
Trappole di campo
Tre cose ci sono costate tempo in cliente e sono diventate una FAQ interna. Prima: il colore senza !important non prende - il foglio di stile di Tabler carica con alta specificità, e la Sua sovrascrittura deve vincere. Seconda: l'immagine di sfondo per URL esterno è fragile; in un ambiente con Content-Security-Policy restrittiva o senza uscita a internet, lo sfondo semplicemente non carica e il login diventa nero - ospiti il file sul server stesso. Terza: non confonda la personalizzazione per entità con il CSS globale di GLPI (Configurazione > Generale); esistono entrambi, e mescolarli diventa un grattacapo di precedenza. Documenti quale livello porta quale regola.
Prossimo passo
Standardizzare la marca in GLPI è routine nella nostra operatività - dal login al tema interno, con rollback controllato. Se vuole il parco del Suo cliente con l'identità giusta senza toccare il core, parli con il team.
Revisionato dal team NexTool Solutions.
