NexTool Solutions

Personnaliser l'écran de connexion GLPI est la demande de branding la plus fréquente que nous recevons en maintenance - et presque tout le monde commence mal, en modifiant le cœur ou en installant un plugin de thème. Le chemin propre existe déjà dans GLPI : le CSS par entité, un champ natif qui survit aux mises à jour et permet un retour arrière en quelques secondes. Ce guide montre où sont les vrais champs (enable_custom_css et custom_css_code), pourquoi la couleur ne prend pas sans !important, et le piège d'héritage d'entité qui fait disparaître le thème du login même avec le CSS enregistré.

Pourquoi le CSS par entité (et non un plugin de thème ou le cœur)

Modifier les fichiers du cœur marche pour une version et casse à la mise à jour suivante - le correctif est perdu et vous cherchez ce qui a changé. Un plugin de thème marche, mais il lie l'apparence au cycle de mise à jour et à la compatibilité du plugin (au passage à GLPI 11, les thèmes tiers ont été parmi les premiers à casser). Le CSS par entité est natif, versionnable dans votre propre gestion du changement et réversible en collant le CSS précédent. Pour l'identité visuelle - couleurs, logo, fond du login - il offre plus de contrôle que n'importe quel plugin, car vous atteignez n'importe quel sélecteur de l'interface.

Où le configurer dans GLPI

Ouvrez le formulaire de l'entité dans Administration > Entités > [votre entité] et repérez la section de personnalisation de l'interface. Deux champs comptent :

• Enable CSS customization (enable_custom_css) - une liste déroulante avec héritage (héritez du parent, ou forcez activé/désactivé sur l'entité courante).
• CSS personnalisé (custom_css_code) - l'éditeur où le CSS est collé.

Le premier piège est ici : tant que enable_custom_css n'est pas actif, l'éditeur apparaît bloqué avec la mention "Custom CSS is disabled" et rien n'est appliqué - vous collez le CSS, enregistrez, rechargez et « ça ne marche pas ». Activez d'abord la liste déroulante. Enregistrez et rechargez la page de login pour valider.

CSS prêt à l'emploi : recolorer le login par la marque

Le front-end de GLPI 11 utilise Tabler (sur Bootstrap 5), donc la façon propre de recolorer est de surcharger les design tokens --tblr-* plutôt que de chasser sélecteur par sélecteur. L'exemple ci-dessous applique une palette de marque (rouge et or), gère le fond et couvre les différentes classes de body que l'écran de login utilise entre GLPI 10 et 11 :

/* Login par marque - a coller dans custom_css_code de l'entite.
   GLPI 11 utilise Tabler : surchargez les tokens --tblr-* pour la couleur primaire. */
:root {
  --brand-500: #b11123;
  --brand-700: #7f0e18;
  --brand-gold: #d4a017;
  --tblr-primary: var(--brand-500);
  --tblr-primary-rgb: 177, 17, 35;
}

/* L'ecran de login change de classe de body entre versions - couvrez les deux. */
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; /* hebergez en local, evitez une URL externe */
  background-size: cover !important;
  background-position: center !important;
  background-attachment: fixed !important;
}

/* Les couleurs de GLPI gagnent par specificite : il faut !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;
}

/* Le pied du login est .copyright (pas un id/classe evident). */
body[class*="login"] .copyright { color: #fff6da !important; }

/* fixed pese sur mobile : passez a scroll sur le telephone. */
@media (max-width: 767.98px) {
  body[class*="login"] { background-attachment: scroll !important; }
}

Le piège de l'héritage : pourquoi le login n'a pas de thème

Voici le détail qui n'apparaît qu'à l'exploitation : l'écran de login s'exécute avant toute authentification, il n'y a donc aucune entité active à ce moment. GLPI résout l'apparence pré-login à partir de l'entité racine (id 0). Si vous avez appliqué le CSS sur une entité fille - celle du client, par exemple - le tableau de bord interne prend bien la marque, mais la page de login reste par défaut, car elle n'« entre » jamais dans cette entité. La règle pratique que nous adoptons : le thème de login va sur l'entité racine ; la personnalisation par client qui ne doit apparaître qu'après le login peut vivre sur l'entité fille, héritée vers le bas. Comme le champ a de l'héritage, ce que vous mettez sur la racine descend vers toutes les filles, sauf si l'une la surcharge.

Checklist de production

1. Versionnez le CSS précédent avant tout changement (sauvegardez le texte du champ).
2. Appliquez le thème de login sur l'entité racine ; la personnalisation post-login peut aller sur l'entité fille.
3. Activez enable_custom_css avant de coller - sinon l'éditeur reste bloqué.
4. Hébergez l'image de fond localement (un Document dans GLPI ou un fichier servi par l'hôte lui-même) ; une URL externe casse via CSP, mixed-content ou indisponibilité.
5. Testez avec un profil technicien et un profil demandeur, sur ordinateur et mobile.
6. Vérifiez le contraste du formulaire et du bouton (accessibilité) ; gardez le retour arrière prêt.

Pièges de terrain

Trois choses nous ont coûté du temps chez des clients et sont devenues une FAQ interne. Première : la couleur sans !important ne prend pas - la feuille de style Tabler charge avec une forte spécificité, et votre surcharge doit gagner. Deuxième : une image de fond par URL externe est fragile ; dans un environnement avec une Content-Security-Policy stricte ou sans sortie internet, le fond ne se charge tout simplement pas et le login devient noir - hébergez le fichier sur le serveur lui-même. Troisième : ne confondez pas la personnalisation par entité avec le CSS global de GLPI (Configuration > Général) ; les deux existent, et les mélanger devient un casse-tête de priorité. Documentez quelle couche porte quelle règle.

Étape suivante

La normalisation de marque dans GLPI est une routine dans notre exploitation - du login au thème interne, avec un retour arrière contrôlé. Si vous voulez que le parc de votre client porte la bonne identité sans toucher au cœur, parlez à l'équipe.

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