NexTool Solutions

Бренд не заканчивается на экране входа. Когда клиент хочет видеть фирменный стиль внутри GLPI — в меню и в повседневной навигации, — надёжный путь — это CSS для каждой организации, а не ещё один плагин темы, который придётся поддерживать. Секрет не в том, чтобы написать красивый CSS, а в том, чтобы выбрать, что НЕ настраивать, чтобы не нарушить работу. В этом руководстве показано, как применить внутреннюю тему (мы используем палитру в стиле «Железного человека», красную с золотым), сохранив формы, цвета статусов и индикаторы в стандартном виде GLPI.

Почему CSS для организации, а не плагин темы

Любой визуальный плагин становится долгом по сопровождению: при каждом обновлении GLPI остаётся надеяться, что тема по-прежнему совместима. У CSS для организации такой цены нет. Он встроенный, хранится в базе данных (а не в файле, который перезапишет обновление) и поэтому переживает обновления ядра. А поскольку он задаётся для организации, у каждого филиала, отдела или клиента может быть свой стиль, с рекурсивным наследованием от родительских организаций к дочерним.

При сопровождении клиентских инсталляций важна именно эта разница: никаких дополнительных зависимостей, которые нужно перепроверять с каждой версией. Вы даёте фирменный стиль и не добавляете ещё один элемент в список того, что может сломаться при следующем обновлении.

Где GLPI хранит CSS

В GLPI поле пользовательского CSS организации находится в Configurar > Entidades > [sua entidade] > Customização de UI (точная подпись зависит от версии). Вставьте CSS, сохраните и обновите внутренние экраны. Поскольку содержимое хранится в базе данных, оно не затрагивается, когда обновление заменяет системные файлы, а откат прост: достаточно вернуть прежний текст.

Рекурсивное наследование — деталь, которая экономит труд: задайте базовый стиль в корневой организации и переопределяйте его в дочерних только тогда, когда нужен вариант. Если нужно изолировать конкретную организацию, примените CSS непосредственно к ней.

Надёжные границы: меню — да, рабочие элементы — нет

Правило, которое мы усвоили на собственных ошибках, простое: серьёзная визуальная настройка — только в нерабочих областях. Боковое меню и верхняя панель несут фирменный стиль и не несут смысла данных; а цвета статусов, бейджи SLA и поля форм несут информацию, которую специалист считывает за миллисекунды. Менять эти цвета — значит саботировать чтение экрана.

CSS темы (только внутренний интерфейс)

Это ядро темы, применённой к меню и навигации. Обратите внимание на последний комментарий: то, что мы оставили за рамками, так же важно, как и то, что мы стилизовали.

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

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

  /* Logo servida DE DENTRO do GLPI - nunca hotlink de 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 tocamos de proposito: cores de status, badges de SLA,
   formularios e cards operacionais. Ficam no padrao nativo do GLPI. */

Практическая ловушка: внешние изображения и избыток !important

Самая частая ошибка, которую мы исправляем в клиентских темах, — хотлинк внешних изображений. Кто-то вставляет в CSS фон или логотип, ссылающийся на случайный сайт в интернете, и в день проверки это работает. Потом всё ломается по одной из трёх причин, и всегда в самый неподходящий момент: политика безопасности контента (CSP) блокирует внешний img-src, сторонний хост перестаёт работать или начинает ограничивать доступ, либо GLPI работает по HTTPS, а изображение по HTTP становится смешанным содержимым и отбрасывается браузером.

При сопровождении мы видели тему, которая загружала логотип с публичного CDN изображений; в пятницу вечером клиент ужесточил CSP, и заголовок в продуктиве остался без логотипа. Причина была не в GLPI, а в хотлинке. С тех пор правило жёсткое: все визуальные ресурсы отдаются изнутри самого GLPI (из системной папки изображений или через плагин) или встраиваются как data URI для небольших логотипов. Вторая ошибка — расставлять !important поверх .form-control и цветов статусов, что ломает тёмный режим и читаемость. Ограничьте !important меню.

Чек-лист перед публикацией

1. Перед перезаписью скопируйте текущий CSS организации в файл для отката.
2. Сначала примените в тестовой организации, никогда сразу в корне продуктива.
3. Пройдите по панели, списку заявок, форме заявки, пользователям и отчётам.
4. Проверьте тему в тёмном режиме и в мобильном представлении.
5. Убедитесь, что все ресурсы внутренние (никаких внешних хотлинков).
6. Проверьте контраст текста относительно фона (ориентир — WCAG AA).

При таких границах тема даёт фирменный стиль и остаётся незаметной для работы: меню становится клиентским, а остальной GLPI остаётся тем GLPI, который специалист уже умеет читать.

Следующий шаг

Настройка интерфейса — часть сопровождения, которое мы выполняем вместе с NexTool. Если вы хотите стандартизировать фирменный стиль GLPI без ущерба для работы, свяжитесь с командой.

Проверено командой NexTool Solutions.