# Personnalisation

# 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.

# Les notifications

[![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 personnaliser les </span><span class="_animating_6ta1u_10" data-newtext-seq="30">notifications ?</span>

<span class="_animating_6ta1u_10" data-newtext-seq="0">GLPI envoie une </span><span class="_animating_6ta1u_10" data-newtext-seq="16">quantité importante de mails aux </span><span class="_animating_6ta1u_10" data-newtext-seq="49">utilisateurs, techniciens et valideurs </span><span class="_animating_6ta1u_10" data-newtext-seq="88">(création de ticket, changement de </span><span class="_animating_6ta1u_10" data-newtext-seq="123">statut, validation, etc.). Or, par </span><span class="_animating_6ta1u_10" data-newtext-seq="158">défaut, ces notifications sont sobres </span><span class="_animating_6ta1u_10" data-newtext-seq="196">et peu engageantes : beaucoup </span><span class="_animating_6ta1u_10" data-newtext-seq="226">d'utilisateurs ne les lisent simplement </span><span class="_animating_6ta1u_10" data-newtext-seq="266">pas. On ne peut pas vraiment leur en </span><span class="_animating_6ta1u_10" data-newtext-seq="303">vouloir.</span>

<span class="_animating_6ta1u_10" data-newtext-seq="0">L'objectif ici est de rendre </span><span class="_animating_6ta1u_10" data-newtext-seq="29">ces notifications plus claires et plus </span><span class="_animating_6ta1u_10" data-newtext-seq="68">attractives à la lecture, pour </span><span class="_animating_6ta1u_10" data-newtext-seq="99">améliorer le taux de consultation et la </span><span class="_animating_6ta1u_10" data-newtext-seq="139">compréhension côté utilisateur final.</span>

### <span class="_animating_6ta1u_10" data-newtext-seq="3">Accéder aux modèles de notification</span>

<span class="_animating_6ta1u_10" data-newtext-seq="0">Rends-toi dans GLPI, dans </span>**<span class="_animating_6ta1u_10" data-newtext-seq="28">Configuration &gt; Notifications &gt; Modèles de notification</span>**<span class="_animating_6ta1u_10" data-newtext-seq="28">.</span>

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

### <span class="_animating_6ta1u_10" data-newtext-seq="3">Créer un </span><span class="_animating_6ta1u_10" data-newtext-seq="12">nouveau modèle</span>

<span class="_animating_6ta1u_10" data-newtext-seq="0">Clique sur </span>**<span class="_animating_6ta1u_10" data-newtext-seq="13">« + Ajouter »</span>**<span class="_animating_6ta1u_10" data-newtext-seq="13"> en haut de la page</span>

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

<span class="_animating_6ta1u_10" data-newtext-seq="0">Renseigne les champs </span><span class="_animating_6ta1u_10" data-newtext-seq="21">suivants :</span>

<div class="_chunkWrapper_6ta1u_30" id="bkmrk-nom-du-mod%C3%A8le-type-%28">- **<span class="_animating_6ta1u_10" data-newtext-seq="4">Nom</span>**<span class="_animating_6ta1u_10" data-newtext-seq="4"> du </span><span class="_animating_6ta1u_10" data-newtext-seq="13">modèle</span>
- **<span class="_animating_6ta1u_10" data-newtext-seq="13">Type</span>**<span class="_animating_6ta1u_10" data-newtext-seq="13"> (ici, </span>*<span class="_animating_6ta1u_10" data-newtext-seq="13">Ticket</span>*<span class="_animating_6ta1u_10" data-newtext-seq="13">)</span>
- **<span class="_animating_6ta1u_10" data-newtext-seq="51">Commentaire</span>**<span class="_animating_6ta1u_10" data-newtext-seq="51"> (facultatif)</span>
- **<span class="_animating_6ta1u_10" data-newtext-seq="82">Style CSS</span>**<span class="_animating_6ta1u_10" data-newtext-seq="82"> (facultatif, si tu veux </span><span class="_animating_6ta1u_10" data-newtext-seq="118">harmoniser le rendu)</span>

</div><span class="_animating_6ta1u_10" data-newtext-seq="0">Valide avec </span>**<span class="_animating_6ta1u_10" data-newtext-seq="14">« + Ajouter »</span>**<span class="_animating_6ta1u_10" data-newtext-seq="14">. Tu es alors redirigé </span><span class="_animating_6ta1u_10" data-newtext-seq="52">vers la page de configuration du </span><span class="_animating_6ta1u_10" data-newtext-seq="85">modèle.</span>

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

#### Comprendre les onglets du modèle

Une fois sur cette page, quatre onglets sont disponibles :

<div class="overflow-x-auto w-full px-2 mb-6" id="bkmrk-onglet-r%C3%B4le-traducti"><table class="min-w-full border-collapse text-sm leading-[1.7] whitespace-normal" style="width: 100%;"><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" style="width: 14.1773%;">Onglet</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" style="width: 85.8227%;">Rôle</th></tr></thead><tbody><tr><td class="border-b-0.5 border-[hsl(var(--border-300)/0.3)] py-2 pr-4 align-top" style="width: 14.1773%;">**Traduction**</td><td class="border-b-0.5 border-[hsl(var(--border-300)/0.3)] py-2 pr-4 align-top" style="width: 85.8227%;">Les différentes versions linguistiques de la notification. L'utilisateur reçoit la version correspondant à la langue définie dans son profil si elle existe, sinon la version par défaut.</td></tr><tr><td class="border-b-0.5 border-[hsl(var(--border-300)/0.3)] py-2 pr-4 align-top" style="width: 14.1773%;">**Notification**</td><td class="border-b-0.5 border-[hsl(var(--border-300)/0.3)] py-2 pr-4 align-top" style="width: 85.8227%;">La ou les notifications qui utilisent ce modèle (configuré plus tard).</td></tr><tr><td class="border-b-0.5 border-[hsl(var(--border-300)/0.3)] py-2 pr-4 align-top" style="width: 14.1773%;">**Historique**</td><td class="border-b-0.5 border-[hsl(var(--border-300)/0.3)] py-2 pr-4 align-top" style="width: 85.8227%;">Le suivi des modifications du modèle (qui a modifié quoi, et quand).</td></tr><tr><td class="border-b-0.5 border-[hsl(var(--border-300)/0.3)] py-2 pr-4 align-top" style="width: 14.1773%;">**Tous**</td><td class="border-b-0.5 border-[hsl(var(--border-300)/0.3)] py-2 pr-4 align-top" style="width: 85.8227%;">Regroupe l'ensemble des onglets précédents sur une seule vue.</td></tr></tbody></table>

</div>C'est l'onglet **Traduction du modèle** qui nous intéresse pour la personnalisation. Rends-toi dessus et clique sur **« Ajouter »** pour créer une traduction.

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

### Construire le contenu du mail

Trois éléments sont à renseigner :

#### Le sujet

C'est l'objet du mail. GLPI ajoute automatiquement un préfixe du type `[GLPI #<Ticket_ID>]`.

#### Le corps du mail (texte et HTML)

Le corps existe en deux versions :

- **Version texte** : peut être générée automatiquement à partir de la version HTML
- **Version HTML** : c'est celle qu'on va personnaliser

#### Les variables GLPI

GLPI met à disposition ses propres variables (tags) à insérer dans le modèle. Par exemple, le titre du ticket se note `##ticket.title##`.

On peut s'en servir directement dans l'objet du mail, ce qui est bien plus parlant qu'un simple ID :

```
##ticket.title##
```

Ce qui donnera par exemple : `[GLPI #0000018] Impossible de se connecter`

L'ensemble des variables disponibles est consultable via le bouton **« Voir la liste des balises disponibles »** :

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

### Exemple appliqué : la notification de création de ticket

Voici le modèle que j'ai mis en place pour la notification **« Création de ticket »**, reçue par l'utilisateur en confirmation de l'ouverture de sa demande :

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

Pour intégrer le code HTML directement, il faut basculer l'éditeur WYSIWYG en mode **« code source »** (icône `<>`), puis y coller le code suivant :

```html

<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
</head>
<body style="margin:0;padding:20px;background:#f0f2f5;font-family:Arial,sans-serif;">
<table width="100%" cellpadding="0" cellspacing="0" style="max-width:640px;margin:0 auto;">

  <tr>
    <td style="background:#1a56a0;padding:22px 28px;border-radius:10px 10px 0 0;">
      <p style="margin:0;color:#ffffff;font-size:17px;font-weight:bold;">✅ Votre demande a bien été enregistrée</p>
      <p style="margin:5px 0 0;color:rgba(255,255,255,0.75);font-size:13px;">Ticket ##ticket.id## · Rakouns</p>
    </td>
  </tr>

  <tr>
    <td style="background:#ffffff;border:1px solid #e5e5e5;border-top:none;border-radius:0 0 10px 10px;padding:24px 28px;">

      <p style="margin:0 0 12px;font-size:13px;color:#888888;">Ouvert le ##ticket.creationdate## par <strong style="color:#555;">##ticket.openbyuser##</strong></p>

      <p style="margin:0 0 14px;font-size:22px;font-weight:bold;color:#111111;">##ticket.title##</p>

      <p style="margin:0 0 18px;">
        <span style="display:inline-block;font-size:12px;font-weight:bold;padding:4px 12px;border-radius:99px;background:#e6f1fb;color:#185fa5;">##ticket.status##</span>
        &nbsp;
        <span style="display:inline-block;font-size:12px;font-weight:bold;padding:4px 12px;border-radius:99px;background:#faeeda;color:#854f0b;">##ticket.priority##</span>
      </p>

      <table width="100%" cellpadding="0" cellspacing="0" style="margin:0 0 18px;">
        <tr>
          <td width="50%" style="padding:0 6px 0 0;vertical-align:top;">
            <div style="background:#f7f7f7;border-radius:7px;padding:12px 14px;">
              <p style="margin:0 0 3px;font-size:12px;color:#888888;text-transform:uppercase;letter-spacing:0.05em;">Catégorie</p>
              <p style="margin:0;font-size:15px;font-weight:bold;color:#111111;">##ticket.category##</p>
            </div>
          </td>
          <td width="50%" style="padding:0 0 0 6px;vertical-align:top;">
            <div style="background:#f7f7f7;border-radius:7px;padding:12px 14px;">
              <p style="margin:0 0 3px;font-size:12px;color:#888888;text-transform:uppercase;letter-spacing:0.05em;">Technicien assigné</p>
              <p style="margin:0;font-size:15px;font-weight:bold;color:#111111;">##ticket.assigntousers##</p>
            </div>
          </td>
        </tr>
      </table>

      <hr style="border:none;border-top:1px solid #eeeeee;margin:0 0 18px;">

      <p style="margin:0 0 8px;font-size:12px;color:#888888;text-transform:uppercase;letter-spacing:0.05em;">Votre message</p>
      <div style="background:#f7f7f7;border-radius:7px;padding:12px 14px;font-size:15px;color:#333333;line-height:1.7;">##ticket.content##</div>

      <p style="margin:18px 0 0;font-size:14px;color:#555555;line-height:1.7;">Notre équipe informatique prend en charge votre demande. Vous serez notifié(e) par e-mail à chaque mise à jour.</p>

      <div style="text-align:center;margin:22px 0 0;">
        <a href="##ticket.url##" style="display:inline-block;background:#1a56a0;color:#ffffff;font-size:14px;font-weight:bold;padding:12px 28px;border-radius:7px;text-decoration:none;">Suivre mon ticket →</a>
      </div>

    </td>
  </tr>

  <tr>
    <td style="text-align:center;padding:14px 0 0;font-size:12px;color:#aaaaaa;">
      Rakouns · Ne pas répondre directement à cet e-mail
    </td>
  </tr>

</table>
</body>
</html>

```

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

Au moment de cliquer sur **« + Ajouter »**, GLPI génère automatiquement la version texte du modèle à partir de cette version HTML.

</body></html>