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

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

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

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

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

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

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

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

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

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

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

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

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

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

3. Сбросить все настройки по умолчанию. Эта опция очищает все настройки модуля и возвращает портал в исходное состояние, то есть в состояние на момент установки модуля. Обратите внимание, что опция не очищает 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;}