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.

Ces styles sont utilisables dans Administration > Entité > Mon_entité > Personnalisation de l'interface.

---

Couleurs principales

: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)

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

Barre de navigation (navbar)

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

Éléments de la barre de navigation

.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

.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

.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

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

Bouton principal

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

Bouton secondaire

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

Bouton secondaire à contour

.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

body {
 	font-family: sans-serif;
}

Couleur d'arrière-plan

body {
  	background-color: #ffffff;
}