Редактор стилей сайта
Содержание |
Введение
С переходом сайта B2C в новый дизайн Простой режим изменений внешнего вида сайта в Mid Office Manager потерял свою актуальность, в замен ему разработано новое решение редактора стилей сайта. В настоящей статье будет изложена инструкция по ручной работе со стилями сайта B2C.
Ручной режим настройки стилей сайта
Для того, чтобы запустить последнюю версию редактора стилей необходимо:
- Иметь учетную запись в личном кабинете сайта B2C
- В браузере открыть страничку по адресу: http://editor.ibe.gridnine.com:7788/editor/АДРЕС_САЙТА_КЛИЕНТА/site/,
где вместо АДРЕС_САЙТА_КЛИЕНТА нужно прописать домен B2C - откроется окно:
в котором нужно заполнить логин и пароль от личного кабинета сайта B2C и нажать кнопку Вход - сайт B2C запустится в режиме редактирования стилей:
На странице сайта справа появится ярлычок Toggle - переключатель в режим редактирования стилей сайта. При нажатии Toggle откроется панель с группированными в блоки полями:
Каждое поле отвечает за настройки определенных полей/фрагментов сайта. Существуют три вида редактирования стилей на сайте:
- Шрифт - стиль, размер и цвет шрифта
- Выбор цвета - основной фон страницы, дополнительный фон-определенных фрагментов сайта
- Загрузка логотипа и фонового изображения.
В дополнение к инструкции по изменению дизайна на сайте представлена статья по встраиванию B2C во фрейм агентского сайта.
Описание полей для редактирования стилей
Вся страница
- группа полей в редакторе стилей сайта содержит (см. рисунок выше):
Ширина страницы: оптимальная ширина со значением 972px. Допустимое значение от 800 до ширины экрана монитора. При ширине до 750px отображение адаптируется под мобильные устройства
Фон: фоновый цвет всей страницы сайта; по умолчанию указано значение белого фона в кодировке RGB: #ffffff
|
Выбранное в цветовой палитре значение можно добавлять в список часто используемых цветов, а при настройке других полей с указанием цвета выбирать его: |
Логотип: логотип агентства. По умолчанию загружен логотип Sabre. По кнопке Выберите файл можно загрузить логотип агентства. Допустимые для загрузки форматы файла: *.png, *.jpg, *.bmp
Картинка заднего фона: фон страницы сайта, исполнение которого может быть как с обычной цветовой заливкой, так и с размещением графического изображения. На картинке выше загружена стандартная тема оформления сайтов Sabre. По кнопке Выберите файл загрузите свое изображение. Если стандартная картинка будет удалена, а новая не загружена, то основным фоном обычная цветовая заливка - Фон
Шрифт: текстовое поле, содержащее список шрифтов, который может включать одно или несколько названий, разделенных запятой. Если в имени шрифта содержатся пробелы, например, Times New Roman, то оно должно заключаться в одинарные или двойные кавычки
Когда браузер встречает первый шрифт в списке, он проверяет его наличие на компьютере пользователя. Если такого шрифта нет, берется следующее имя из списка и также анализируется на присутствие. Поэтому несколько шрифтов увеличивает вероятность, что хотя бы один из них будет обнаружен на клиентском компьютере. Последовательность шрифтов лучше начинать с экзотических типов и заканчивать базовыми, которые поддерживаются во всех браузерах и присутствуют в OS
Размер основного шрифта: размер шрифта, который будет применен к сайту, допустимые размеры: 12-16px, по умолчанию применяется размер шрифта 16px
Размер заголовка: размер основных заголовков сайта. Допустимые размеры: 16-20px, по умолчанию - 18px
Размер дополнительного текста: размеры дополнительных/остальных заголовков и текста на страницах сайта. Допустимые размеры: 14-16px, по умолчанию - 14px
Тень элементов сайта: добавление тени к элементам сайта с помощью переключателем включения/отключения
Размер скруглений в документе: радиус закругления углов элементов. Чем выше число, тем сильнее скругление; значение 0 даст прямой угол, оптимальное значение: 4px
Задний фон при лоадере: цвет затемнения при обработке запроса
Шапка
- группа полей редактора стилей сайта содержит (см. рисунок выше):
Фон: цветовое решение шапки.
Например, выберем значение 
и получим изменение цвета шапки.
Цвет элементов оформления: горизонтальная полоса и не пройденные шаги сайта
Цвет текста: цвет кнопок личного кабинета и переключателя языка, учетная запись при входе в личный кабинет.
Цвет подтверждения: это цвет пройденных/активных шагов, подсветка при наведении курсора мыши на кнопки Личного кабинета, переключателей языка, а также нажатии на кнопки.
Поле 1
- группа основных полей на всех страницах сайта, к которой относятся поля с информацией по перелету, по данным пользователя и пассажира, полей вариантов оплаты, окно матрицы +/-3дня, окно обзора перелетов, заполнение визовой информации. Это основные поля, размещенные справа в личном кабинете сайта: данные пользователя и пассажиров, данные о заказах:
Группа Поле 1 содержит следующие поля настроек:
Фон: основной цвет фона, по-умолчанию задан белый фон
Цвет первого заголовка: все основные заголовки поля 1 - на рисунке отмечено цифрой 1
Цвет второго заголовка: все дополнительные заголовки поля 1 - на рисунке отмечено цифрой 2
Цвет основного текста: основной текст Поля 1 - на рисунке выше отмечен цифрой 3. А также приведем пример для Обзора перелетов (аналогично и у Матрицы перелетов):
Цвет ссылок: цвет ссылок, размещенных в Поле 1. Например:
Цвет важных частей: цвет текста, информирующего о размещенной важной информации
Цвет ошибок: выделение полей с ошибками при валидации (проверка значений, указанных пользователем, и отображение найденных ошибок).
Цвет дополнительного текста: подсказка и цвет рамки в полях данных пассажира и пользователя сайта -страница Данные пассажира на сайте, Личный кабинет сайта; код геолокации в перелетах сайта.
Цвет элементов оформления: горизонтальные линии - разделители блоков, кнопки, разворачивающие дополнительную информацию. Например, вкладка Пассажиры личного кабинета сайта:
Цвет подтверждения: это цвет заполненных значениями полей, например, Данные пассажира или пользователя личного кабинета сайта
Цвет фона инпутов: фон полей для заполнения Поля 1. Например, страница Данные пассажиров поля для заполнения реквизитов пассажира. По умолчанию, белый цвет.
Поле2
- группа полей дополнительной информации, размещение которых выполнено слева на странице сайта. Это информация о перелете на страницах “Данные пассажиров”, “Варианты оплаты”.
Описание полей аналогичны тем, что приведены для Поля 1, но применимы только к Полю 2. Например: блоки размещенные слева на сайте - личного кабинета, выбранного перелета:
Кнопка 1
- основная кнопка, размещенная в Поле 1. Это кнопка Подобрать на странице Маршрут, Выбрать на страницах Варианты перелетов и Другие тарифы, Сохранить на странице заполнения данных пользователя сайта, кнопка Создать бронирование на странице Данные пассажиров, кнопка Выбрать или Оплатить при выборе варианта оплаты.
