# Branding

[![GLPI.png](https://docs.rakouns.bzh/uploads/images/gallery/2026-06/scaled-1680-/glpi.png)](https://docs.rakouns.bzh/uploads/images/gallery/2026-06/glpi.png)

### <span class="_animating_6ta1u_10" data-newtext-seq="3">Pourquoi </span><span class="_animating_6ta1u_10" data-newtext-seq="12">personnaliser le logo ?</span>

<span class="_animating_6ta1u_10" data-newtext-seq="0">Ch</span><span class="_animating_6ta1u_10" data-newtext-seq="2">anger le logo de GLPI peut sembler </span><span class="_animating_6ta1u_10" data-newtext-seq="37">purement esthétique au premier abord, </span><span class="_animating_6ta1u_10" data-newtext-seq="75">mais ça va plus loin : ça renforce le </span><span class="_animating_6ta1u_10" data-newtext-seq="113">sentiment d'appartenance des </span><span class="_animating_6ta1u_10" data-newtext-seq="142">utilisateurs à leur structure, </span><span class="_animating_6ta1u_10" data-newtext-seq="173">en évitant l'impression </span><span class="_animating_6ta1u_10" data-newtext-seq="197">d'utiliser un outil générique et </span><span class="_animating_6ta1u_10" data-newtext-seq="230">impersonnel.</span>

### <span class="_animating_6ta1u_10" data-newtext-seq="3">Où intervenir</span>

<span class="_animating_6ta1u_10" data-newtext-seq="0">Rends-to</span><span class="_animating_6ta1u_10" data-newtext-seq="8">i dans </span>**<span class="_animating_6ta1u_10" data-newtext-seq="17">Administration &gt; Entités &gt; \[Nom de l'entité concernée\] &gt; Personnalisation de l'interface</span>**<span class="_animating_6ta1u_10" data-newtext-seq="17">.</span>

[![image.png](https://docs.rakouns.bzh/uploads/images/gallery/2026-06/scaled-1680-/u4cimage.png)](https://docs.rakouns.bzh/uploads/images/gallery/2026-06/u4cimage.png)

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

```css
/* 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

<div class="overflow-x-auto w-full px-2 mb-6" id="bkmrk-s%C3%A9lecteur-css-%C3%89l%C3%A9men"><table class="min-w-full border-collapse text-sm leading-[1.7] whitespace-normal"><thead class="text-left"><tr><th class="text-text-100 border-b-0.5 border-[hsl(var(--border-300)/0.6)] py-2 pr-4 align-top font-bold" scope="col">Sélecteur CSS</th><th class="text-text-100 border-b-0.5 border-[hsl(var(--border-300)/0.6)] py-2 pr-4 align-top font-bold" scope="col">Élément ciblé</th><th class="text-text-100 border-b-0.5 border-[hsl(var(--border-300)/0.6)] py-2 pr-4 align-top font-bold" scope="col">Source de l'image</th></tr></thead><tbody><tr><td class="border-b-0.5 border-[hsl(var(--border-300)/0.3)] py-2 pr-4 align-top">`.page .glpi-logo`</td><td class="border-b-0.5 border-[hsl(var(--border-300)/0.3)] py-2 pr-4 align-top">Logo du menu principal</td><td class="border-b-0.5 border-[hsl(var(--border-300)/0.3)] py-2 pr-4 align-top">URL interne GLPI (`/pics/logos/custom/...`)</td></tr><tr><td class="border-b-0.5 border-[hsl(var(--border-300)/0.3)] py-2 pr-4 align-top">`body.navbar-collapsed .navbar-brand .glpi-logo`</td><td class="border-b-0.5 border-[hsl(var(--border-300)/0.3)] py-2 pr-4 align-top">Logo du menu compact (sidebar réduite)</td><td class="border-b-0.5 border-[hsl(var(--border-300)/0.3)] py-2 pr-4 align-top">URL interne GLPI</td></tr><tr><td class="border-b-0.5 border-[hsl(var(--border-300)/0.3)] py-2 pr-4 align-top">`.page-anonymous .glpi-logo`</td><td class="border-b-0.5 border-[hsl(var(--border-300)/0.3)] py-2 pr-4 align-top">Logo de la page de connexion</td><td class="border-b-0.5 border-[hsl(var(--border-300)/0.3)] py-2 pr-4 align-top">URL publique externe (ici, un partage Nextcloud)</td></tr></tbody></table>

</div>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](https://docs.rakouns.bzh/uploads/images/gallery/2026-06/scaled-1680-/jeiimage.png)](https://docs.rakouns.bzh/uploads/images/gallery/2026-06/jeiimage.png)

[![image.png](https://docs.rakouns.bzh/uploads/images/gallery/2026-06/scaled-1680-/Dwmimage.png)](https://docs.rakouns.bzh/uploads/images/gallery/2026-06/Dwmimage.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.