La marca no termina en la pantalla de login. Cuando el cliente quiere su identidad visual dentro de GLPI - en el menú y en la navegación diaria - el camino sostenible es el CSS por entidad, y no un plugin de tema más para mantener. El truco no es escribir CSS bonito: es elegir qué NO personalizar para no romper la operación. En esta guía mostramos cómo aplicar un tema interno (usamos una paleta inspirada en Iron Man, rojo y dorado) manteniendo formularios, colores de estado e indicadores en el estilo nativo de GLPI.
Por qué CSS por entidad y no un plugin de tema
Todo plugin visual se convierte en deuda de mantenimiento: en cada actualización de GLPI rezas para que el tema siga siendo compatible. El CSS por entidad no tiene ese costo. Es nativo, se guarda en la base de datos (no en un archivo que la actualización sobrescribe) y por eso sobrevive a las actualizaciones del núcleo. Y como es por entidad, cada sucursal, departamento o cliente puede tener su propia identidad, con herencia recursiva de las entidades padre a las hijas.
En el soporte de parques de clientes, esa es la diferencia que importa: cero dependencia extra para revalidar en cada versión. Entregas identidad visual sin sumar otra pieza al inventario de cosas que pueden romperse en la próxima actualización.
Dónde guarda GLPI el CSS
En GLPI, el campo de CSS personalizado de la entidad está en Configurar > Entidades > [tu entidad] > Personalización de UI (la etiqueta exacta varía según la versión). Pega el CSS, guarda y actualiza las pantallas internas. Como el contenido se guarda en la base de datos, no se ve afectado cuando una actualización reemplaza archivos del sistema, y el rollback es trivial: basta con restaurar el texto anterior.
La herencia recursiva es el detalle que ahorra trabajo: define la identidad base en la entidad raíz y solo sobrescribe en las hijas cuando necesites una variación. Para aislar una entidad específica, aplica el CSS directamente en ella.
El alcance que sostiene: menú sí, operación no
La regla que aprendimos a golpes es simple: personalización visual pesada solo en áreas no operativas. El menú lateral y la barra superior llevan identidad y no significado de dato; los colores de estado, los distintivos de SLA y los campos de formulario llevan información que el técnico decodifica en milisegundos. Tocar esos colores sabotea la lectura de la pantalla.
| Elemento de la UI | ¿Personalizar? | Por qué |
|---|---|---|
| Menú lateral (navegación) | Sí | Área de identidad; no lleva semántica de dato |
| Barra superior / cabecera | Con cautela | Color de fondo ok; conserva íconos de estado y búsqueda |
| Tarjetas de formulario | No | Foco de escritura y legibilidad sobre estética |
| Colores de estado (nuevo, asignado, resuelto) | Nunca | El técnico lee el estado por el color antes del texto |
| Distintivos de SLA e indicadores | Nunca | Un rojo de SLA vencido debe seguir siendo rojo |
| Botón de acción primaria | Con cautela | Se puede tematizar manteniendo contraste AA |
El CSS del tema (solo el interior)
Este es el núcleo del tema aplicado al menú y a la navegación. Observa el comentario final: lo que dejamos fuera importa tanto como lo que estilizamos.
/* Tema interior de GLPI - paleta Iron Man (rojo y dorado)
Aplicar en: Configurar > Entidades > [tu entidad] > Personalizacion de UI
Regla de oro: solo el menu y la navegacion. Nada de formulario ni estado. */
:root {
--ns-iron-red-900: #250108;
--ns-iron-red-500: #bc1023;
--ns-iron-gold-500: #d4a017;
--ns-iron-text: #fff6da;
/* Logo servido DESDE DENTRO de GLPI - nunca hotlink de un sitio externo */
--glpi-logo-light: url("/pics/marca-cliente.png");
--glpi-logo-dark: url("/pics/marca-cliente.png");
}
/* Menu lateral - area segura para tematizar */
#navbar-menu, .sidebar, aside[role="navigation"] {
background: linear-gradient(180deg, #220307 0%, #170206 48%, #110104 100%) !important;
border-right: 1px solid rgb(212 160 23 / 18%) !important;
}
.sidebar #navbar-menu .nav-link { color: var(--ns-iron-text) !important; }
/* Elemento activo en dorado - aun dentro de la navegacion */
.sidebar #navbar-menu .nav-item .nav-link.active {
color: #fff8e3 !important;
background: linear-gradient(90deg, rgb(212 160 23 / 22%), rgb(212 160 23 / 6%));
border-left: 3px solid var(--ns-iron-gold-500);
}
/* NO tocamos a proposito: colores de estado, distintivos de SLA,
formularios y tarjetas operativas. Quedan en el estilo nativo de GLPI. */La trampa de campo: imágenes externas y exceso de !important
El error más común que corregimos en temas de cliente es el hotlink de imagen externa. Alguien pega en el CSS un fondo o un logo que apunta a un sitio cualquiera de internet, y funciona el día de la prueba. Luego se rompe por tres motivos, siempre en el peor momento: la política de seguridad de contenido (CSP) bloquea el img-src externo, el host de terceros se cae o empieza a limitar el acceso, o GLPI corre en HTTPS y la imagen en HTTP se vuelve contenido mixto que el navegador descarta.
En soporte vimos un tema que traía el logo de un CDN público de imágenes; un viernes por la noche el cliente endureció la CSP y la cabecera apareció sin logo en producción. La causa no era GLPI, era el hotlink. Desde entonces la regla es estricta: todo recurso visual servido desde el propio GLPI (la carpeta de imágenes del sistema o distribuido por un plugin) o embebido como data URI para logos pequeños. El segundo error es repartir !important sobre .form-control y los colores de estado, lo que rompe el modo oscuro y la legibilidad. Restringe el !important al menú.
Checklist antes de publicar
- Copia el CSS actual de la entidad a un archivo de rollback antes de sobrescribir.
- Aplica primero en una entidad de prueba, nunca directo en la raíz de producción.
- Recorre panel, lista de tickets, formulario de ticket, usuarios e informes.
- Prueba el modo oscuro y la vista móvil del tema.
- Confirma que todos los recursos son internos (sin hotlink externo).
- Valida el contraste del texto contra el fondo (apunta a WCAG AA).
Con ese alcance, el tema entrega identidad y se mantiene invisible para la operación: el menú se vuelve del cliente y el resto de GLPI sigue siendo el GLPI que el técnico ya sabe leer.
Próximo paso
La personalización de la interfaz es parte del soporte que hacemos junto a NexTool. Si quieres estandarizar la identidad de GLPI sin comprometer la operación, habla con el equipo.
Revisado por el equipo de NexTool Solutions.
