# GLPI - Personaliser l'UI avec CSS

<table id="bkmrk-difficult%C3%A9%2A-%3Cdescrip" style="border-collapse: collapse; width: 100%; height: 46.8px; border-width: 1px; border-style: hidden;"><colgroup><col style="width: 20%;"></col></colgroup><tbody><tr style="height: 46.8px;"><td style="height: 46.8px; border: 1px groove rgb(52,73,94);">[![image.png](https://docs.labs404.fr/uploads/images/gallery/2026-07/scaled-1680-/intermediaire-png.png)](https://docs.labs404.fr/uploads/images/gallery/2026-07/scaled-1680-/intermediaire-png.png)</td><td style="height: 46.8px; border-width: 1px; background-color: rgb(236,202,250); vertical-align: top;">Difficulté : Intermédiaire

Notions : GLPI, personalisation

</td></tr></tbody></table>

---

### <span style="color: rgb(52,73,94);">**<span style="text-decoration: underline;">I. Introduction</span>**</span>

Depuis l'apparition du plugin payant "<span style="color: rgb(132, 63, 161);">***Branding***</span>", 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 "<span style="color: rgb(132, 63, 161);">***override***</span>" du style css.

---

### <span style="color: rgb(52,73,94);">**<span style="text-decoration: underline;">II. Personnaliser GLPI</span>**</span>

Aller dans le menu "<span style="color: rgb(132,63,161);">***Administration --&gt; Entités***</span> " et sélectionner l'entité racine.

[![image.png](https://docs.labs404.fr/uploads/images/gallery/2026-07/scaled-1680-/Tstimage.png)](https://docs.labs404.fr/uploads/images/gallery/2026-07/Tstimage.png)

Cliquer sur l'entité racine.

[![image.png](https://docs.labs404.fr/uploads/images/gallery/2026-07/scaled-1680-/zMLimage.png)](https://docs.labs404.fr/uploads/images/gallery/2026-07/zMLimage.png)

Puis aller dans la page "*<span style="color: rgb(132,63,161);">**Personnalisation de l'interface**</span>*"

[![image.png](https://docs.labs404.fr/uploads/images/gallery/2026-07/scaled-1680-/0YDimage.png)](https://docs.labs404.fr/uploads/images/gallery/2026-07/0YDimage.png)

Passer '<span style="color: rgb(132,63,161);">***Activer la personnalisation CSS**' à '**Oui***</span>' et entrer le code suivant dans le bloc de code :

```css
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.

[![image.png](https://docs.labs404.fr/uploads/images/gallery/2026-07/scaled-1680-/Nncimage-png.png)](https://docs.labs404.fr/uploads/images/gallery/2026-07/scaled-1680-/Nncimage-png.png)

La page est maintenant personnalisée.

[![image.png](https://docs.labs404.fr/uploads/images/gallery/2026-07/scaled-1680-/cyNimage.png)](https://docs.labs404.fr/uploads/images/gallery/2026-07/cyNimage.png)

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

[![image.png](https://docs.labs404.fr/uploads/images/gallery/2026-07/scaled-1680-/zIpimage.png)](https://docs.labs404.fr/uploads/images/gallery/2026-07/zIpimage.png)