Comment configurer l'écran de connexion de GLPI avec CSS par entité

Résumé

Dans ce guide, vous allez configurer l'écran de connexion de GLPI en utilisant le CSS de l'entité, sans modifier les fichiers core et sans dépendre d'un plugin de thème visuel.

Nous présentons également un exemple complet de thème Iron Man (rouge et doré) avec une image de fond statique.

Pourquoi le faire via CSS d'entité (et non via plugin) ?

La personnalisation par CSS dans l'entité est plus adaptée à l'identité visuelle car :

1. Elle contrôle tout élément visuel de l'interface, sans être limitée à ce qu'un plugin expose.
2. Elle évite la dépendance de compatibilité et le cycle de mise à jour des plugins.
3. Elle réduit la surface de risque fonctionnel (le focus est visuel, sans modifier les règles métier).
4. Elle permet un déploiement et un retour en arrière rapide, directement dans GLPI.

En résumé : pour la personnalisation visuelle, le CSS de l'entité offre généralement une gamme de personnalisation supérieure à l'utilisation de plugins de thème.

Où configurer dans GLPI

Dans GLPI, accédez à :

Configurer > Entités > [votre entité] > Personnalisation UI > CSS personnalisé

Collez le CSS, enregistrez et rechargez la page de connexion.

CSS prêt : connexion Iron Man (rouge + doré)

Fichier de référence :
./anexos/login_homem_de_ferro.css

/*
  Thème de connexion GLPI - Iron Man (rouge et doré)
  Application: Configurer > Entités > [votre entité] > Personnalisation UI > CSS personnalisé
  Date: 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) Écran de l'entité (où configurer le CSS)

2) Connexion desktop avec thème Iron Man

3) Connexion mobile avec thème Iron Man

Bonnes pratiques en production

1. Versionnez toujours le CSS avant de le modifier.
2. Testez avec un profil technicien et un profil demandeur.
3. Validez sur desktop et mobile.
4. Documentez l'origine/licence de l'image utilisée en arrière-plan.
5. Ayez un retour en arrière prêt (coller le CSS précédent et enregistrer).