8.2. Настройка внешнего вида компонентов системы

Avanpost FAM позволяет настраивать внешний вид компонентов системы под потребности эксплуатирующей организации. Администратор обладает следующими возможностями настройки внешнего вида:

• кастомизация общего стиля продукта через настройку CSS-стилей;
• настройка логотипа и цветов элементов интерфейса в форме аутентификации.

Кастомизация CSS-стилей

Для административной консоли и личного кабинета допускается использовать произвольные CSS-стили в режиме переопределения. Это позволяет решать следующие задачи:

• скрывать элементов и блоков интерфейса.
• изменять шрифты, цветовую гамму и элементы корпоративного стиля.

Для замены стандартных CSS-стилей на кастомизированные требуется выполнить следующие действия:

1. Скопировать шаблоны по умолчанию в папку custom, расположенную по пути:
   

   cp -R /opt/idp/public/views/standard /opt/idp/public/views/custom

2. В файле conf.toml установить секцию [ui-templates]:
   

   [ui-templates]
   dir = '/opt/idp/public/views'
   bundle = 'custom'

3. Перезапустить службу Сервера FAM.
4. Скопировать файл со стилями по умолчанию, расположенный по пути

   cp -R /opt/idp/public/css/turquoise-theme.css /opt/idp/public/css/custom.css

5. Изменить путь до скопированного файла со стилями из предыдущего пункта в мастер-шаблоне, находящемся по пути:

   vi /opt/idp/public/views/custom/shared/_Layout.html

   1.  Найти данную строку (в большинстве случаев строка 11):

      <link rel="stylesheet" type="text/css" href="public/css/turquoise-theme.css">

   2.  Заменить на строку, содержащую путь с кастомизированным css-файлом:

      <link rel="stylesheet" type="text/css" href="public/css/custom.css">

6. Убедиться, что изменения применены (изменения применяются сразу после их внесения). 

Изменение оригинального логотипа и цветовой гаммы

Avanpost FAM предоставляет возможность кастомизации логотипа, отображающегося в интерфейсе пользователя и администратора. Для этого необходимо совершить следующие действия:

1. В папку /opt/idp/public/images следует скопировать новый подготовленный логотип (в данном примере наименование файла avanpost.png).
   
   
2. Отредактировать файл _LogoPartial.gohtml, подменив путь до нужного логотипа.  Так как файл нового логотипа сохранен в той же папке, достаточно заменить отмеченный на скриншоте текст на название нового логотипа.
   

   vi /opt/idp/public/views/custom/shared/_LogoPartial.gohtml

   
   
3. Изменение фона и цвета в форме аутентификации осуществляется редактированием стиля в файле custom.css, расположенном по пути:

   vi /opt/idp/public/css/custom.css

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

   .hero {
       background: hwb(0 0% 100%);
   }
   
   .button.is-link{
       background-color: #cff074;
       border-color: transparent;
       color: #cf3e3e;
   }
   .button.is-link:hover {
       background-color: #da16bf;
       color: #000000;
   }

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