Cómo configurar la pantalla de login de GLPI con CSS por entidad

Resumen

En esta guía configurará la pantalla de login de GLPI usando CSS en la entidad, sin editar archivos core y sin depender de plugin para tema visual.

También mostramos un ejemplo completo de tema Iron Man (rojo y dorado) con imagen de fondo estática.

¿Por qué hacerlo vía CSS de entidad (y no vía plugin)?

La personalización por CSS en la entidad es más adecuada para identidad visual porque:

1. Controla cualquier elemento visual de la interfaz, sin quedar limitado a lo que un plugin expone.
2. Evita dependencia de compatibilidad y ciclo de actualización de plugins.
3. Reduce superficie de riesgo funcional (el foco es visual, sin alterar reglas de negocio).
4. Permite rollout y rollback rápido, directamente en el propio GLPI.

En resumen: para personalización visual, el CSS de la entidad generalmente ofrece una gama de personalización superior al uso de plugins de tema.

Dónde configurar en GLPI

En GLPI, acceda a:

Configurar > Entidades > [su entidad] > Personalización de UI > CSS personalizado

Pegue el CSS, guarde y recargue la página de login.

CSS listo: login Iron Man (rojo + dorado)

Archivo de referencia:
./anexos/login_homem_de_ferro.css

/*
  Tema de login GLPI - Iron Man (rojo y dorado)
  Aplicación: Configurar > Entidades > [su entidad] > Personalización de UI > CSS personalizado
  Fecha: 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) Pantalla de entidad (dónde configurar el CSS)

2) Login desktop con tema Iron Man

3) Login mobile con tema Iron Man

Buenas prácticas de producción

1. Siempre versione el CSS antes de alterar.
2. Haga pruebas con perfil técnico y solicitante.
3. Valide desktop y mobile.
4. Documente el origen/licencia de la imagen usada en el fondo.
5. Tenga rollback listo (pegar el CSS anterior y guardar).