Публикация

Меняем цветовую схему в bpm'online 7.4

Рассмотрим пример, как можно легко и просто поменять css-стили в bpm'online.
Например, нам необходимо изменить цвет левой панели с разделами.
Большинство css-стилей в bpm'online 7.3 и выше вынесены в отдельный модуль - CommonCSSV2. Кроме стилей в нем ничего нет, поэтому его легко заместить, чтобы поменять какие-либо из базовых стилей.
Для того, чтобы понять, какие стили применяются к тем или иным компонентам можно воспользоваться консолью браузера и сразу попробовать применить другие стили:

Попробуем изменить цвет:

Уже неплохо, но хотелось бы также поменять и цвета элементов списка. Вот они:

Итак, определились, какие css-классы нужно менять:

.ts-sidebar-list {
         background-color: #357C29;
}
.left-panel {
         background-color: #357C29;
}

Несмотря на то, что некоторые классы определены не в CommonCSSV2:

мы все равно можем переопределить их там же.

Стили определены на вкладке LESS модуля. Вот класс .left-panel, который нужно переопределить:

Итак, мы добавляем замещающий клиентский модуль для CommonCSSV2 в конфигурации в пользовательском пакете:

Сохраняем и переоткрываем. Теперь там появилась вкладка LESS. Первым делом копируем туда весь код из базового модуля:

Добавляем в конец

.ts-sidebar-list {
         background-color: #357C29;
}
.left-panel {
         background-color: #357C29;
}

Сохраняем (публикуем). Возвращаемся к пользовательскому интерфейсу, чистим кэш и перезагружаем страницу:

Нравится

Поделиться

2 комментария

Здравствуйте, скажите пожалуйста как найти этот LESS модуль в настройках? Версия 7.4.1

Антон, добрый день!

модуль называется CommonCSSV2. А LESS это таблица стилей.
Открываете в конфигурации объект "CommonCSSV2" (Рис. 1).

И в самом объекте есть вкладка "LESS".

Показать все комментарии