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

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

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

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

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

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

Рисунок 1.

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

Рисунок 2.

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

Рисунок 3.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Рисунок 4.

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

Рисунок 5.

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

Всё готово.