NexTool Solutions

Personalizar la pantalla de login de GLPI es la petición de branding más frecuente que recibimos en sustentación - y casi todos empiezan mal, editando el core o instalando un plugin de tema. El camino limpio ya existe en GLPI: CSS por entidad, un campo nativo que sobrevive a las actualizaciones y permite rollback en segundos. Esta guía muestra dónde están los campos reales (enable_custom_css y custom_css_code), por qué el color no cuaja sin !important, y la trampa de la herencia de entidad que hace desaparecer el tema del login aunque el CSS esté guardado.

Por qué CSS por entidad (y no un plugin de tema o el core)

Editar archivos del core funciona por una versión y se rompe en la siguiente actualización - el parche se pierde y acabas buscando qué cambió. Un plugin de tema funciona, pero ata el aspecto al ciclo de actualización y a la compatibilidad del plugin (en el salto a GLPI 11, los temas de terceros fueron de los primeros en romperse). El CSS por entidad es nativo, versionable en tu propio control de cambios y reversible pegando el CSS anterior. Para la identidad visual - colores, logo, fondo del login - da más control que cualquier plugin, porque alcanzas cualquier selector de la interfaz.

Dónde configurarlo en GLPI

Abre el formulario de la entidad en Administración > Entidades > [tu entidad] y localiza la sección de personalización de interfaz. Importan dos campos:

• Enable CSS customization (enable_custom_css) - un desplegable con herencia (hereda del padre, o fuerzas activado/desactivado en la entidad actual).
• CSS personalizado (custom_css_code) - el editor donde se pega el CSS.

La primera trampa vive aquí: mientras enable_custom_css no esté activo, el editor aparece bloqueado con el aviso "Custom CSS is disabled" y no se aplica nada - pegas el CSS, guardas, recargas y "no funciona". Activa el desplegable primero. Guarda y recarga la página de login para validar.

CSS listo: recolorear el login por marca

El front-end de GLPI 11 usa Tabler (sobre Bootstrap 5), así que la forma limpia de recolorear es sobrescribir los design tokens --tblr-* en vez de cazar selector por selector. El ejemplo de abajo aplica una paleta de marca (rojo y dorado), trata el fondo y cubre las varias clases de body que la pantalla de login usa entre GLPI 10 y 11:

/* Login por marca - pegar en custom_css_code de la entidad.
   GLPI 11 usa Tabler: sobrescribe los tokens --tblr-* para el color primario. */
:root {
  --brand-500: #b11123;
  --brand-700: #7f0e18;
  --brand-gold: #d4a017;
  --tblr-primary: var(--brand-500);
  --tblr-primary-rgb: 177, 17, 35;
}

/* La pantalla de login cambia de clase de body entre versiones - cubre ambas. */
body.page-login,
body.welcome-anonymous,
body[class*="login"] {
  min-height: 100vh;
  background-color: #140104 !important;
  background-image:
    linear-gradient(145deg, rgba(16,0,0,.74) 2%, rgba(127,14,24,.56) 60%, rgba(212,160,23,.34) 100%),
    url("/front/logos/login-bg.jpg") !important; /* hospeda local, evita un URL externo */
  background-size: cover !important;
  background-position: center !important;
  background-attachment: fixed !important;
}

/* Los colores de GLPI ganan por especificidad: necesitas !important. */
body[class*="login"] .btn-primary {
  border: 1px solid var(--brand-gold) !important;
  background: linear-gradient(180deg, var(--brand-500), var(--brand-700)) !important;
  color: #fff !important;
}

/* El pie del login es .copyright (no un id/clase obvia). */
body[class*="login"] .copyright { color: #fff6da !important; }

/* fixed pesa en movil: cambia a scroll en el telefono. */
@media (max-width: 767.98px) {
  body[class*="login"] { background-attachment: scroll !important; }
}

La trampa de la herencia: por qué el login queda sin tema

Aquí está el detalle que solo aparece cuando operas: la pantalla de login corre antes de cualquier autenticación, así que no existe entidad activa en ese momento. GLPI resuelve el aspecto pre-login por la entidad raíz (id 0). Si aplicaste el CSS en una entidad hija - la del cliente, por ejemplo - el panel interno sí toma la marca, pero la página de login queda por defecto, porque nunca "entra" en esa entidad. La regla práctica que adoptamos: el tema de login va en la entidad raíz; la personalización por cliente que solo debe aparecer tras el login puede vivir en la entidad hija, heredada hacia abajo. Como el campo tiene herencia, lo que pones en la raíz cae a todas las hijas, salvo que alguna lo sobrescriba.

Checklist de producción

1. Versiona el CSS anterior antes de cualquier cambio (guarda el texto del campo).
2. Aplica el tema de login en la entidad raíz; la personalización pos-login puede ir en la entidad hija.
3. Activa enable_custom_css antes de pegar - si no, el editor queda bloqueado.
4. Hospeda la imagen de fondo localmente (un Documento en GLPI o un archivo servido por el propio host); un URL externo se rompe por CSP, mixed-content o indisponibilidad.
5. Prueba con perfil de técnico y de solicitante, en escritorio y móvil.
6. Comprueba el contraste del formulario y del botón (accesibilidad); ten el rollback listo.

Trampas de campo

Tres cosas nos costaron tiempo en cliente y se volvieron FAQ interno. Primera: el color sin !important no cuaja - la hoja de estilos de Tabler carga con especificidad alta, y tu override necesita ganar. Segunda: la imagen de fondo por URL externo es frágil; en un entorno con Content-Security-Policy restrictiva o sin salida a internet, el wallpaper simplemente no carga y el login queda negro - hospeda el archivo en el propio servidor. Tercera: no confundas la personalización por entidad con el CSS global de GLPI (Configuración > General); ambos existen, y mezclarlos se vuelve un dolor de cabeza de precedencia. Documenta qué capa lleva qué regla.

Próximo paso

Estandarizar la marca en GLPI es rutina en nuestra operación - del login al tema interno, con rollback controlado. Si quieres el parque de tu cliente con la identidad correcta sin tocar el core, habla con el equipo.

Revisado por el equipo de NexTool Solutions.