NexTool Solutions

La marque ne s'arrête pas à l'écran de connexion. Quand un client veut son identité visuelle à l'intérieur de GLPI - dans le menu et la navigation quotidienne - la voie durable est le CSS par entité, et non un énième plugin de thème à maintenir. L'astuce n'est pas d'écrire du beau CSS : c'est de choisir ce qu'il ne faut PAS personnaliser pour ne pas casser l'exploitation. Ce guide montre comment appliquer un thème interne (nous utilisons une palette inspirée d'Iron Man, rouge et or) tout en gardant formulaires, couleurs de statut et indicateurs dans le style natif de GLPI.

Pourquoi le CSS par entité plutôt qu'un plugin de thème

Tout plugin visuel devient une dette de maintenance : à chaque mise à jour de GLPI, on espère que le thème reste compatible. Le CSS par entité n'a pas ce coût. Il est natif, stocké en base de données (pas dans un fichier que la mise à jour écrase) et survit donc aux montées de version du cœur. Et comme il est par entité, chaque site, service ou client peut avoir sa propre identité, avec un héritage récursif des entités parentes vers les filles.

Dans la maintenance de parcs clients, c'est la différence qui compte : zéro dépendance supplémentaire à revalider à chaque version. Vous livrez une identité visuelle sans ajouter une pièce de plus à l'inventaire des choses qui peuvent casser à la prochaine mise à jour.

Où GLPI stocke le CSS

Dans GLPI, le champ de CSS personnalisé de l'entité se trouve sous Configuration > Entités > [votre entité] > Personnalisation de l'interface (le libellé exact varie selon la version). Collez le CSS, enregistrez et rafraîchissez les écrans internes. Comme le contenu est stocké en base, il n'est pas affecté quand une mise à jour remplace les fichiers système, et le retour arrière est trivial : il suffit de restaurer le texte précédent.

L'héritage récursif est le détail qui fait gagner du temps : définissez l'identité de base dans l'entité racine et ne surchargez dans les filles que lorsqu'une variation est nécessaire. Pour isoler une entité précise, appliquez le CSS directement sur elle.

Le périmètre qui tient : le menu oui, l'exploitation non

La règle apprise à nos dépens est simple : personnalisation visuelle lourde uniquement dans les zones non opérationnelles. Le menu latéral et la barre supérieure portent l'identité et aucun sens de donnée ; les couleurs de statut, les badges de SLA et les champs de formulaire portent une information que le technicien décode en quelques millisecondes. Toucher ces couleurs sabote la lecture de l'écran.

Le CSS du thème (l'intérieur seulement)

Voici le cœur du thème appliqué au menu et à la navigation. Notez le commentaire final : ce que nous laissons de côté compte autant que ce que nous stylisons.

/* Theme interieur GLPI - palette Iron Man (rouge et or)
   Appliquer dans : Configuration > Entites > [votre entite] > Personnalisation UI
   Regle d'or : menu et navigation seulement. Ni formulaire ni statut. */

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

  /* Logo servi DEPUIS GLPI - jamais de hotlink vers un site externe */
  --glpi-logo-light: url("/pics/marque-client.png");
  --glpi-logo-dark:  url("/pics/marque-client.png");
}

/* Menu lateral - zone sure a thematiser */
#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; }

/* Element actif en or - toujours dans la 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);
}

/* On ne touche PAS volontairement : couleurs de statut, badges SLA,
   formulaires et cartes operationnelles. Ils restent en style natif GLPI. */

Le piège de terrain : image externe et excès de !important

L'erreur la plus courante que nous corrigeons dans les thèmes clients est le hotlink d'image externe. Quelqu'un colle dans le CSS un fond ou un logo pointant vers un site quelconque, et ça marche le jour du test. Puis ça casse pour trois raisons, toujours au pire moment : la politique de sécurité de contenu (CSP) bloque l'img-src externe, l'hôte tiers tombe ou se met à limiter les accès, ou GLPI tourne en HTTPS tandis que l'image est en HTTP et devient du contenu mixte que le navigateur rejette.

En maintenance, nous avons vu un thème récupérer un logo depuis un CDN d'images public ; un vendredi soir le client a durci la CSP et l'en-tête est apparu sans logo en production. La cause n'était pas GLPI, c'était le hotlink. Depuis, la règle est stricte : tout élément visuel servi depuis GLPI lui-même (le dossier d'images du système ou livré par un plugin) ou intégré en data URI pour les petits logos. La seconde erreur est de répandre !important sur .form-control et les couleurs de statut, ce qui casse le mode sombre et la lisibilité. Limitez le !important au menu.

Checklist avant publication

1. Copiez le CSS actuel de l'entité dans un fichier de retour arrière avant d'écraser.
2. Appliquez d'abord sur une entité de test, jamais directement sur la racine de production.
3. Parcourez tableau de bord, liste des tickets, formulaire de ticket, utilisateurs et rapports.
4. Testez le mode sombre et la vue mobile du thème.
5. Confirmez que tous les éléments sont internes (aucun hotlink externe).
6. Validez le contraste du texte sur le fond (visez WCAG AA).

Avec ce périmètre, le thème apporte l'identité et reste invisible pour l'exploitation : le menu devient celui du client, et le reste de GLPI demeure le GLPI que le technicien sait déjà lire.

Étape suivante

La personnalisation de l'interface fait partie de la maintenance que nous assurons avec NexTool. Si vous voulez standardiser l'identité de GLPI sans compromettre l'exploitation, parlez à l'équipe.

Révisé par l'équipe NexTool Solutions.