GLPI - Personaliser l'UI avec CSS

Applicable àDifficulté : GLPI 10+
Intermédiaire

Notions : GLPI, personalisation

---

ProblèmeI. 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.

 

BesoinCependant, l'éditeur à tout de même prévu la possibilité de personnaliser lesle logoproduit GLPIdans (une logincertaine etmesure menuafin ).

de

Leprésenter pluginaux 'Branding'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 le faire estun soumis"override" àdu abonnementstyle au store GLPI.

L'édition des fichiers de configuration ou de page peut s'avérer compliqué.css.

 

---

SolutionII. Personnaliser GLPI

Note : il est possible d'appliquer un style par entité / sous-entités.

Depuis la version 10, il est possible de personnaliser les style de page GLPI par entités.

Pour cela, allerAller 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.

---

 

Sources

n/aLa page est maintenant personnalisée.

 

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