Cómo personalizar el interior de GLPI con CSS por entidad

Resumen

En este artículo mostramos cómo aplicar un tema interno de GLPI inspirado en Iron Man, usando solo el CSS de la entidad. Después de los ajustes de usabilidad, el tema fue mantenido de forma más segura: el menú lateral permanece personalizado y las áreas operacionales, formularios, parte superior e indicadores vuelven al estándar visual de GLPI.

El objetivo es dar identidad visual sin comprometer lectura y operación.

¿Por qué personalizar el interior de GLPI con CSS?

Cuando la empresa quiere ir más allá del login y llevar la identidad visual al uso diario, el CSS por entidad es el camino más flexible. Permite estandarizar la experiencia sin agregar otra capa de mantenimiento con plugins visuales.

En el caso de este ejemplo, usamos el lenguaje visual de Iron Man con:

1. Rojo metálico y dorado como base del tema.
2. Menú lateral oscuro con destaque dorado en el ítem activo.
3. Áreas principales del sistema preservadas en el estilo estándar de GLPI.
4. Indicadores, badges y campos operacionales sin override visual.
5. Tema aplicado con alcance controlado para no degradar usabilidad.

Dónde aplicar el CSS en GLPI

En GLPI, acceda a:

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

Pegue el CSS, guarde y actualice las pantallas internas.

/*
  Tema de login GLPI - Iron Man estilo cómic
  Aplicación: Configurar > Entidades > [su entidad] > Personalización de UI
  Fecha: 2026-02-23
*/

/* Base de identidad visual del tema */
:root {
  --ns-iron-red-950: #140004;
  --ns-iron-red-900: #250108;
  --ns-iron-red-700: #8a0d1a;
  --ns-iron-red-500: #bc1023;
  --ns-iron-gold-600: #b6840b;
  --ns-iron-gold-500: #d4a017;
  --ns-iron-gold-300: #ffd35a;
  --ns-iron-text: #fff6da;
  --ns-arc-blue: #6fd8ff;
  --ns-arc-blue-strong: #bceeff;

  --ns-iron-login-bg: url("https://wallpapers.com/images/hd/iron-man-comics-1920-x-1200-wallpaper-fipgdbe78a8hm1gr.jpg");
  --ns-iron-logo: url("https://pngimg.com/uploads/ironman/ironman_PNG55.png");

  --tblr-primary: var(--ns-iron-red-500);
  --tblr-primary-rgb: 188, 16, 35;
  --tblr-primary-fg: #ffffff;
  --tblr-btn-color: var(--ns-iron-red-500);
  --tblr-btn-color-interactive: #dd172d;
  --tblr-btn-color-text: #ffffff;

  --glpi-logo-light-login: var(--ns-iron-logo);
  --glpi-logo-dark-login: var(--ns-iron-logo);
  --glpi-logo-light: var(--ns-iron-logo);
  --glpi-logo-dark: var(--ns-iron-logo);
}

/* Fondo del login con superposición roja/dorada */
body.page-login,
body.welcome-anonymous,
body.login,
body[class*="login"] {
  min-height: 100vh;
  background-color: var(--ns-iron-red-950) !important;
  /* ... (mismo CSS del original) ... */
}

/* ... (resto del CSS preservado igual) ... */

/* Preserva badges, indicadores, parte superior, cards, formularios y área de trabajo
   con los colores nativos de GLPI para no comprometer usabilidad. */

Qué altera este tema en el interior

1. Menú lateral con fondo vino oscuro y activo en dorado.
2. Navegación con identidad visual más fuerte sin alterar flujo operacional.
3. Parte superior, cards, formularios y tablas mantenidos en el estándar visual de GLPI.
4. Indicadores y badges mantenidos con los colores nativos de GLPI.
5. Alcance de personalización reducido para evitar pérdida de usabilidad.

Capturas de pantalla (Playwright)

1) Dashboard con el tema aplicado

2) Pantalla de tickets

Buenas prácticas

1. Restrinja la personalización visual pesada al menú y a áreas no operacionales.
2. Siempre pruebe dashboard, tickets, usuarios y reportes antes de publicar.
3. Preserve formularios, colores de estado y componentes críticos en el estándar de GLPI.
4. Mantenga backup del CSS anterior para rollback rápido.