Тема дизайна

В этой статье мы рассмотрим, как изменить стандартную или создать собственную тему дизайна.

• Выбор темы дизайна
• Создание изображений темы
• Работа с CSS файлом и загрузка файла

Выбор темы дизайна

Для каждого шаблона предусмотрен свой набор тем дизайна. Они представляют из себя разные наборы фоновых изображений для шапки и подвала сайта. Переключиться между ними можно в любой момент, используя трансформер дизайна в клиентской части (рис. 1).

Рисунок 1.

В разделе "Настройки дизайна" есть пункт "Тема" с выпадающим списком доступных стандартных тем. Чтобы переключиться на одну из них, выбираем понравившуюся из списка (рис. 2) и сохраняем настройки.

Рисунок 2.

Если ни одна из стандартных тем не подошла, можно создать собственную тему дизайна. Этот процесс описан ниже.

Пример файла с темой: скачать (665кб). 

Создание изображения темы

Изображение темы состоит из двух отдельных элементов: шапка (background-top) и подвал (background-bottom).

Шапка - основная картинка темы, большая фоновая картинка. Область от верхней части сайта и до нижнего края слайдера.

Рисунок 3.

Для создания картинки шапки нужно:

Выбрать изображение (высота не менее 700 px). Можно использовать картинку любой высоты, система автоматически "обрежет" лишнюю длину, параметры высоты заданы в файле. Если нужно задать высоту самостоятельно, то примерная высота шапки должна быть от 550 до 700 px,

Ширина изображения подбирается индивидуально для Вашего сайта, как правило 1920px.
Хотим заметить, что ширина сайта, начиная с версии 5.0, изменилась (сейчас ширина основного контента 1180 px), поэтому, выбирая изображение для темы, необходимо основные элементы в изображении отображать так, чтобы основной контент (1180px) не загораживал элементы на изображении.

Сохраняем изображение в формате jpg. Название картинки может быть любым, например, background-top.jpg.

Подвал - самая нижняя часть сайта. Располагается от нижнего края сайта до первых картинок элементов сайта.

Рисунок 4.

Для создания картинки подвала нужно:

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

Высота блока варьируется, обычно в пределах 200px, ширина так же может быть разной, обычно это 1920px для широкоформатных мониторов.

Сохраняем изображение в формате jpg. Название картинки может быть любым, например, background-bottom.jpg.

Создаем папку с названием темы, например, "summer". В ней создаем еще 2 папки – styles и images. Сохраняем в папке images созданные изображения: background-top.jpg, background-bottom.jpg.

Работа с CSS файлом и загрузка темы

Создаем файл с указанным кодом. Для его создания можно использовать редактор "Блокнот".

Вставляем указанный код и заменяем цифровые значения высоты изображения (px) (выделенные красным цветом) на свои.

Сохраняем файл в папке "styles" с названием styles.css.

Создаем файл с указанным кодом. Для его создания можно использовать программу "Блокнот".

Вставляем указанный код и заменяем в коде название темы (выделенное красным цветом) на свое название – в нашем примере Summer (Лето).

Сохраняем файл в папке темы (не вкладываем его в другие папки, файл должен находиться в корне папки) с названием theme.config.

Создаем zip архив папки с темой.

Архив должен содержать в себе папку с названием темы, а внутри папки - те файлы, которые создавали ранее (файл theme.config, директории styles и images). 

Структура архива с темой. 

Внимание!

Требования к zip архиву.
Максимальный размер архива 5 Mb.

По аналогии с примером - summer.zip.

Переходим в панель администрирования интернет-магазина. В меню выбираем "Дизайн" -  "Параметры" раздел "Основное"

Рядом с полем "Тема" нажимаем кнопку "Добавить". Выбираем заархивированный файл summer.zip. Нажимаем "Открыть".Тема появится в списке (рис. 5).

Рисунок 5.

Находим в списке свою тему и выбираем (рис. 6).

Рисунок 6.

Тема будет установлена.

Всё готово.