GLPI - Personaliser l'UI avec CSS

Difficulté : Intermédiaire Notions : GLPI, personalisation

---

I. Introduction

Depuis l'apparition du plugin payant "Branding", il n'existe plus d'options officielle pour personnaliser GLPI.

De plus, l'édition manuelle des pages peut s'avérer hasardeux.

 

Cependant, l'éditeur à tout de même prévu la possibilité de personnaliser le produit dans une certaine mesure afin de présenter aux différentes entités une façade personnalisée lors de la connexion. Pour cela, ils ont mis en place un système permettant de faire un "override" du style css.

 

---

II. Personnaliser GLPI

Aller dans le menu "Administration --> Entités " et sélectionner l'entité racine.

 

Cliquer sur l'entité racine.

 

Puis aller dans la page "Personnalisation de l'interface"

 

Passer 'Activer la personnalisation CSS' à 'Oui' et entrer le code suivant dans le bloc de code :

body.welcome-anonymous .card-body { background-color:#cfdcea}
body.welcome-anonymous .glpi-logo {
    --logo: url("<url du logo>");
      content: var(--logo);
    height: 200px;
      width: 380px;
}
.page .glpi-logo {
  background: url("<url du logo>") no-repeat;
  background-size: 100px 50px;
}

 

Et sauvegarder.

 

La page est maintenant personnalisée.

 

Et le logo custom apparait désormais en haut à gauche.