Различия

Показаны различия между двумя версиями страницы.

--- icinga:icinga-web2-how-to-create-custom-theme [05.06.2017 20:32] – создано Алексей Максимов
+++ icinga:icinga-web2-how-to-create-custom-theme [05.06.2017 21:10] (текущий) – Алексей Максимов
@@ Строка 1: / Строка 1: @@
 ===== Как создать собственную тему оформления Icinga Web 2 =====
+{{:icinga:pasted:20170605-210654.png }} Используемая в конфигурации по умолчанию тема оформления в **Icinga Web 2** имеет набор цветовых настроек и шрифтов, которые могут нравится не всем. Представленный же на выбор администратора набор тем оформления также может показаться скудноватым. Если при этом возникает желание как-то видоизменить тему оформления под свои предпочтения, то для этого потребуется базовый набор знаний по работе с HTML/CSS.
+Имеющийся на выбор в веб-интерфейсе Icinga Web набор тем представляет собой ни что иное, как перечень файлов, расположенных в каталоге ''/usr/share/icingaweb2/public/css/themes/''
+<HTML><pre style="padding:3px;"><div style="background:#5a5a62;color:#ffffff;padding:10px;"># ls -la  /usr/share/icingaweb2/public/css/themes/
+-rw-r--r-- 1 root root 2742 Jan 18 17:27 high-contrast.less
+-rw-r--r-- 1 root root 1485 Jan 18 17:27 Winter.less</div></pre></HTML>
+Поэтому для того, чтобы создать собственную тему оформления, достаточно создать копию файла любого из имеющихся в этом каталоге файлов тем, задав ему своё имя. Например, давайте создадим тему "**my**" скопировав все настройки темы "**high-contrast**", после чего откроем наш файл темы на редактирование с подсветкой синтаксиса в формате CSS:
+<HTML><pre style="padding:3px;"><div style="background:#5a5a62;color:#ffffff;padding:10px;"># cd /usr/share/icingaweb2/public/css/themes/
+# cp ./high-contrast.less ./my.less
+# nano -Y css /usr/share/icingaweb2/public/css/themes/my.less</div></pre></HTML>
+Отредактируем файл темы под свои предпочтения, затем перейдём в веб-интерфейс Icinga Web в меню навигации **Configuration** > **Application** - вкладка **General**. Здесь в выпадающем списке тем выберем созданную тему и сохраним изменения
+{{ :icinga:pasted:20170605-205242.png }}
+После обновления веб-страницы в браузере (F5) получим желаемый результат. Например, в данном примере используется цветовая гамма отображения шрифтов, как в теме по умолчанию, и тёмно-серая тема оформления элементов, как в контрастной теме:
+{{ :icinga:pasted:20170605-205801.png }}