Интерфейс «Зефир»

Доступ к работе с модулем по умолчанию есть только у администраторов портала. При необходимости в настройках модуля можно добавить группы пользователей, которые смогут менять оформление портала. Подробнее об этом написано в отдельной статье.

Работа с модулем «Брендирование Битрикс24» выполняется в публичной части портала. Открыть настройки Брендирования можно из двух мест:

1. Через пункт в левом меню.

2. Через меню своего профиля.

Модуль «Брендирование» состоит из девяти разделов: «Настройки», «Общие», Авторизация, «Виджеты», «Шапка портала», «Кнопки», «Контент», «Другое». В этой статье приведен краткий обзор каждого раздела и его основных функций.

Раздел «Настройки»Раздел «Настройки»

В данном разделе выполняются основные настройки модуля «Брендирование». Слайдер с настройками появляется при нажатии на шестеренку (⚙️) в правом верхнем углу. Здесь доступны следующие группы настроек: «Общие настройки» и «Экспорт и импорт».

Общие настройкиОбщие настройки

1. Выключить работу модуля. Опция позволяет скрыть или показать стилизацию портала. Когда опция неактивна, модуль считается включенным и все сделанные в нем настройки видны на портале.

В этом случае на слайдере настроек стилизации отображается индикатор «Модуль включен».

Когда опция активна, модуль считается выключенным и все сделанные в нем настройки не отображаются на портале. В этом случае на слайдере настроек стилизации отображается индикатор «Модуль выключен».

Обратите внимание, что при отключении модуля все ранее сделанные настройки не сбрасываются. Данная опция не удаляет настройки стилизации, а отключает их отображение на портале.

2. Модуль работает только для Администратора. Опция позволяет скрыть настройки стилизации портала для всех пользователей кроме группы «Администраторы». Это удобно, когда в дизайн портала нужно внести предварительные изменения и оценить, как сочетаются те или иные элементы.

3. Запретить менять тему. Если опция включена, то сотрудники не смогут поменять тему портала на другую. Перед применением опции администратору рекомендуется установить всем сотрудникам единую светлую тему, при которой видны стили Брендирования. Например «Светло-серый узор», «Цветная бумага», «Роса» и т.п.

4. Сбросить все настройки по умолчанию. Эта опция очищает все настройки модуля и возвращает портал в исходное состояние, то есть в состояние на момент установки модуля. Обратите внимание, что опция не очищает CSS-стили добавленные в раздел «Дополнительно». Их нужно удалить вручную.

Экспорт и импортЭкспорт и импорт

1. Экспорт настроек. Опция позволяет скачать текущие настройки стилизации портала в виде ZIP файла. Благодаря этому можно делать резервные копии настроек, чтобы в нужный момент загрузить их обратно на портал. Например, опцию удобно использовать в случае временной смены дизайна портала в связи с мероприятием или значимой датой. В этом случае основной стиль портала можно скачать, чтобы импортировать на портал позднее.

2. Импорт настроек. С помощью этой опции на корпоративный портал можно загрузить ZIP файл с готовым дизайном. Загружать можно ранее скачанный файл с портала.

Раздел «Общие»Раздел «Общие»

Данный раздел состоит из двух блоков: «О брендировании» и «Общие настройки».

О брендированииО брендировании

В этом блоке дана краткая информация о нюансах работы с модулем. Здесь важно обратить внимание на информацию о том, что Брендирование работает только со светлыми темами портала.

Светлыми темами портала являются, например «Светло-серый узор», «Цветная бумага», «Роса» и другие. Только с подобными темами работает модуль «Брендирование». Это значит, что если одна из этих тем установлена у пользователя, он будет видеть то оформление портала, которое создано с помощью модуля.

Как установить тему портала для всех сотрудников

Светлыми являются все те темы, при включении которых шрифт на портале становится черным. Если шрифт белый — значит у пользователя включена темная тема. На темных темах стили Брендирования не выводятся.

Если пользователь установит себе одну из темных тем, то его оформление портала изменится в соответствии с этой темой. Настройки, созданные в модуле «Брендирование» в этом случае отображаться не будут. Это касается практически всех настроек: шрифтов, цветов, отображения блоков и так далее.

Исключение составляют настройки из раздела «Авторизация» и загружаемые элементы, такие как фавикон и логотип. Такие элементы будут отображаться у всех пользователей независимо от их темы портала.

У пользователя включена светлая тема. Кастомный дизайн виден

У пользователя выключена темная тема. Кастомный дизайн не виден

Общие настройкиОбщие настройки

В этом блоке выполняются основные настройки оформления портала. Здесь есть возможность:

1. Цвет фона страницы. Цвет задается в виде HEX-кода, например #9c93e5.

2. Картинка фона страницы. Поле для загрузки изображения, которое станет фоном портала. Доступны изображения в форматах JPEG и PNG.

3. Спрятать/показать виджеты: Пульс компании, Мобильное приложение, Десктоп приложение.

4. Загрузить фавикон. Фавикон — это иконка портала, которая отображается на вкладке браузера.

Раздел «Авторизация»Раздел «Авторизация»

В этом разделе собраны все настройки для страницы авторизации: цвета фона, кнопок, ссылок, логотип компании и так далее. Данный раздел включает в себя три блока: «Общие настройки», «Форма авторизации», «Правый блок с QR».

Общие настройкиОбщие настройки

В этом блоке настраиваются следующие элементы страницы авторизации:

• Логотип компании

• Картинка фона страницы (1280x300px)

• Цвет фона страницы

Форма авторизацииФорма авторизации

В этом блоке настраиваются следующие элементы:

Правый блок с QR:Правый блок с QR:

В этом блоке настраиваются следующие элементы:

Раздел «Виджеты»Раздел «Виджеты»

В данном разделе выполняется настройка виджетов, которые выводятся на корпоративном портале в разделе «Лента». Для настройки доступны следующие виджеты:

• Пульс компании

• Мои задачи

• Дни рождения

• Ближайшие события

• Важные сообщения

• Опросы

• Бизнес-процессы

• Ссылки

Раздел включает в себя блок для общей настройки всех виджетов и отдельные блоки для детальной настройки каждого из них.

Общие настройкиОбщие настройки

С помощью этого блока можно настроить единое оформление для всех вышеперечисленных виджетов.

Далее идут блоки для индивидуальной настройки виджетов. Индивидуальные настройки имеют приоритет выше общих — это позволяет создать свой дизайн для каждого виджета.

Пульс компанииПульс компании

Блок для настройки одноименного виджета. Для изменения доступны следующие параметры:

Мои задачиМои задачи

Блок для настройки одноименного виджета. Для изменения доступны следующие параметры:

Дни рожденияДни рождения

Блок для настройки одноименного виджета. Для изменения доступны следующие параметры:

Ближайшие событияБлижайшие события

Блок для настройки одноименного виджета. Для изменения доступны следующие параметры:

Важные сообщенияВажные сообщения

Блок для настройки одноименного виджета. Для изменения доступны следующие параметры:

Бизнес-процессыБизнес-процессы

Блок для настройки одноименного виджета. Для изменения доступны следующие параметры:

Раздел «Шапка портала»Раздел «Шапка портала»

В этом разделе находятся настройки, связанные с верхней панелью корпоративно портала, а также с левым и правым меню. Раздел состоит из следующих блоков: «Верхняя панель», «Левое меню», «Ссылки в верхнем меню», «Правый блок».

Верхняя панельВерхняя панель

В этом блоке собраны настройки шапки портала и верней панели:

Левое менюЛевое меню

В этом блоке собраны настройки левого меню Битрикс24. Для редактирования доступны следующие параметры:

Ссылки в верхнем меню (Задачи, ЖЛ)Ссылки в верхнем меню (Задачи, ЖЛ)

В этом блоке собраны настройки верхнего меню, которое расположено под шапкой портала. Настройки этого блока распространяются на верхнее меню во всех разделах портала. Например, меню в разделе «Лента», «Календарь», «Задачи и Проекты» и так далее.

Для редактирования доступны следующие параметры:

• Цвет ссылок

• Цвет ссылок (hover)

• Цвет ссылок (active)

Правый блокПравый блок

Настройки в данном блоке позволят отредактировать правый сайдбар портала: цвета и фоны иконок.

Раздел «Кнопки»Раздел «Кнопки»

В данном разделе собраны настройки кнопок и ссылок корпоративного портала. Настройки позволяют изменить цвет ссылок, кнопок и их иконок внутри кнопок. Выбрать цвет можно для всех состояний кнопки/ссылки: при наведении, без наведения, при клике.

Блок 1 (настройка ссылок)Блок 1 (настройка ссылок)

Здесь настраиваются цвета ссылок, которые выводятся в различных местах корпоративного портала.

Блок 2 (зеленые кнопки)Блок 2 (зеленые кнопки)

В этом блоке находятся настройки цвета зеленых кнопок. Выбрать цвет можно для всех состояний кнопки: при наведении, без наведения, при клике.

Блок 3 (белые и прозрачные кнопки)Блок 3 (белые и прозрачные кнопки)

Здесь можно изменить цвета всех белых и прозрачных кнопок корпоративного портала, а также текста внутри них. Такие кнопки можно встретить, например, в разделе «Календарь» и «Задачи».

Блок 4 (синие кнопки)Блок 4 (синие кнопки)

Здесь можно изменить цвета всех синих кнопок портала, а также текста внутри них.

Раздел «Контент»Раздел «Контент»

В данном разделе собраны настройки для редактирования различных элементов контента:

• Фонов важных сообщений в ленте

• Цвета формы с выбором значений

Блок «Подложки»Блок «Подложки»

Здесь располагается настройка «Цвет подложки» — это настройка позволяет менять фон у важных сообщений в ленте, а также фон сообщений при добавлении нового сотрудника.

Блок «Плашки, иконки»Блок «Плашки, иконки»

В этом блоки доступны следующие настройки:

• Цвета формы с выбором значений

Раздел «Другое»Раздел «Другое»

В данном разделе находятся две настройки: цвет выделенной папки диска и цвет шапки у виджета в задачах.

Раздел «Дополнительно»Раздел «Дополнительно»

Мы рекомендуем использовать данный раздел только опытным пользователям со знанием CSS. С помощью CSS-стилей здесь можно задавать любые желаемые стили для элементов портала. Обратите внимание: стили введенные в данном окне, перебьют основные стили шаблона. Обрамлять стили в тег \<style\> не нужно.

CSS-стили можно использовать в тех случаях, когда в настройках Брендирования нет опций для стилизации нужных вам элементов. Например, чтобы задать цвет для логотипа Битрикс24.

Пример кода для покраски данного логотипа:

/* Шапка портала - Цвет логотипа Б24 */
        .menu-items-header__logo {color: #2C92E6;}
        .menu-items-header__logo:after {background-color: #2C92E6;}
        

Пример отображения окрашенного логотипа:

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

/* Шапка портала - Цвет логотипа Б24 */
        .menu-items-header__logo {color: #fff;}
        .menu-items-header__logo:after {background-color: #fff;}
        
        /* Шапка портала - Скрытие логотипа Б24 */
        .menu-items-header__logo {display: flex;}
        
        /* Шапка портала - Цвет иконки меню */
        .menu-switcher__icon {background-color: #fff;}
        
        /* Шапка портала - Цвет текстового логотипа компании */
        .logo-text-container {color: #fff;}
        .logo-number {color: #fff;}
        .logo-number:after {background-color: #fff;}
        
        /* Шапка портала - Цвет кнопок Демо и Помощь */
        .air-header-button {background: #ffffff;}
        
        /* Шапка портала - Цвет текста у кнопок Демо и Помощь */
        .air-header-button {color: #fff;}
        
        /* Шапка портала - Цвет фона времени и иконки (no active) */
        .--ui-context-edge-light .air-user-profile__wrapper {background-color: #1587fa;}
        
        /* Шапка портала - Цвет текста времени и иконки (active) */
        .--ui-context-edge-light .air-user-profile-avatar__time {color: #ffffff;}
        .air-user-profile .air-user-profile-avatar__work-time-icon {--ui-icon-set__icon-color: #ffffff;}
        
        /* Общие - Цвет заголовков */
        .ui-toolbar-title-item {color: #fff;}
        
        /* Виджеты - Ближайшие события / Цвет иконки плюса */
        .sidebar-widget-calendar .plus-icon:after {background-color: #ffffff;}
        
        /* Виджеты - Мои задачи / Цвет иконки плюса */
        .sidebar-widget-tasks .plus-icon:after {background-color: #ffffff;}