UI Customization

Here is the documentation for GLPI-specific CSS styles.

All the following color codes are neutral; you can customize them as you see fit.

These styles can be used in Administration > Entity > Entity > UI Customization

---

Main colors

: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;
}

These global CSS variables are used throughout your stylesheets to ensure consistency of colors and fonts.

---

Sidebar and navigation menu styles

Navigation Bars

Menu Bar (Vertical or Horizontal)

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

Navigation Bar (Navbar)

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

Navigation Bar Elements

.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);
}

These styles are applied to the sidebar and navigation menu on the left side of the application. They define the background colors, text colors, and border colors of the links.

---

Input styles

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

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

These styles define the visual behavior of checkboxes when they are checked or indeterminate.

---

Progress bar styles

.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;
}

The progress bar is white (#ffffff). The animation is set so that the bar's width changes gradually instead of jumping to its new value.

---

Button styles

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

Primary Button

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

Secondary Button

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

Secondary Outline Button

.btn-outline-secondary {
	border-color: rgb(0, 0, 0); /* Outline color */
	color: rgb(0, 0, 0); /* Content color */
}

The buttons in your application have a primary color, an interactive color (i.e. when hovered or clicked), a text color, and sometimes an outline color.

---

Other Styles

Font Family

body {
 	font-family: sans-serif;
}

Background Color

body {
  	background-color: #ffffff;
}