Редактор стилей сайта — различия между версиями

Версия 11:15, 24 июля 2018

Введение

С переходом сайта B2C в новый дизайн Простой режим изменений внешнего вида сайта в Mid Office Manager потерял свою актуальность, в замен ему разработано новое решение редактора стилей сайта. В настоящей статье будет изложена инструкция по ручной работе со стилями сайта B2C.

Ручной режим настройки стилей сайта

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

1. Иметь учетную запись в личном кабинете сайта B2C
2. В браузере открыть страничку по адресу: http://editor.ibe.gridnine.com:7788/editor/АДРЕС_САЙТА_КЛИЕНТА/site/,

где вместо АДРЕС_САЙТА_КЛИЕНТА нужно прописать домен B2C - откроется окно:

в котором нужно заполнить логин и пароль от личного кабинета сайта B2C и нажать кнопку Вход - сайт B2C запустится в режиме редактирования стилей:

На странице сайта справа появится ярлычок Toggle - переключатель в режим редактирования стилей сайта. При нажатии Toggle откроется панель с группированными в блоки полями:

Каждое поле отвечает за настройки определенных полей/фрагментов сайта. Существуют три вида редактирования стилей на сайте:

1. Шрифт - стиль, размер и цвет шрифта
2. Выбор цвета - основной фон страницы, дополнительный фон-определенных фрагментов сайта
3. Загрузка логотипа и фонового изображения.

В дополнение к инструкции по изменению дизайна на сайте представлена статья по встраиванию 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. Это кнопка Подобрать на странице Маршрут, Выбрать на страницах Варианты перелетов и Другие тарифы, Сохранить на странице заполнения данных пользователя сайта, кнопка Создать бронирование на странице Данные пассажиров, кнопка Выбрать или Оплатить при выборе варианта оплаты:

Кнопка 2

- дополнительная кнопка, размещенная в Поле 1. Это кнопка Другие тарифы на странице Вариантов перелетов, Отменить бронирование в личном кабинете сайта:

Длительность пересадки

- настройка цвета пересадок в отображении дополнительной информации о перелетах на сайте:

Применение к сайту выбранных в редакторе стилей производится по кнопке

Заключение

После настроек и применения стилей к сайту B2C необходимо выгрузить файл с переменными стилей сайта с помощью кнопки и прислать на адрес технической поддержки разработчика сайта support@gridnine.com с указанием в обращении:

-наименования агентства, -доменного имени сайта B2С. Данная процедура необходима для актуализации сборки сайта на сервере и последующем ее корректном обновлении.