How to configure the GLPI login screen with CSS per entity

Summary

In this guide you will configure the GLPI login screen using entity CSS, without editing core files and without relying on a visual theme plugin.

We also show a complete Iron Man theme (red and gold) example with a static background image.

Why use entity CSS (and not a plugin)?

Customization via entity CSS is more suitable for visual identity because:

1. It controls any visual element of the interface, without being limited to what a plugin exposes.
2. It avoids dependency on compatibility and plugin update cycles.
3. It reduces functional risk surface (the focus is visual, without altering business rules).
4. It allows fast rollout and rollback, directly within GLPI itself.

In summary: for visual customization, entity CSS generally offers a wider customization range than using theme plugins.

Where to configure in GLPI

In GLPI, go to:

Setup > Entities > [your entity] > UI Customization > Custom CSS

Paste the CSS, save, and reload the login page.

Ready-to-use CSS: Iron Man login (red + gold)

Reference file:
./anexos/login_homem_de_ferro.css

/*
  GLPI login theme - Iron Man (red and gold)
  Application: Setup > Entities > [your entity] > UI Customization > Custom CSS
  Date: 2026-02-23
*/

:root {
  --ns-iron-red-900: #220206;
  --ns-iron-red-700: #7f0e18;
  --ns-iron-red-500: #b11123;
  --ns-iron-gold-500: #d4a017;
  --ns-iron-gold-300: #f2cc4d;
  --ns-iron-text: #fff6da;

  --tblr-primary: var(--ns-iron-red-500);
  --tblr-primary-rgb: 177, 17, 35;
  --tblr-primary-fg: #ffffff;
  --tblr-btn-color: var(--ns-iron-red-500);
  --tblr-btn-color-interactive: #d4142a;
  --tblr-btn-color-text: #ffffff;
}

body.page-login,
body.welcome-anonymous,
body.login,
body[class*="login"] {
  min-height: 100vh;
  background-color: #140104 !important;
  background-image:
    linear-gradient(
      145deg,
      rgb(16 0 0 / 74%) 2%,
      rgb(79 8 17 / 56%) 36%,
      rgb(212 160 23 / 34%) 100%
    ),
    url("https://wallpapers.com/images/hd/iron-man-comics-1920-x-1200-wallpaper-fipgdbe78a8hm1gr.jpg") !important;
  background-position: center center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important;
}

body.page-login .card.main-content-card,
body.welcome-anonymous .card.main-content-card,
body.login .card,
body[class*="login"] .card {
  border: 1px solid rgb(242 204 77 / 65%) !important;
  background: linear-gradient(180deg, rgb(26 2 6 / 88%), rgb(14 1 4 / 90%)) !important;
  box-shadow:
    0 16px 45px rgb(0 0 0 / 48%),
    0 0 0 1px rgb(212 160 23 / 20%) inset;
}

body.page-login .card h2,
body.page-login .form-label,
body.welcome-anonymous .card h2,
body.welcome-anonymous .form-label,
body.login .card h2,
body.login .form-label,
body[class*="login"] .card h2,
body[class*="login"] .form-label {
  color: var(--ns-iron-text) !important;
}

body.page-login .form-control,
body.page-login .form-select,
body.welcome-anonymous .form-control,
body.welcome-anonymous .form-select,
body.login .form-control,
body.login .form-select,
body[class*="login"] .form-control,
body[class*="login"] .form-select {
  color: #fff7de !important;
  border-color: rgb(212 160 23 / 40%) !important;
  background-color: rgb(45 7 12 / 70%) !important;
}

body.page-login .form-control:focus,
body.page-login .form-select:focus,
body.welcome-anonymous .form-control:focus,
body.welcome-anonymous .form-select:focus,
body.login .form-control:focus,
body.login .form-select:focus,
body[class*="login"] .form-control:focus,
body[class*="login"] .form-select:focus {
  border-color: var(--ns-iron-gold-300) !important;
  box-shadow: 0 0 0 0.2rem rgb(212 160 23 / 23%) !important;
}

body.page-login .btn-primary,
body.welcome-anonymous .btn-primary,
body.login .btn-primary,
body[class*="login"] .btn-primary {
  border: 1px solid #f2cc4d !important;
  color: #ffffff !important;
  background: linear-gradient(180deg, #c01226 0%, #8e0f1d 100%) !important;
}

body.page-login .btn-primary:hover,
body.welcome-anonymous .btn-primary:hover,
body.login .btn-primary:hover,
body[class*="login"] .btn-primary:hover {
  filter: brightness(1.08);
}

@media (max-width: 768px) {
  body.page-login,
  body.welcome-anonymous,
  body.login,
  body[class*="login"] {
    background-attachment: scroll !important;
  }
}

1) Entity screen (where to configure CSS)

2) Desktop login with Iron Man theme

3) Mobile login with Iron Man theme

Production best practices

1. Always version the CSS before making changes.
2. Test with both technician and requester profiles.
3. Validate desktop and mobile.
4. Document the origin/license of the background image.
5. Have a rollback ready (paste the previous CSS and save).