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

Администратору Системы (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, при необходимости можно сделать видимым только на определенной странице (или при авторизации под определенным пользователем). Для этого перед стилем из 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 и т.д.