> For the complete documentation index, see [llms.txt](https://help.glpi-project.org/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.glpi-project.org/tutorials/fr/my-instance/ui-customization.md).

# Personnalisation de l'interface

Voici une documentation des styles CSS spécifiques à GLPI. 

Tous les codes couleur suivants sont neutres, vous pouvez les personnaliser comme vous le souhaitez.

{% hint style="info" %}
Ces styles sont utilisables dans **`Administration`** > **`Entité`** > *Mon\_entité* > **`Personnalisation de l'interface`**.
{% endhint %}

***

## Couleurs principales

```css
:root {
  --tblr-primary: #ffffff;
  --tblr-secondary: #ffffff;
  --tblr-success: #ffffff;
  --tblr-info: #ffffff;
  --tblr-body-font-family: sans-serif;
  --tblr-body-color: #ffffff;
  --tblr-body-bg: #ffffff;
}
```

Ces variables CSS globales sont utilisées tout au long de vos feuilles de style pour assurer la cohérence des couleurs et des polices.

***

## Styles de la barre latérale et du menu de navigation

### Barres de navigation

#### Barre de menu (verticale ou horizontale)

```css
.sidebar, .topbar {
	background-color: rgb(0, 0, 0);
}
```

#### Barre de navigation (navbar)

```css
.navbar-expand-md {
	background-color: #ffffff;
    color: #ffffff;
}
```

#### Éléments de la barre de navigation

```css
.sidebar #navbar-menu .nav-item .nav-link.show, .sidebar #navbar-menu .nav-item .nav-link.active {
  border-left-color: #ffffff;
  color: #ffffff;
}

.sidebar #navbar-menu .nav-item:hover .nav-link {
  border-left-color: #ffffff;
  color: #ffffff;
  background-color: rgba(0, 0, 0, 0.1);
}
```

Ces styles sont appliqués à la barre latérale et au menu de navigation sur le côté gauche de l'application. Ils définissent les couleurs de fond, les couleurs du texte et les couleurs de la bordure des liens.

***

## Styles des inputs

```css
.form-check-input:checked {
  background-color: #ffffff;
}

.form-check-input[type="checkbox"]:indeterminate {
  background-color: #ffffff;
  border-color: #ffffff;
}
```

Ces styles définissent le comportement visuel des cases à cocher lorsqu'elles sont cochées ou indéterminées.

***

## Styles de la barre de progression

```css
.progress-bar {
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  color: #ffffff;
  text-align: center;
  white-space: nowrap;
  background-color: #ffffff;
  transition: width 0.6s ease;
}
```

La barre de progression est en blanc (`#ffffff`). L'animation est définie pour que la largeur de la barre change graduellement au lieu de sauter à sa nouvelle valeur.

***

## Styles des boutons

```css
.btn-primary, .btn-outline-primary, .btn-ghost-primary {
  --tblr-btn-color: #ffffff;
  --tblr-btn-color-interactive: #ffffff;
  --tblr-btn-color-text: #ffffff;
}
```

### Bouton principal

```css
.btn-primary {
	background-color: rgb(0, 0, 0);
}
```

### Bouton secondaire

```css
.btn-secondary {
	background-color: rgb(0, 0, 0);
}
```

### Bouton secondaire à contour

```css
.btn-outline-secondary {
	border-color: rgb(0, 0, 0); /* Couleur du contour */
	color: rgb(0, 0, 0); /* Couleur du contenu */
}
```

Les boutons de votre application ont une couleur principale, une couleur interactive (c'est-à-dire lorsqu'ils sont survolés ou cliqués), une couleur de texte, et parfois une couleur de contour.

***

## Autres styles

### Police d'écriture

```css
body {
 	font-family: sans-serif;
}
```

### Couleur d'arrière-plan

```css
body {
  	background-color: #ffffff;
}
```


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://help.glpi-project.org/tutorials/fr/my-instance/ui-customization.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.