Редактор стилей сайта
Содержание |
Введение
С переходом сайта B2C в новый дизайн Простой режим изменений внешнего вида сайта в настройках Mid Office Manager потерял свою актуальность, в замен ему разработано новое решение редактора стилей сайта. В настоящей статье будет изложена инструкция по ручной работе со стилями сайта B2C.
Ручной режим настройки стилей сайта
Для того, чтобы запустить последнюю версию редактора стилей необходимо:
- Иметь учетную запись в личном кабинете сайта B2C
- В браузере открыть страничку по адресу: http://editor.ibe.gridnine.com:7788/editor/АДРЕС_САЙТА_КЛИЕНТА/site/,
где вместо АДРЕС_САЙТА_КЛИЕНТА нужно прописать домен B2C - запустится окно:
в котором нужно заполнить логин и пароль от личного кабинета сайта B2C и нажать кнопку Вход - сайт B2C запустится в режиме редактирования стилей:
На странице сайта справа появится ярлычок Toggle - переключатель в режим редактирования стилей сайта. При нажатии Toggle откроется панель с группированными в блоки полями:
Каждая группа полей отвечает за настройки определенных фрагментов сайта. Существуют три вида редактирования стилей на сайте:
- Шрифт: стиль и размер шрифтов
- Цвет: выбор цвета основного и дополнительных фонов, выбор цвета шрифтов
- Загрузка графических объектов: логотипа и фонового изображения.
В дополнение к инструкции по изменению дизайна на сайте представлена статья по встраиванию B2C во фрейм агентского сайта.
Описание полей для редактирования стилей
Вся страница
- группа полей в редакторе стилей сайта содержит (см. рисунок выше):
Ширина страницы: регулируемая ширина страницы сайта. В редакторе стилей сайта по умолчанию указана оптимальная ширина, подходящая для всех диагоналей мониторов компьютера со значением 972px. Допустимое значение этого поля варьируется от 800px до ширины экрана монитора пользователей. При ширине до 750px отображение сайта адаптируется под мобильные устройства.
Фон: фоновый цвет всей страницы сайта; по умолчанию указано значение белого фона в кодировке RGB: #ffffff.
|
Выбранное в цветовой палитре значение можно добавлять в список часто используемых цветов, а при настройке других цветовых полей выбирать его: |
Логотип: логотип агентства. По умолчанию загружен логотип Sabre. По кнопке Выберите файл можно загрузить логотип агентства. Допустимые для загрузки форматы файла: *.png, *.jpg, *.bmp
Картинка заднего фона: фон страницы сайта, исполнение которого может быть как с обычной цветовой заливкой, так и с размещением графического изображения. На картинке выше загружена стандартная тема оформления сайтов Sabre. По кнопке Выберите файл загрузите свое изображение. Если стандартная картинка будет удалена, а новая не загружена, то основным фоном будет обычная цветовая заливка -из поля Фон.
Шрифт: текстовое поле, содержащее список шрифтов, который может включать одно или несколько наименований, разделенных запятой. Если в имени шрифта содержатся пробелы, например, Times New Roman, то оно должно заключаться в одинарные или двойные кавычки.
Когда браузер встречает первый шрифт в списке, то проверяет его наличие на компьютере пользователя. Если этот шрифт отсутствует в OS, берется следующее имя из списка и также анализируется на наличие. Несколько шрифтов в поле Шрифт увеличивает вероятность того, что хотя бы один из них будет обнаружен на клиентском компьютере. Последовательность шрифтов лучше начинать с экзотических типов и заканчивать базовыми - те, что поддерживаются во всех браузерах и присутствуют в 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. Это кнопка Подобрать на странице Маршрут, Выбрать на страницах Варианты перелетов и Другие тарифы, Сохранить на странице заполнения данных пользователя личного кабинета сайта, кнопка Создать бронирование на странице Данные пассажиров, кнопка Выбрать или Оплатить при выборе варианта оплаты:
Кнопка 2
- дополнительная кнопка, размещенная в Поле 1. Это кнопка Другие тарифы на странице Вариантов перелетов, Отменить бронирование в личном кабинете сайта:
Длительность пересадки
- настройка цвета пересадок в отображении дополнительной информации о перелетах на сайте:
Применение к сайту выбранных в редакторе стилей производится по кнопке 
Заключение
После настроек и применения стилей к сайту B2C необходимо выгрузить файл с переменными стилей сайта с помощью кнопки
и прислать на адрес технической поддержки разработчика сайта support@gridnine.com с указанием в обращении:
-наименования агентства,
-доменного имени сайта B2С.
Данная процедура необходима для актуализации сборки сайта на сервере и последующем ее корректном обновлении.
