Настройка стилей интерфейса системы

Администратору системы (admin) предоставляется возможность настройки внешнего вида приложения средствами пользовательского интерфейса. Для настройки внешнего вида приложения необходимо перейти на страницу «Настройки».

_images/239.png

Затем выбрать «Внешний вид приложения» => «Редактировать внешний вид приложения».

_images/240.png

Откроется страница редактирования внешнего вида приложения (/project/description/).

_images/158.png

Логотипы

На данной странице можно настроить:

  • Название системы (поле «Описание проекта (Заголовок)»).
  • Логотип (файл-картинка) – файл, который будет логотипом системы (кнопка «Выберите файл»). Рекомендуемый размер изображения: 100*100 px.
  • Широкий логотип (файл-картинка) – логотип при открытом меню.
  • Логотип (файл-картинка) – логотип страницы авторизации.
  • Favicon (файл-картинка) – значок, отображаемый перед названием страницы во вкладке браузера, закладках.

Дополнительный css

В поле «Дополнительный css» возможна настройка стенда при помощи задания дополнительных стилей css. На любой странице системы к элементу body страницы приписываются классы:

<body class="path-URL user-USER_ID role-ROLE_ID">...</>

Здесь:

path-URL
URL - это текущий path, в котором / заменены на -
user-USER_ID
где USER_ID - id текущего пользователя
role-ROLE_ID
где ROLE_ID - id текущей роли

Если необходимо изменить стили для конкретной страницы, раздела, конкретного пользователя или роли, то к этим данным возможно обратиться через соответствующие классы тега body. Любой класс (вида .className {}; ), который описывается в project/desciption, при необходимости можно сделать видимым только на определенной странице (или при авторизации под определенным пользователем). Для этого перед стилем из ПД пишется название класса (через пробел), которое будет определять где (для кого) необходимо применять эти стили:

.path-URL .className {
  //стили пользователя
}

Примеры:

  • Размер и отступы заголовка стенда, верхнего меню:

    #branding h1 a { height: 5px; padding-top: 10px; padding-left: 100px; font-size: 40px; } #top-menu { padding-left: 110px; }
    
  • На странице дашбордов необходимо скрыть шапку (класс .header_wrap):

    .path-dashboard .header_wrap {display: none;}
    
  • То же самое, но конкретно для администратора:

    .user-85 .header_wrap {display:none;}
    

Таким образом, перед каждым стилем, который необходимо изменить, существует возможность указать тот объект, для которого это необходимо изменить: конкретный отчет, пользователь и т.д.

Дополнительный JavaScript

Пользователю предоставляется возможность настроить систему, используя свои js-функции и методы, которые будут вставлены в тег <script> страницы. Например, вставка текста на странице, задание анимации, изменение структуры html и т.д.