Оформление страницы входа GLPI — самый частый запрос по брендингу, который мы получаем при сопровождении, и почти все начинают неправильно: редактируют ядро или ставят плагин темы. Чистый путь в GLPI уже есть: CSS на уровне организации — встроенное поле, которое переживает обновления и позволяет откатиться за секунды. В этом руководстве показано, где находятся реальные поля (enable_custom_css и custom_css_code), почему цвет не применяется без !important, и ловушка наследования организаций, из-за которой тема страницы входа пропадает даже при сохранённом CSS.
Почему CSS организации (а не плагин темы или ядро)
Правка файлов ядра работает одну версию и ломается при следующем обновлении — патч теряется, и вы ищете, что изменилось. Плагин темы решает задачу, но привязывает внешний вид к циклу обновлений и совместимости плагина (при переходе на GLPI 11 сторонние темы сломались одними из первых). CSS на уровне организации — встроенная возможность, его можно версионировать в собственном процессе управления изменениями и откатить, вставив предыдущий CSS. Для фирменного стиля — цветов, логотипа, фона страницы входа — он даёт больше контроля, чем любой плагин, потому что вам доступен любой селектор интерфейса.
| Подход | Переживает обновление | Откат | Область действия |
|---|---|---|---|
| Правка ядра (CSS/SCSS) | Нет (патч теряется) | Вручную и рискованно | Глобально |
| Плагин темы | Зависит от плагина | Удалить плагин | Глобально |
| CSS на уровне организации (встроенный) | Да | Вставить предыдущий CSS и сохранить | По организации, с наследованием |
Где настраивать в GLPI
Откройте форму организации в Администрирование > Организации > [ваша организация] и найдите раздел настройки интерфейса. Важны два поля:
- Enable CSS customization (
enable_custom_css) — переключатель с наследованием (наследуется от родителя, или вы принудительно включаете/выключаете его в текущей организации). - Пользовательский CSS (
custom_css_code) — редактор, куда вставляется CSS.
Первый подвох кроется здесь: пока enable_custom_css не включён, редактор заблокирован с предупреждением «Custom CSS is disabled», и ничего не применяется — вы вставляете CSS, сохраняете, перезагружаете, и «не работает». Сначала включите переключатель. Сохраните и перезагрузите страницу входа для проверки.
Готовый CSS: перекрасить страницу входа в цвета бренда
Фронтенд GLPI 11 использует Tabler (поверх Bootstrap 5), поэтому чистый способ перекрасить интерфейс — переопределить дизайн-токены --tblr-*, а не искать селектор за селектором. Пример ниже применяет фирменную палитру (красный и золотой), оформляет фон и охватывает разные классы body, которые страница входа использует в GLPI 10 и 11:
/* Brand login - paste into the entity's custom_css_code.
GLPI 11 uses Tabler: override the --tblr-* tokens for the primary color. */
:root {
--brand-500: #b11123;
--brand-700: #7f0e18;
--brand-gold: #d4a017;
--tblr-primary: var(--brand-500);
--tblr-primary-rgb: 177, 17, 35;
}
/* The login screen changes body class between versions - cover both. */
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; /* host locally, avoid an external URL */
background-size: cover !important;
background-position: center !important;
background-attachment: fixed !important;
}
/* GLPI colors win by specificity: you need !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;
}
/* The login footer is .copyright (not an obvious id/class). */
body[class*="login"] .copyright { color: #fff6da !important; }
/* fixed is heavy on mobile: switch to scroll on the phone. */
@media (max-width: 767.98px) {
body[class*="login"] { background-attachment: scroll !important; }
}Ловушка наследования: почему страница входа остаётся без темы
Вот деталь, которая проявляется только в эксплуатации: страница входа отображается до какой-либо аутентификации, поэтому активной организации в этот момент нет. Внешний вид до входа GLPI определяет по корневой организации (id 0). Если вы применили CSS в дочерней организации — например, в организации клиента, — внутренняя панель получит фирменный стиль, но страница входа останется стандартной, потому что она никогда «не заходит» в эту организацию. Практическое правило, которое мы приняли: тема страницы входа задаётся в корневой организации; оформление для конкретного клиента, которое должно появляться только после входа, можно оставить в дочерней организации с наследованием вниз. Поскольку у поля есть наследование, то, что задано в корне, распространяется на все дочерние организации, если какая-то из них не переопределит значение.
Чек-лист для продуктива
- Сохраните предыдущий CSS перед любым изменением (сохраните текст поля).
- Применяйте тему страницы входа в корневой организации; оформление после входа можно задать в дочерней организации.
- Включите
enable_custom_cssдо вставки — иначе редактор заблокирован. - Размещайте фоновое изображение локально (документ в GLPI или файл, отдаваемый самим хостом); внешний URL ломается из-за CSP, mixed content или недоступности.
- Тестируйте под профилем специалиста и инициатора, на компьютере и на мобильном устройстве.
- Проверьте контрастность формы и кнопки (доступность); держите откат наготове.
Практические ловушки
Три вещи отняли у нас время у клиентов и стали внутренним FAQ. Первая: цвет без !important не применяется — таблица стилей Tabler загружается с высокой специфичностью, и ваше переопределение должно её перебить. Вторая: фоновое изображение по внешнему URL ненадёжно; в среде со строгой Content-Security-Policy или без выхода в интернет фон просто не загружается, и страница входа остаётся чёрной — размещайте файл на самом сервере. Третья: не путайте настройку на уровне организации с глобальным CSS GLPI (Настройка > Общие); существуют оба, и их смешивание превращается в головную боль с приоритетами. Документируйте, какой слой отвечает за какое правило.
Следующий шаг
Стандартизация брендинга в GLPI — рутина нашей работы: от страницы входа до внутренней темы, с контролируемым откатом. Если вы хотите, чтобы среда вашего клиента выглядела в правильном фирменном стиле без вмешательства в ядро, свяжитесь с командой.
Проверено командой NexTool Solutions.
