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

Администратору Системы (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;}

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

Для работы с большим объемом текста в данном поле, доступен функционал сворачивания блоков кода. Для этого необходимо заключить сворачиваемый блок в:: /{…Название блока/ Код блока /…}/ Например:

/*{...Скрытие кнопки комментариев*/
[class*="-comments"] {
   display: none!important;
}
/*...}*/

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

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