NexTool Solutions

A marca não acaba no ecrã de início de sessão. Quando o cliente quer a identidade visual dentro do GLPI, no menu e na navegação do dia a dia, o caminho que se sustenta é o CSS por entidade, e não mais um plugin de tema para manter. O truque não é escrever CSS bonito: é escolher o que NÃO personalizar para não quebrar a operação. Neste guia mostramos como aplicar um tema interno (usamos uma paleta inspirada no Homem de Ferro, vermelho e dourado) mantendo formulários, cores de estado e indicadores no estilo nativo do GLPI.

Porquê CSS por entidade e não um plugin de tema

Todo o plugin visual se torna dívida de manutenção: a cada atualização do GLPI reza-se para o tema continuar compatível. O CSS por entidade não tem esse custo. É nativo, fica guardado na base de dados (não num ficheiro que a atualização substitui) e por isso sobrevive às atualizações do núcleo. E como é por entidade, cada filial, departamento ou cliente pode ter a sua própria identidade, com herança recursiva das entidades-pai para as filhas.

Na sustentação de parques de clientes, é essa a diferença que importa: zero dependências extra para revalidar em cada versão. Entrega-se identidade visual sem juntar mais uma peça ao inventário de coisas que podem quebrar na próxima atualização.

Onde o GLPI guarda o CSS

No GLPI, o campo de CSS personalizado da entidade encontra-se em Configurar > Entidades > [a sua entidade] > Personalização de UI (o rótulo exato varia conforme a versão). Cole o CSS, guarde e atualize os ecrãs internos. Como o conteúdo é gravado na base de dados, não é afetado quando uma atualização substitui ficheiros do sistema, e a reversão é trivial: basta repor o texto anterior.

A herança recursiva é o detalhe que poupa trabalho: defina a identidade base na entidade raiz e só sobreponha nas filhas quando precisar de uma variação. Para isolar uma entidade específica, aplique o CSS diretamente nela.

O âmbito que se sustenta: menu sim, operação não

A regra que aprendemos a apanhar é simples: personalização visual pesada só em áreas não operacionais. O menu lateral e a barra superior carregam identidade e não significado de dado; as cores de estado, os crachás de SLA e os campos de formulário carregam informação que o técnico descodifica em milissegundos. Mexer nessas cores sabota a leitura do ecrã.

O CSS do tema (só o interior)

Este é o núcleo do tema aplicado ao menu e à navegação. Repare no comentário final: o que deixamos de fora importa tanto como o que estilizamos.

/* Tema interior do GLPI - paleta Homem de Ferro (vermelho e dourado)
   Aplicar em: Configurar > Entidades > [a sua entidade] > Personalizacao de UI
   Regra de ouro: so o menu e a navegacao. Nada de formulario ou estado. */

:root {
  --ns-iron-red-900: #250108;
  --ns-iron-red-500: #bc1023;
  --ns-iron-gold-500: #d4a017;
  --ns-iron-text:    #fff6da;

  /* Logotipo servido DE DENTRO do GLPI - nunca hotlink de um site 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; }

/* Item ativo em dourado - ainda dentro da navegacao */
.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);
}

/* NAO mexemos de proposito: cores de estado, crachas de SLA,
   formularios e cartoes operacionais. Ficam no estilo nativo do GLPI. */

A armadilha de terreno: imagem externa e excesso de !important

O erro mais comum que corrigimos em temas de cliente é o hotlink de imagem externa. Alguém cola no CSS um fundo ou um logótipo a apontar para um site qualquer da internet, e funciona no dia do teste. Depois quebra por três motivos, sempre no pior momento: a política de segurança de conteúdo (CSP) bloqueia o img-src externo, o anfitrião de terceiros fica em baixo ou passa a limitar o acesso, ou o GLPI corre em HTTPS e a imagem em HTTP torna-se conteúdo misto que o navegador descarta.

Na sustentação vimos um tema que ia buscar o logótipo a uma CDN pública de imagens; numa sexta à noite o cliente endureceu a CSP e o cabeçalho apareceu sem logótipo em produção. A causa não era o GLPI, era o hotlink. Desde então a regra é rígida: todo o recurso visual servido de dentro do próprio GLPI (a pasta de imagens do sistema ou distribuído por um plugin) ou embutido como data URI para logótipos pequenos. O segundo erro é espalhar !important por cima de .form-control e das cores de estado, o que estraga o modo escuro e a legibilidade. Restrinja o !important ao menu.

Lista de verificação antes de publicar

1. Copie o CSS atual da entidade para um ficheiro de reversão antes de sobrepor.
2. Aplique primeiro numa entidade de teste, nunca diretamente na raiz de produção.
3. Percorra painel, lista de tickets, formulário de ticket, utilizadores e relatórios.
4. Teste o modo escuro e a vista móvel do tema.
5. Confirme que todos os recursos são internos (sem hotlink externo).
6. Valide o contraste do texto contra o fundo (aponte a WCAG AA).

Com este âmbito, o tema entrega identidade e mantém-se invisível para a operação: o menu passa a ser do cliente, e o resto do GLPI continua a ser o GLPI que o técnico já sabe ler.

Próximo passo

A personalização de interface faz parte da sustentação que fazemos com o NexTool. Se quer normalizar a identidade do GLPI sem comprometer a operação, fale com a equipa.

Revisto pela equipa NexTool Solutions.