Цветовая схема

В данной инструкции рассмотрим как изменить или создать собственную цветовую схему для сайта.

Цветовая схема - это оформление кнопок, панелей меню и прочих элементов сайта в каком-либо определенном цвете.

• Выбор цветовой схемы
• Создание своей схемы
• Формирование архива и загрузка на сайт

Выбор цветовой схемы

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

Рисунок 1.

Список доступных цветовых схем представлен в виде иконок цветов (рис. 2).

Рисунок 2.

При переключении на другую цветовую схему, сразу можно увидеть, как она будет выглядеть на сайте - элементы изменят свои цвета (рис. 3).

Рисунок 3.

Чтобы применить выбранную цветовую схему, нужно сохранить настройки.

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

Создание своей схемы

Пример файла с цветовой схемой: скачать.  

С тем, как найти нужный класс и прописать ему стили, можете подробнее ознакомиться в статье Редактор CSS.

Формирование архива и загрузка на сайт

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

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

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

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

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

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

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

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

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

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

5. Далее в строке "Цветовая схема" нажимаем "Добавить". Откроется окно вашего компьютера, где требуется выбрать свой заархивированный файл plum2.zip. Нажимаем "Открыть". Ваша цветовая схема добавится в список схем магазина (рис. 4).

Рисунок 4.

Внимание!

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

6. Находим в списке свою цветовую схему и выбираем ее (рис. 5). Цветовая схема после ее выбора сохраняется автоматически.

Рисунок 5.

7. Ваша цветовая схема установлена.

Всё готово.