Come configurare la schermata di login di GLPI con CSS per entità

Riepilogo

In questa guida configurerete la schermata di login di GLPI utilizzando il CSS dell'entità, senza modificare file core e senza dipendere da plugin per il tema visivo.

Mostriamo anche un esempio completo di tema Iron Man (rosso e dorato) con immagine di sfondo statica.

Perché farlo tramite CSS dell'entità (e non tramite plugin)?

La personalizzazione via CSS nell'entità è più adatta all'identità visiva perché:

1. Controlla qualsiasi elemento visivo dell'interfaccia, senza essere limitata a ciò che un plugin espone.
2. Evita la dipendenza dalla compatibilità e dal ciclo di aggiornamento dei plugin.
3. Riduce la superficie di rischio funzionale (il focus è visivo, senza modificare le regole di business).
4. Consente rollout e rollback rapido, direttamente in GLPI.

In sintesi: per la personalizzazione visiva, il CSS dell'entità offre generalmente una gamma di personalizzazione superiore rispetto all'uso di plugin di tema.

Dove configurare in GLPI

In GLPI, accedete a:

Configura > Entità > [la vostra entità] > Personalizzazione UI > CSS personalizzato

Incollate il CSS, salvate e ricaricate la pagina di login.

CSS pronto: login Iron Man (rosso + dorato)

File di riferimento:
./anexos/login_homem_de_ferro.css

/*
  Tema di login GLPI - Iron Man (rosso e dorato)
  Applicazione: Configura > Entità > [la vostra entità] > Personalizzazione UI > CSS personalizzato
  Data: 2026-02-23
*/

:root {
  --ns-iron-red-900: #220206;
  --ns-iron-red-700: #7f0e18;
  --ns-iron-red-500: #b11123;
  --ns-iron-gold-500: #d4a017;
  --ns-iron-gold-300: #f2cc4d;
  --ns-iron-text: #fff6da;

  --tblr-primary: var(--ns-iron-red-500);
  --tblr-primary-rgb: 177, 17, 35;
  --tblr-primary-fg: #ffffff;
  --tblr-btn-color: var(--ns-iron-red-500);
  --tblr-btn-color-interactive: #d4142a;
  --tblr-btn-color-text: #ffffff;
}

body.page-login,
body.welcome-anonymous,
body.login,
body[class*="login"] {
  min-height: 100vh;
  background-color: #140104 !important;
  background-image:
    linear-gradient(
      145deg,
      rgb(16 0 0 / 74%) 2%,
      rgb(79 8 17 / 56%) 36%,
      rgb(212 160 23 / 34%) 100%
    ),
    url("https://wallpapers.com/images/hd/iron-man-comics-1920-x-1200-wallpaper-fipgdbe78a8hm1gr.jpg") !important;
  background-position: center center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important;
}

body.page-login .card.main-content-card,
body.welcome-anonymous .card.main-content-card,
body.login .card,
body[class*="login"] .card {
  border: 1px solid rgb(242 204 77 / 65%) !important;
  background: linear-gradient(180deg, rgb(26 2 6 / 88%), rgb(14 1 4 / 90%)) !important;
  box-shadow:
    0 16px 45px rgb(0 0 0 / 48%),
    0 0 0 1px rgb(212 160 23 / 20%) inset;
}

body.page-login .card h2,
body.page-login .form-label,
body.welcome-anonymous .card h2,
body.welcome-anonymous .form-label,
body.login .card h2,
body.login .form-label,
body[class*="login"] .card h2,
body[class*="login"] .form-label {
  color: var(--ns-iron-text) !important;
}

body.page-login .form-control,
body.page-login .form-select,
body.welcome-anonymous .form-control,
body.welcome-anonymous .form-select,
body.login .form-control,
body.login .form-select,
body[class*="login"] .form-control,
body[class*="login"] .form-select {
  color: #fff7de !important;
  border-color: rgb(212 160 23 / 40%) !important;
  background-color: rgb(45 7 12 / 70%) !important;
}

body.page-login .form-control:focus,
body.page-login .form-select:focus,
body.welcome-anonymous .form-control:focus,
body.welcome-anonymous .form-select:focus,
body.login .form-control:focus,
body.login .form-select:focus,
body[class*="login"] .form-control:focus,
body[class*="login"] .form-select:focus {
  border-color: var(--ns-iron-gold-300) !important;
  box-shadow: 0 0 0 0.2rem rgb(212 160 23 / 23%) !important;
}

body.page-login .btn-primary,
body.welcome-anonymous .btn-primary,
body.login .btn-primary,
body[class*="login"] .btn-primary {
  border: 1px solid #f2cc4d !important;
  color: #ffffff !important;
  background: linear-gradient(180deg, #c01226 0%, #8e0f1d 100%) !important;
}

body.page-login .btn-primary:hover,
body.welcome-anonymous .btn-primary:hover,
body.login .btn-primary:hover,
body[class*="login"] .btn-primary:hover {
  filter: brightness(1.08);
}

@media (max-width: 768px) {
  body.page-login,
  body.welcome-anonymous,
  body.login,
  body[class*="login"] {
    background-attachment: scroll !important;
  }
}

1) Schermata dell'entità (dove configurare il CSS)

2) Login desktop con tema Iron Man

3) Login mobile con tema Iron Man

Buone pratiche in produzione

1. Versionate sempre il CSS prima di modificarlo.
2. Testate con profilo tecnico e richiedente.
3. Validate desktop e mobile.
4. Documentate l'origine/licenza dell'immagine utilizzata come sfondo.
5. Tenete pronto un rollback (incollare il CSS precedente e salvare).