NexTool Solutions

Personalizar o ecrã de login do GLPI é o pedido de branding mais frequente que recebemos na sustentação - e quase toda a gente começa mal, a editar o core ou a instalar um plugin de tema. O caminho limpo já existe no GLPI: CSS por entidade, um campo nativo que sobrevive a atualizações e permite reverter em segundos. Este guia mostra onde estão os campos reais (enable_custom_css e custom_css_code), porque a cor não pega sem !important, e a armadilha da herança de entidade que faz o tema do login desaparecer mesmo com o CSS gravado.

Porquê CSS por entidade (e não plugin de tema ou core)

Editar ficheiros do core resolve por uma versão e parte na atualização seguinte - o patch perde-se e fica a caçar o que mudou. Um plugin de tema resolve, mas prende o aspeto ao ciclo de atualização e à compatibilidade do plugin (na passagem para o GLPI 11, os temas de terceiros foram dos primeiros a partir). O CSS por entidade é nativo, versionável no seu próprio controlo de alterações e reversível colando o CSS anterior. Para a identidade visual - cores, logótipo, fundo do login - dá mais controlo do que qualquer plugin, porque alcança qualquer seletor da interface.

Onde configurar no GLPI

Abra o formulário da entidade em Administração > Entidades > [a sua entidade] e localize a secção de personalização de interface. Dois campos importam:

• Enable CSS customization (enable_custom_css) - uma lista pendente com herança (herda do pai, ou força ativado/desativado na entidade atual).
• CSS personalizado (custom_css_code) - o editor onde o CSS é colado.

A primeira cilada mora aqui: enquanto enable_custom_css não estiver ativo, o editor aparece bloqueado com o aviso "Custom CSS is disabled" e nada é aplicado - cola o CSS, grava, recarrega e "não funciona". Ative a lista pendente primeiro. Grave e recarregue a página de login para validar.

CSS pronto: recolorir o login pela marca

O front-end do GLPI 11 usa Tabler (sobre Bootstrap 5), portanto a forma limpa de recolorir é sobrescrever os design tokens --tblr-* em vez de caçar seletor a seletor. O exemplo abaixo aplica uma paleta de marca (vermelho e dourado), trata o fundo e cobre as várias classes de body que o ecrã de login usa entre o GLPI 10 e o 11:

/* Login por marca - colar em custom_css_code da entidade.
   GLPI 11 usa Tabler: sobrescreva os tokens --tblr-* para a cor primaria. */
:root {
  --brand-500: #b11123;
  --brand-700: #7f0e18;
  --brand-gold: #d4a017;
  --tblr-primary: var(--brand-500);
  --tblr-primary-rgb: 177, 17, 35;
}

/* O ecra de login muda de classe de body entre versoes - cubra as duas. */
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; /* aloje local, evite um URL externo */
  background-size: cover !important;
  background-position: center !important;
  background-attachment: fixed !important;
}

/* As cores do GLPI vencem por especificidade: precisa de !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;
}

/* O rodape do login e .copyright (nao um id/classe obvia). */
body[class*="login"] .copyright { color: #fff6da !important; }

/* fixed pesa em mobile: troque por scroll no telemovel. */
@media (max-width: 767.98px) {
  body[class*="login"] { background-attachment: scroll !important; }
}

A armadilha da herança: porque o login fica sem tema

Aqui está o detalhe que só aparece quando se opera: o ecrã de login corre antes de qualquer autenticação, logo não existe entidade ativa nesse momento. O GLPI resolve o aspeto pré-login pela entidade raiz (id 0). Se aplicou o CSS numa entidade filha - a do cliente, por exemplo - o painel interno até fica com a marca, mas a página de login continua padrão, porque nunca "entra" nessa entidade. A regra prática que adotamos: o tema de login vai na entidade raiz; a personalização por cliente que só precisa de aparecer depois do login pode ficar na entidade filha, herdada para baixo. Como o campo tem herança, o que puser na raiz desce para todas as filhas, a menos que uma delas sobreponha.

Checklist de produção

1. Versione o CSS anterior antes de qualquer alteração (guarde o texto do campo).
2. Aplique o tema de login na entidade raiz; a personalização pós-login pode ir na entidade filha.
3. Ative enable_custom_css antes de colar - senão o editor fica bloqueado.
4. Aloje a imagem de fundo localmente (um Documento no GLPI ou um ficheiro servido pelo próprio host); um URL externo parte por CSP, mixed-content ou indisponibilidade.
5. Teste com perfil de técnico e de requerente, em desktop e em telemóvel.
6. Confirme o contraste do formulário e do botão (acessibilidade); tenha a reversão pronta.

Armadilhas de campo

Três coisas custaram-nos tempo em cliente e viraram FAQ interno. Primeira: a cor sem !important não pega - a folha de estilo do Tabler carrega com especificidade alta, e a sua sobreposição precisa de vencer. Segunda: a imagem de fundo por URL externo é frágil; num ambiente com Content-Security-Policy restritiva ou sem saída para a internet, o fundo simplesmente não carrega e o login fica preto - aloje o ficheiro no próprio servidor. Terceira: não confunda a personalização por entidade com o CSS global do GLPI (Configuração > Geral); os dois existem, e misturá-los vira dor de cabeça de precedência. Documente que camada carrega que regra.

Próximo passo

Padronização de marca em GLPI é rotina na nossa operação - do login ao tema interno, com reversão controlada. Se quer o parque do seu cliente com a identidade certa sem tocar no core, fale com a equipa.

Revisto pela equipa NexTool Solutions.