# Branding

## Requirements (self-hosted)

| GLPI Version | Minimum PHP | Recommended |
| ------------ | ----------- | ----------- |
| 10.0.x       | 8.1         | 8.2         |
| 11.0.x       | 8.2         | 8.4         |

{% hint style="info" %}
A [GLPI Network BASIC](https://services.glpi-network.com/#offers) subscription (or higher) is required. This plugin is also available for all GLPI Network [Cloud instances](https://glpi-network.cloud).
{% endhint %}

***

## Install the plugin

* Go to the marketplace. Download and install the **Branding** plugin.

<div align="left"><figure><img src="https://3573604317-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FuUCcURk2xlvtpVGbiRZf%2Fuploads%2FzQa7pJF5JqZphCxYwod6%2Fbranding.png?alt=media&#x26;token=107dcc39-8992-4fcc-a540-0c44203dfb55" alt="images/branding-1.png"><figcaption><p>Download the plugin</p></figcaption></figure></div>

***

## Custom palette

### Customization

**With GLPI 11 only**, you can customize the GLPI 11 theme to your liking.&#x20;

* From **`Tools`** > **`Custom palettes`**, click **`+Add`**
* Name it and click on **`+Add`**
* Select dark or light theme. Each of these themes can, of course, have a different color palette.

From here, you can modify several GLPI theme options:

| Option                            | CSS variable             |
| --------------------------------- | ------------------------ |
| Buttons and highlights            | --tblr-primary           |
| Text on secondary buttons         | --tblr-secondary-fg      |
| Read-only and disabled fields     | --tblr-input-disabled-bg |
| Left menu background              | --tblr-mainmenu-bg       |
| Secondary buttons background      | --tblr-secondary         |
| Text fields, dropdowns, textareas | --tblr-input-bg          |
| All clickable links               | --tblr-link-color        |
| Left menu text and icons          | --tblr-mainmenu-fg       |

You can then customize the item's color using the available color palette

<div align="left"><figure><img src="https://3573604317-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FuUCcURk2xlvtpVGbiRZf%2Fuploads%2FTqezqE8c2eBLs0NWdNDF%2Fcustom_palette.png?alt=media&#x26;token=439eb0e6-a279-4597-9019-9cdcd38296b9" alt=""><figcaption><p>seen from the color palette</p></figcaption></figure></div>

### Preview

Click on preview to see the result of your customization.

<figure><img src="https://3573604317-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FuUCcURk2xlvtpVGbiRZf%2Fuploads%2Fm94bxtKaPPnaojBcF1w1%2Fpreview_custom_palette.png?alt=media&#x26;token=ba71836b-bb22-4486-bdc6-5511728e8d54" alt=""><figcaption><p>Preview your theme</p></figcaption></figure>

### Force&#x20;

You can force the palette to be applied to all users, even if they have defined a palette in their preferences.

<figure><img src="https://3573604317-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FuUCcURk2xlvtpVGbiRZf%2Fuploads%2F9S5VyQbuOinxXUHT8lho%2Fforce_palette.png?alt=media&#x26;token=78e96828-da77-4ab1-972f-0345daea1ad3" alt=""><figcaption><p>Force your palette</p></figcaption></figure>

***

## Customize your instance

* Go to **`Administration`** > **`Entities`** > **`Branding`** tab

Here you can replace :

* the logo at top left (including folded bar)
* the logo on the login page,
* the background of the login page,
* the icon in the browser bar

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

***

## Custom by entity

You can modify certain elements by entity:

* the logo at top left (including folded bar)
* the icon in the browser bar

<figure><img src="https://3573604317-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FuUCcURk2xlvtpVGbiRZf%2Fuploads%2Fgit-blob-dc7278327cf8631d75b68160f99ad4c154bd64a2%2Fbranding-3.png?alt=media" alt="images/branding-3.png"><figcaption><p>Custom by entity</p></figcaption></figure>

Other customisations are common to all entities

***

## Recommendations

* **Top Left corner logo** - This can be changed according to the desired entity It is the logo you see when your GLPI page is opened and the left sidebar is expanded

Default recommended size: **100x55 pixels**

* **Lop Left corner logo** (collapsed sidebar) - This can be changed according to the desired entity It is the logo you see when your GLPI page is opened and the left sidebar is collapsed.

Default recommended size **40x40 pixels**

* **Favicon** It is the logo you see next to the page title at the beginning of your browser's the tab.

Default recommended size: **16x16 or 32x32 pixels**

* **Login page logo** It is the logo you see before you login. It appears with the fields to fill with your username and password

Default recommended size: **220x130 pixels**

* **Login page background** It is the image you can add as a background at the login page.

Default recommended size: **It depends on the usual size of your screens**. The bigger, the better. (Make sure not to surpass the maximum upload limit for files)

***

## FAQ

If you have any questions about using the plugin, please consult our FAQ

<a href="https://app.gitbook.com/s/SvoJ3lioglS2UZLcWWyP/plugins/branding" class="button secondary">Go to FAQ</a>