Como configurar a tela de login do GLPI com CSS por entidade

Resumo

Neste guia você vai configurar a tela de login do GLPI usando CSS na entidade, sem editar arquivos core e sem depender de plugin para tema visual.

Também mostramos um exemplo completo de tema Homem de Ferro (vermelho e dourado) com imagem de fundo estática.

Por que fazer via CSS de entidade (e não via plugin)?

A customização por CSS na entidade é mais adequada para identidade visual porque:

1. Controla qualquer elemento visual da interface, sem ficar limitado ao que um plugin expõe.
2. Evita dependência de compatibilidade e ciclo de atualização de plugins.
3. Reduz superfície de risco funcional (o foco é visual, sem alterar regra de negócio).
4. Permite rollout e rollback rápido, direto no próprio GLPI.

Em resumo: para personalização visual, o CSS da entidade geralmente oferece gama de customização superior ao uso de plugins de tema.

Onde configurar no GLPI

No GLPI, acesse:

Configurar > Entidades > [sua entidade] > Customização de UI > CSS personalizado

Cole o CSS, salve e recarregue a página de login.

CSS pronto: login Homem de Ferro (vermelho + dourado)

Arquivo de referência:
./anexos/login_homem_de_ferro.css

/*
  Tema de login GLPI - Homem de Ferro (vermelho e dourado)
  Aplicacao: Configurar > Entidades > [sua entidade] > Customizacao de UI > CSS personalizado
  Data: 2026-02-23
*/

:root {
  --ns-iron-red-900: #220206;
  --ns-iron-red-700: #7f0e18;
  --ns-iron-red-500: #b11123;
  --ns-iron-gold-500: #d4a017;
  --ns-iron-gold-300: #f2cc4d;
  --ns-iron-text: #fff6da;

  --tblr-primary: var(--ns-iron-red-500);
  --tblr-primary-rgb: 177, 17, 35;
  --tblr-primary-fg: #ffffff;
  --tblr-btn-color: var(--ns-iron-red-500);
  --tblr-btn-color-interactive: #d4142a;
  --tblr-btn-color-text: #ffffff;
}

body.page-login,
body.welcome-anonymous,
body.login,
body[class*="login"] {
  min-height: 100vh;
  background-color: #140104 !important;
  background-image:
    linear-gradient(
      145deg,
      rgb(16 0 0 / 74%) 2%,
      rgb(79 8 17 / 56%) 36%,
      rgb(212 160 23 / 34%) 100%
    ),
    url("https://wallpapers.com/images/hd/iron-man-comics-1920-x-1200-wallpaper-fipgdbe78a8hm1gr.jpg") !important;
  background-position: center center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important;
}

body.page-login .card.main-content-card,
body.welcome-anonymous .card.main-content-card,
body.login .card,
body[class*="login"] .card {
  border: 1px solid rgb(242 204 77 / 65%) !important;
  background: linear-gradient(180deg, rgb(26 2 6 / 88%), rgb(14 1 4 / 90%)) !important;
  box-shadow:
    0 16px 45px rgb(0 0 0 / 48%),
    0 0 0 1px rgb(212 160 23 / 20%) inset;
}

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;
}

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 / 40%) !important;
  background-color: rgb(45 7 12 / 70%) !important;
}

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;
}

body.page-login .btn-primary,
body.welcome-anonymous .btn-primary,
body.login .btn-primary,
body[class*="login"] .btn-primary {
  border: 1px solid #f2cc4d !important;
  color: #ffffff !important;
  background: linear-gradient(180deg, #c01226 0%, #8e0f1d 100%) !important;
}

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.08);
}

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

1) Tela de entidade (onde configurar o CSS)

2) Login desktop com tema Homem de Ferro

3) Login mobile com tema Homem de Ferro

Boas práticas de produção

1. Sempre versione o CSS antes de alterar.
2. Faça teste com perfil técnico e solicitante.
3. Valide desktop e mobile.
4. Documente origem/licença da imagem usada no background.
5. Tenha rollback pronto (colar o CSS anterior e salvar).