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

Версия 09:04, 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

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

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

Шапка

(см. рисунок выше) содержит поля:

Фон: цветовое решение шапки. Например, выберем значение 252px и получим изменение цвета шапки:

Цвет элементов оформления: горизонтальная полоса и не пройденные шаги сайта

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

Цвет подтверждения: это цвет пройденных/активных шагов, подсветка при наведении курсора мыши на кнопки Личного кабинета, переключателей языка, а также нажатии на кнопки.

Поле 1

- основное поле на всех страницах сайта. Это поля с информацией по перелету, по данным пользователя и пассажира, вариантов оплаты, окно матрицы +/-3дня, окно обзора перелетов. Это основные поля, размещенные справа в личном кабинете сайта: данные пользователя и пассажиров, данные о заказах: