NexTool Solutions

Il marchio non finisce nella schermata di login. Quando il cliente vuole la propria identità visiva dentro GLPI - nel menu e nella navigazione quotidiana - la strada sostenibile è il CSS per entità, e non l'ennesimo plugin di tema da mantenere. Il trucco non è scrivere CSS elegante: è scegliere cosa NON personalizzare per non rompere l'operatività. Questa guida mostra come applicare un tema interno (usiamo una palette ispirata a Iron Man, rosso e oro) mantenendo moduli, colori di stato e indicatori nello stile nativo di GLPI.

Perché il CSS per entità e non un plugin di tema

Ogni plugin visivo diventa debito di manutenzione: a ogni aggiornamento di GLPI si spera che il tema resti compatibile. Il CSS per entità non ha questo costo. È nativo, salvato nel database (non in un file che l'aggiornamento sovrascrive) e quindi sopravvive agli aggiornamenti del core. E poiché è per entità, ogni sede, reparto o cliente può avere la propria identità, con ereditarietà ricorsiva dalle entità padre alle figlie.

Nella manutenzione dei parchi clienti è la differenza che conta: zero dipendenze extra da rivalidare a ogni versione. Consegna identità visiva senza aggiungere un altro pezzo all'inventario delle cose che possono rompersi al prossimo aggiornamento.

Dove GLPI salva il CSS

In GLPI, il campo del CSS personalizzato dell'entità si trova in Configurazione > Entità > [la Sua entità] > Personalizzazione UI (l'etichetta esatta varia con la versione). Incolli il CSS, salvi e aggiorni le schermate interne. Poiché il contenuto è salvato nel database, non è toccato quando un aggiornamento sostituisce i file di sistema, e il rollback è banale: basta ripristinare il testo precedente.

L'ereditarietà ricorsiva è il dettaglio che fa risparmiare lavoro: definisca l'identità di base nell'entità radice e sovrascriva nelle figlie solo quando serve una variazione. Per isolare un'entità specifica, applichi il CSS direttamente su di essa.

L'ambito che regge: menu sì, operatività no

La regola imparata a nostre spese è semplice: personalizzazione visiva pesante solo nelle aree non operative. Il menu laterale e la barra superiore portano identità e nessun significato di dato; i colori di stato, i badge di SLA e i campi dei moduli portano informazioni che il tecnico decodifica in millisecondi. Toccare quei colori sabota la lettura della schermata.

Il CSS del tema (solo l'interno)

Questo è il cuore del tema applicato al menu e alla navigazione. Noti il commento finale: ciò che lasciamo fuori conta quanto ciò che stiliamo.

/* Tema interno GLPI - palette Iron Man (rosso e oro)
   Applicare in: Configurazione > Entita > [la tua entita] > Personalizzazione UI
   Regola d'oro: solo menu e navigazione. Nessun modulo, nessuno stato. */

:root {
  --ns-iron-red-900: #250108;
  --ns-iron-red-500: #bc1023;
  --ns-iron-gold-500: #d4a017;
  --ns-iron-text:    #fff6da;

  /* Logo servito DA DENTRO GLPI - mai hotlink verso un sito esterno */
  --glpi-logo-light: url("/pics/marchio-cliente.png");
  --glpi-logo-dark:  url("/pics/marchio-cliente.png");
}

/* Menu laterale - area sicura da tematizzare */
#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; }

/* Elemento attivo in oro - ancora dentro la navigazione */
.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);
}

/* NON tocchiamo di proposito: colori di stato, badge SLA,
   moduli e card operative. Restano nello stile nativo di GLPI. */

La trappola sul campo: immagine esterna ed eccesso di !important

L'errore più comune che correggiamo nei temi cliente è l'hotlink di immagine esterna. Qualcuno incolla nel CSS uno sfondo o un logo che punta a un sito qualsiasi in rete, e funziona il giorno del test. Poi si rompe per tre motivi, sempre nel momento peggiore: la content security policy (CSP) blocca l'img-src esterno, l'host di terze parti va giù o inizia a limitare gli accessi, oppure GLPI gira in HTTPS mentre l'immagine è in HTTP e diventa contenuto misto che il browser scarta.

In manutenzione abbiamo visto un tema che prendeva il logo da una CDN pubblica di immagini; un venerdì sera il cliente ha irrigidito la CSP e l'intestazione è apparsa senza logo in produzione. La causa non era GLPI, era l'hotlink. Da allora la regola è ferrea: ogni risorsa visiva servita da GLPI stesso (la cartella immagini di sistema o distribuita da un plugin) oppure incorporata come data URI per i loghi piccoli. Il secondo errore è spargere !important su .form-control e sui colori di stato, cosa che rompe la modalità scura e la leggibilità. Limiti l'!important al menu.

Checklist prima di pubblicare

1. Copi il CSS attuale dell'entità in un file di rollback prima di sovrascrivere.
2. Applichi prima su un'entità di test, mai direttamente sulla radice di produzione.
3. Percorra dashboard, elenco ticket, modulo ticket, utenti e report.
4. Provi la modalità scura e la vista mobile del tema.
5. Confermi che ogni risorsa sia interna (nessun hotlink esterno).
6. Validi il contrasto del testo sullo sfondo (punti a WCAG AA).

Con questo ambito, il tema porta identità e resta invisibile all'operatività: il menu diventa quello del cliente, e il resto di GLPI resta il GLPI che il tecnico sa già leggere.

Prossimo passo

La personalizzazione dell'interfaccia fa parte della manutenzione che svolgiamo insieme a NexTool. Se vuole standardizzare l'identità di GLPI senza compromettere l'operatività, parli con il team.

Revisionato dal team NexTool Solutions.