Branding

GLPI.png

Pourquoi personnaliser le logo ?

Changer le logo de GLPI peut sembler purement esthétique au premier abord, mais ça va plus loin : ça renforce le sentiment d'appartenance des utilisateurs à leur structure, en évitant l'impression d'utiliser un outil générique et impersonnel.

Où intervenir

Rends-toi dans Administration > Entités > [Nom de l'entité concernée] > Personnalisation de l'interface.

image.png

Active l'option CSS personnalisé, qui permet d'injecter le code suivant.

/* Logo menu */
.page .glpi-logo {
  background: url('/pics/logos/custom/Support-Rakouns-title-white.png') no-repeat;
  background-size: contain;
  width: 200px;
}

/* Logo menu compact (sidebar réduite) */
body.navbar-collapsed .navbar-brand .glpi-logo {
  background: url("/pics/logos/custom/Support-Rakouns-2.png") no-repeat;
  background-size: contain;
  width: 40px;
  height: 40px;
}

/* Logo page de connexion */
.page-anonymous .glpi-logo {
  --logo: url("https://cloud.rakouns.bzh/public.php/dav/files/BgyTpJFo5yoTsB2/Support-Rakouns-title-grey.png");
  content: var(--logo);
  width: 400px;
  height: 100px;
}
.py-4 {
    padding-top: 0rem !important;
}

Ce que fait chaque bloc

Sélecteur CSS Élément ciblé Source de l'image
.page .glpi-logo Logo du menu principal URL interne GLPI (/pics/logos/custom/...)
body.navbar-collapsed .navbar-brand .glpi-logo Logo du menu compact (sidebar réduite) URL interne GLPI
.page-anonymous .glpi-logo Logo de la page de connexion URL publique externe (ici, un partage Nextcloud)

Les deux approches — URL interne GLPI ou URL publique externe — fonctionnent indifféremment selon où sont hébergées tes images.

Résultat

image.png

image.png

Le résultat est à la fois plus cohérent visuellement et plus engageant pour les utilisateurs — sans compter que ça reste tout simplement plus agréable à regarder au quotidien.


Revision #2
Created 2026-06-20 13:06:58 UTC by clement-derouet
Updated 2026-06-20 13:41:05 UTC by clement-derouet