# Branding

***

## Prérequis (auto-hébergé)

| Version GLPI | PHP minimum | Recommandé |
| ------------ | ----------- | ---------- |
| 10.0.x       | 8.1         | 8.2        |
| 11.0.x       | 8.2         | 8.4        |

{% hint style="info" %}
Une souscription [GLPI Network BASIC](https://services.glpi-network.com/#offers) (ou supérieure) est requise. Ce plugin est également disponible pour toutes les instances [Cloud](https://glpi-network.cloud) de GLPI Network.
{% endhint %}

***

## Installer le plugin

* Allez sur le marketplace. Téléchargez et installez le plugin **Branding**.

<div align="left"><figure><img src="https://782257568-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJFKLcURHvFBybgf5dths%2Fuploads%2Fgit-blob-2cb3a01cd85592aeae7b9a1d2fb46beb319b9001%2Fbranding-1.png?alt=media" alt="images/branding-1.png"><figcaption><p>Télécharger le plugin</p></figcaption></figure></div>

***

## Palette personnalisée <a href="#custom-palette" id="custom-palette"></a>

### Personnalisation <a href="#customization" id="customization"></a>

**Avec GLPI 11 uniquement**, vous pouvez personnaliser le thème GLPI à votre guise.

* Depuis **`Outils`** > **`Palettes personnalisées`**, cliquez sur **`+Ajouter`**.
* Nommez-la et cliquez sur **`+Ajouter`**.
* Sélectionnez le thème **clair** ou **sombre**. Chaque thème peut avoir une palette de couleurs différente.

Vous pouvez ensuite modifier plusieurs options du thème GLPI.

| Option                                              | Variable CSS             |
| --------------------------------------------------- | ------------------------ |
| Boutons et points forts                             | --tblr-primary           |
| Texte sur les boutons secondaires                   | --tblr-secondary-fg      |
| Champs en lecture seule et champs désactivés        | --tblr-input-disabled-bg |
| Arrière-plan du menu de gauche                      | --tblr-mainmenu-bg       |
| Arrière-plan des boutons secondaires                | --tblr-secondary         |
| Champs de texte, listes déroulantes, zones de texte | --tblr-input-bg          |
| Tous les liens cliquables                           | --tblr-link-color        |
| Texte et icônes du menu de gauche                   | --tblr-mainmenu-fg       |

Vous pouvez ensuite personnaliser la couleur à l'aide de la palette disponible

<div align="left"><figure><img src="https://782257568-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJFKLcURHvFBybgf5dths%2Fuploads%2FREAXyGwO3KRthr9IqM2S%2Fcustom_palette.png?alt=media&#x26;token=147cd486-d4f1-4522-9f15-5acc3802cf86" alt=""><figcaption><p>Visualisation de la palette</p></figcaption></figure></div>

### Prévisualisation

Cliquez sur **Avant-première** pour voir le résultat de votre personnalisation.

<figure><img src="https://782257568-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJFKLcURHvFBybgf5dths%2Fuploads%2FHmt9YIyQBI1gC3Xhharn%2Fpreview_custom_palette.png?alt=media&#x26;token=a46597b6-08fd-4b91-a01f-aa4eacdacf2a" alt=""><figcaption><p>Prévisualisation de votre thème</p></figcaption></figure>

### Forcer une palette

Vous pouvez forcer l'application de la palette à tous les utilisateurs, même s'ils ont défini une palette dans leurs préférences.

<figure><img src="https://782257568-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJFKLcURHvFBybgf5dths%2Fuploads%2FFlPVTulJiKQKoragBv0T%2Fforce_palette.png?alt=media&#x26;token=60ccf800-8a0d-48af-9c57-f5b40e4d8355" alt=""><figcaption><p>Forcer l'application de la palette</p></figcaption></figure>

***

## Personnaliser votre instance

* Allez dans **administration > entités** > onglet **branding**

Ici vous pouvez remplacer :

* le logo en haut à gauche (y compris la barre repliée)
* le logo sur la page de connexion,
* le fond de la page de connexion,
* l'icône dans la barre du navigateur

<figure><img src="https://782257568-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJFKLcURHvFBybgf5dths%2Fuploads%2Fgit-blob-fa7021d371fe93b12c66eb94701f6471dfd7c219%2Fbranding-2.png?alt=media" alt="images/branding-2.png"><figcaption><p>Personnaliser vos logos</p></figcaption></figure>

***

## Personnalisation par entité

Vous pouvez modifier certains éléments par entité :

* le logo en haut à gauche (y compris la barre repliée)
* l'icône dans la barre du navigateur

<figure><img src="https://782257568-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJFKLcURHvFBybgf5dths%2Fuploads%2Fgit-blob-dc7278327cf8631d75b68160f99ad4c154bd64a2%2Fbranding-3.png?alt=media" alt="images/branding-3.png"><figcaption><p>Personnalisation par entité</p></figcaption></figure>

D'autres personnalisations sont communes à toutes les entités

***

## Recommandations

* **Logo du coin supérieur gauche** - Celui-ci peut être modifié selon l'entité souhaitée. C'est le logo que vous voyez lorsque votre page GLPI est ouverte et que la barre latérale gauche est développée.

Taille recommandée par défaut : **100x55 pixels**

* **Logo du coin supérieur gauche** (barre latérale réduite) - Celui-ci peut être modifié selon l'entité souhaitée. C'est le logo que vous voyez lorsque votre page GLPI est ouverte et que la barre latérale gauche est réduite.

Taille recommandée par défaut : **40x40 pixels**

* **Favicon** - C'est le logo que vous voyez à côté du titre de la page au début de l'onglet de votre navigateur.

Taille recommandée par défaut : **16x16 ou 32x32 pixels**

* **Logo de la page de connexion** - C'est le logo que vous voyez avant de vous connecter. Il apparaît avec les champs à remplir avec votre nom d'utilisateur et votre mot de passe.

Taille recommandée par défaut : **220x130 pixels**

* **Fond de la page de connexion** - C'est l'image que vous pouvez ajouter en arrière-plan sur la page de connexion.

Taille recommandée par défaut : **Cela dépend de la taille habituelle de vos écrans**. Plus c'est grand, mieux c'est. (Assurez-vous de ne pas dépasser la limite de taille maximale de téléchargement des fichiers)

***

## FAQ

Si vous avez des questions sur l'utilisation du plugin, veuillez consulter notre FAQ

<a href="https://app.gitbook.com/s/VU1qbB9Oe25HAYDAQ4tR/plugins/branding" class="button secondary">Aller à la FAQ</a>