Skip to main content

Branding

GLPI.png

Pourquoi personnaliser le logo ?

Il peut être intéressant de changerChanger le logo de GLPI pourpeut sembler purement esthétique au premier abord, mais ça va plus loin : ça renforce le sentiment d'appartenance des raisons purement esthétique, ou bien pour augmenter le sentiment d'intégrationutilisateurs à leur structure, en évitant l'entrepriseimpression pourd'utiliser lesun utilisateurs.outil générique et impersonnel.

Où intervenir

Et pour ce faire, il faut se rendreRends-toi dans Administration > Entités > [Nom de l'entité concernée] > Personnalisation de l'interface :

 .

image.png

Ici,Active onl'option activeCSS personnalisé, qui permet d'injecter le CSScode Personnalisé, et on peut y appliquer ceci :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;
}

Comme

Ce que fait chaque bloc

Sélecteur CSS Élément ciblé Source de l'indiqueimage les commentaires dans le code,.page Chaque.glpi-logo sectionLogo modifiedu lemenu logo,principal soitURL viainterne uneGLPI (/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,GLPI soit via uneou URL publique,publique lesexterne deux— fonctionnent indifféremment selon où sont possible.hébergées tes images.

Voici le résultat :

Résultat

image.png

image.png

CelaLe permetrésultat deest créerà unla meilleurfois sentimentplus d'appartenancecohérent je trouve,visuellement et c'estplus surtoutengageant bienpour les utilisateurs — sans compter que ça reste tout simplement plus joli,agréable onà varegarder pasau se mentir !quotidien.