Интерфейс «Legacy»

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

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

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

2. Через меню своего профиля (Блок «Тема оформления», кнопка

).

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

1. Задать шрифт на всех страницах портала. На выбор дается 4 шрифта, которые поддерживает Битрикс24:

• family-system

• system-mono

• helvetica

• open-sans

2. Изменить цвет фона всех страниц портала. Цвет задается в виде HEX-кода, например #9c93e5.

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

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

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

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

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

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

• Логотип

• Фоновая картинка страницы

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

ТекстТекст

Здесь можно поменять цвет у текста под формой авторизации.

СсылкиСсылки

В этом блоке настраивается цвет ссылок «ЗАБЫЛИ СВОЙ ПАРОЛЬ?», «1С-Битрикс» и «Авторизация». Выбрать цвет можно для всех состояний ссылки: при наведении, без наведения, при клике.

КнопкиКнопки

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

Также здесь можно настроить другие параметры авторизации:

• GIF-анимацию при нажатии на кнопку «Войти»

• Цвета чекбокса «Запомнить меня на этом компьютере».

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

В данном разделе выполняется настройка виджетов, которые выводятся на корпоративном портале в разделе «Лента». Также эти виджеты видны в разделе «Главная», если на портале установлен модуль «Главная страница».

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

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

• Мои задачи

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

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

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

• Опросы

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

• Ссылки

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

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

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

• Цвет фона в шапке виджета

• Цвет фона виджета

• Цвет текста в шапке виджета

• Стиль текста в шапке виджета

• Скругление блоков (углов виджетов)

• Толщина обводки

• Цвет обводки виджета

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

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

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

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

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

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

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

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

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

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

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

ОпросыОпросы

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

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

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

СсылкиСсылки

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

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

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

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

В этом блоке собраны настройки шапки портала: цвета фона, иконок, текста кнопок и так далее. Для редактирования доступны следующие параметры:

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

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

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

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

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

• Цвет ссылок

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

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

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

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

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

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

Блок «Общие настройки»Блок «Общие настройки»

Здесь располагается один параметр — цвет иконки внутри кнопки. Этот цвет будет применен ко всем иконкам кнопок корпоративного портала.

Блок 1Блок 1

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

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

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

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

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

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

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

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

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

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

• Иконки лайка

• Плашки на странице «Дни рождения» в разделе «Сотрудники»

• Набор иконок файлов

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

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

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

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

• Цвет иконки лайка

• Цвет плашки стр. Дни рождения

• Цвет текста

• Цвет бордера цитаты

• Цвет иконки цитаты

Блок «Спрайты»Блок «Спрайты»

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

Обратите внимание, что с версии ui 17.5.5 набор иконок «Плитка» и набор иконок бизнес-процессов являются рудиментарными опциями для Битрикс24 и не используются.

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

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

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

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

CSS-стили можно использовать для того, чтобы установить изображение в качестве фона для шапки портала и фона самого портала. Пример кода для добавления изображения в шапку и фон портала:

/* Изменение шапки портала */
        .bitrix24-default-theme #header,
        .template-bitrix24:not(.bitrix24-light-theme):not(.bitrix24-dark-theme) #header {
          background-image: url('ссылка_на_изображение.jpg') !important;
          background-size: cover !important;
        }
        
        /* Изменение фона портала */
        .bitrix24-default-theme,
        .template-bitrix24:not(.bitrix24-light-theme):not(.bitrix24-dark-theme) {
          background-image: url('ссылка_на_изображение.jpg') !important;
          background-size: cover !important;
        }
        

Пример отображения шапки и фона портала с картинками в качестве фона: