Como customizar o interior do GLPI com CSS por entidade

Resumo

Neste artigo mostramos como aplicar um tema interno do GLPI inspirado no Homem de Ferro, usando apenas o CSS da entidade. Depois dos ajustes de usabilidade, o tema foi mantido de forma mais segura: o menu lateral permanece customizado e as areas operacionais, formularios, topo e indicadores voltam ao padrao visual do GLPI.

O objetivo e dar identidade visual sem comprometer leitura e operacao.

Por que customizar o interior do GLPI com CSS?

Quando a empresa quer ir alem do login e levar a identidade visual para o uso diario, o CSS por entidade e o caminho mais flexivel. Ele permite padronizar a experiencia sem adicionar mais uma camada de manutencao com plugins visuais.

No caso deste exemplo, usamos a linguagem visual do Homem de Ferro com:

1. Vermelho metalico e dourado como base do tema.
2. Menu lateral escuro com destaque dourado no item ativo.
3. Areas principais do sistema preservadas no estilo padrao do GLPI.
4. Indicadores, badges e campos operacionais sem override visual.
5. Tema aplicado com escopo controlado para nao degradar usabilidade.

Onde aplicar o CSS no GLPI

No GLPI, acesse:

Configurar > Entidades > [sua entidade] > Customizacao de UI > CSS personalizado

Cole o CSS, salve e atualize as telas internas.

/*
  Tema de login GLPI - Iron Man estilo HQ
  Aplicacao: Configurar > Entidades > [sua entidade] > Customizacao de UI
  Data: 2026-02-23
*/

/* Base de identidade visual do 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);
}

/* Fundo do login com sobreposicao vermelha/dourada */
body.page-login,
body.welcome-anonymous,
body.login,
body[class*="login"] {
  min-height: 100vh;
  background-color: var(--ns-iron-red-950) !important;
  background-image:
    linear-gradient(
      145deg,
      rgb(20 0 4 / 78%) 0%,
      rgb(93 8 19 / 58%) 38%,
      rgb(212 160 23 / 30%) 100%
    ),
    radial-gradient(circle at 78% 24%, rgb(255 215 90 / 21%) 0 18%, transparent 42%),
    radial-gradient(circle at 20% 78%, rgb(188 16 35 / 28%) 0 24%, transparent 56%),
    var(--ns-iron-login-bg) !important;
  background-position: center center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important;
  overflow: hidden !important;
}

/* Textura leve para dar aspecto de HQ sem carregar a leitura */
body.page-login::before,
body.welcome-anonymous::before,
body.login::before,
body[class*="login"]::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.24;
  background-image:
    radial-gradient(circle, rgb(255 255 255 / 22%) 1px, transparent 1px),
    radial-gradient(circle, rgb(0 0 0 / 18%) 1px, transparent 1px);
  background-size: 6px 6px, 9px 9px;
  background-position: 0 0, 3px 3px;
  mix-blend-mode: soft-light;
}

/* Brilho superior para reforcar o visual do login */
body.page-login::after,
body.welcome-anonymous::after,
body.login::after,
body[class*="login"]::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(circle at 50% 18%, rgb(188 238 255 / 14%) 0 11%, transparent 26%),
    radial-gradient(circle at 50% 18%, rgb(111 216 255 / 20%) 0 6%, transparent 16%);
}

/* Card principal do login */
body.page-login .card.main-content-card,
body.welcome-anonymous .card.main-content-card,
body.login .card,
body[class*="login"] .card {
  position: relative;
  z-index: 1;
  border: 1px solid rgb(255 211 90 / 70%) !important;
  background:
    linear-gradient(180deg, rgb(40 2 9 / 88%), rgb(18 1 5 / 92%)) !important;
  box-shadow:
    0 18px 46px rgb(0 0 0 / 52%),
    0 0 0 1px rgb(212 160 23 / 24%) inset,
    0 0 18px rgb(111 216 255 / 16%);
}

/* Logo ajustado para nao cortar nem dominar o card */
body.page-login .glpi-logo,
body.welcome-anonymous .glpi-logo,
body.login .glpi-logo,
body[class*="login"] .glpi-logo {
  width: min(260px, 68vw) !important;
  height: 88px !important;
  margin: 0 auto 10px auto !important;
  background-image: var(--ns-iron-logo) !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
  display: block !important;
  color: transparent !important;
  font-size: 0 !important;
  text-indent: -9999px !important;
  overflow: hidden !important;
  filter:
    drop-shadow(0 0 8px rgb(255 211 90 / 24%))
    drop-shadow(0 0 20px rgb(212 160 23 / 24%));
}

/* Remove camadas extras do logo nativo quando o tema injeta imagem */
body.page-login .glpi-logo::before,
body.page-login .glpi-logo::after,
body.welcome-anonymous .glpi-logo::before,
body.welcome-anonymous .glpi-logo::after,
body.login .glpi-logo::before,
body.login .glpi-logo::after,
body[class*="login"] .glpi-logo::before,
body[class*="login"] .glpi-logo::after {
  content: none !important;
  display: none !important;
}

/* Tipografia do card de login */
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;
}

/* Campos do login */
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 / 48%) !important;
  background-color: rgb(56 8 14 / 74%) !important;
}

/* Foco de campos do login */
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;
}

/* Botao principal do login */
body.page-login .btn-primary,
body.welcome-anonymous .btn-primary,
body.login .btn-primary,
body[class*="login"] .btn-primary {
  border: 1px solid var(--ns-iron-gold-300) !important;
  color: #ffffff !important;
  background: linear-gradient(180deg, #d1172d 0%, #900d1c 100%) !important;
  box-shadow:
    0 6px 16px rgb(0 0 0 / 30%),
    0 0 0 1px rgb(212 160 23 / 22%) inset;
}

/* Hover do botao principal */
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.1);
}

/* Links auxiliares do login */
body.page-login a,
body.welcome-anonymous a,
body.login a,
body[class*="login"] a {
  color: var(--ns-arc-blue-strong) !important;
  text-shadow: 0 0 8px rgb(111 216 255 / 24%);
}

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

  body.page-login .glpi-logo,
  body.welcome-anonymous .glpi-logo,
  body.login .glpi-logo,
  body[class*="login"] .glpi-logo {
    width: min(220px, 62vw) !important;
    height: 72px !important;
  }
}

/*
  Interior GLPI - Iron Man HQ
  Foco: menu, topbar, cards, tabs, tabelas e formularios internos.
*/

/* Tokens aplicados apenas para a navegacao interna */
:root,
html[data-glpi-theme-dark="1"] {
  --ns-iron-shell-red: #86111e;
  --ns-iron-shell-red-strong: #b81428;
  --ns-iron-shell-gold: #d4a017;

  --glpi-mainmenu-bg: #180408;
  --glpi-mainmenu-fg: #f8f0d7;
  --glpi-mainmenu-active-bg: rgb(212 160 23 / 14%);
}

/* Menu lateral com identidade Homem de Ferro */
#vertical_menu,
#menu,
.sidebar,
aside[role="navigation"] {
  background:
    radial-gradient(90% 36% at 50% -8%, rgb(255 211 90 / 10%) 0%, transparent 68%),
    linear-gradient(180deg, #220307 0%, #170206 48%, #110104 100%) !important;
  border-right: 1px solid rgb(212 160 23 / 18%) !important;
  box-shadow:
    inset -1px 0 0 rgb(255 211 90 / 7%),
    inset 0 1px 0 rgb(255 255 255 / 3%);
}

/* Cor base de links e icones do menu */
.sidebar #navbar-menu .nav-link,
.sidebar #navbar-menu .nav-link .menu-label,
.sidebar #navbar-menu .nav-link .ti,
.sidebar #navbar-menu .nav-link .fa,
.sidebar #navbar-menu .nav-link .fas,
.sidebar #navbar-menu .nav-link .far {
  color: #f7edd2 !important;
}

/* Estado ativo do menu lateral */
.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-shell-gold);
  box-shadow:
    inset 0 0 0 1px rgb(255 211 90 / 10%),
    0 0 14px rgb(255 211 90 / 10%);
}

/* Estado hover do menu lateral */
.sidebar #navbar-menu .nav-item:hover .nav-link,
.sidebar #navbar-menu .nav-link:hover {
  color: #fff8e3 !important;
  background: linear-gradient(90deg, rgb(184 20 40 / 24%), rgb(212 160 23 / 6%));
}

/* Preserva badges, indicadores, topo, cards, formularios e area de trabalho
   com as cores nativas do GLPI para nao comprometer usabilidade. */

O que esse tema altera no interior

1. Menu lateral com fundo vinho escuro e ativo em dourado.
2. Navegacao com identidade visual mais forte sem alterar fluxo operacional.
3. Topo, cards, formularios e tabelas mantidos no padrao visual do GLPI.
4. Indicadores e badges mantidos com as cores nativas do GLPI.
5. Escopo de customizacao reduzido para evitar perda de usabilidade.

Capturas de tela (Playwright)

1) Dashboard com o tema aplicado

2) Tela de chamados

Boas praticas

1. Restrinja a customizacao visual pesada ao menu e a areas nao operacionais.
2. Teste sempre dashboard, tickets, usuarios e relatorios antes de publicar.
3. Preserve formularios, cores de status e componentes criticos no padrao do GLPI.
4. Mantenha backup do CSS anterior para rollback rapido.