Брендирование

BILLmanager поддерживает брендирование — создание уникального оформления веб-интерфейса платформы. Провайдер может:

• задать цветовую схему;
• загрузить логотип компании;
• настроить отображение информации о копирайте (авторских правах);
• настроить форму авторизации.

Настройка брендирования

Чтобы брендировать интерфейс, в главном меню перейдите в раздел Провайдер → Провайдеры → выберите провайдера → кнопка Настройка бренда.

Общее

Блок Общее содержит настройки:

• Заголовок окна — название страницы, которое отображается во вкладке браузера;
• Домашняя страница — сайт компании. При нажатии на копирайт будет открыта указанная страница;
  
  

  Укажите в поле Домашняя страница адрес основного сайта вашей компании, а не сервера с платформой. Например,  https://example.com , а не https://billmanager.example.com.

• Копирайт — текст копирайта. Обозначает физическое или юридическое лицо, которому принадлежат авторские права на ресурс. Является ссылкой на домашнюю страницу. Отображается:
  • в нижней части главного меню платформы;
  • в нижней части страницы авторизации.

  

  Пример копирайта внизу страницы

  
  

• Контакты — ссылка на контактные данные компании. Будет добавлена на форму авторизации.
  

  

  Пример общих настроек

Логотип

Блок Логотип содержит настройки:

• Ссылка на логотипе — URL, который откроется при нажатии на логотип;
• Основной логотип — логотип бренда, расположенный в левом верхнем углу интерфейса платформы. Максимальный отображаемый размер — 245x30 пикселей, поддерживаемые форматы: PNG, SVG;
• Логотип формы авторизации — логотип бренда, отображаемый на странице авторизации. Максимальный отображаемый размер — 400x200 пикселей, поддерживаемые форматы: PNG , SVG;
  

  Пример логотипа на форме авторизации

  
  
  
  
• Иконка адресной строки (favicon) — иконка, отображаемая во вкладке браузера перед заголовком страницы. Максимальный размер — 16x16 пикселей, поддерживаемый формат: ICO.

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

Чтобы настроить форму авторизации, в блоке Форма авторизации:

1. Нажмите Перейти к настройкам.
2. Настройте:
   • Стиль формы авторизации — выберите стиль и расположение элементов на форме авторизации:
     • Стиль 1 — в правой части страницы;
     • Стиль 2 — по центру страницы;
   • Добавить тень — активируйте опцию, чтобы добавить тень под форму авторизации;
   • Фон формы авторизации:
     • Загрузить своё изображение — Выберите файл изображения и его расположение на странице. Доступные опции:
       • Замостить фон;
       • Растянуть по вертикали;
       • Растянуть по горизонтали;
     Максимальный размер изображения — 2560х1440 пикселей, поддерживаемые форматы: PNG,  SVG, JPEG;
   • Выбрать цвет фона — введите HEX-код цвета или воспользуйтесь виджетом для его выбора.

     
     

     Пример выбора цвета фона

     
     

     

     Чтобы восстановить настройки по умолчанию, нажмите кнопку Вернуть форму.

     
     

3. Нажмите Применить, чтобы сохранить изменения.

Все изменения в настройках стилей отображаются в области предпросмотра.

Область предпросмотра 

Цвет интерфейса

Вы можете использовать ваши корпоративные цвета в интерфейсе платформы. В блоке Цвет интерфейса нажмите Перейти к настройкам:

1. Выберите раздел платформы: Главная, Таблица, Форма.
2. На области предпросмотра выделите элемент, для которого нужно изменить цвета.
   

   Настройка цвета интерфейса

3. В правой части окна введите HEX-код цвета или выберите его с помощью виджета.
   Все изменения отображаются во время предпросмотра интерфейса. Некоторые цвета будут общими для разных разделов. Например, Основной цвет определит вид активных кнопок и полей интерфейса.
   Чтобы вернуть изменённый цвет к настройкам по умолчанию, нажмите значок отмена рядом с полем.
   

   Виджет выбора цвета

4. Перейдите в режим предпросмотра. В нём вы можете переключаться между разделами интерфейса.
   
   

   Режим предпросмотра

5. Примените цвета для интерфейса пользователей провайдера.

Нажмите Вернуть цвета, чтобы восстановить настройки по умолчанию.

Вы можете Отменить несохранённые изменения.

HTML вставка

Все страницы платформы созданы с использованием:

• HTML-разметки;
• стилей CSS;
• кода JavaScript.

Чтобы создать дополнительное брендирование платформы, из интерфейса добавьте свой HTML/CSS/JavaScript-код к существующему коду страниц BILLmanager.

В блоке HTML вставка имеются поля для ввода:

• Заголовок (head) — код из поля будет добавлен в конец блока заголовка (<head> </head>) каждой страницы;
• Тело (body) — код из поля будет добавлен в конец блока тела (<body> </body>) каждой страницы.

Пример заполненного заголовка

Например, чтобы изменить шрифт главного меню в поле Заголовок, добавьте следующий код:

<style>
	li {
    	font-size:12px;
    	font-family:comic sans ms,cursive;
    	font-style:italic;
	}
</style>

Код из примера:

• переопределяет стандартное оформление элемента списка (тег <li>);
• задаёт размер шрифта 12 пикселей;
• применяет шрифт comic sans ms;
• активирует курсивное начертание. 

Пункты главного меню после добавления HTML вставки.

Сброс настроек

Чтобы восстановить стандартные настройки, активируйте опцию Сбросить настройки и нажмите Применить.