С чем вам помочь?

Задавайте вопрос или опишите проблему, с которой Вы столкнулись

Как создать и загрузить свою цветовую схему в трансформер дизайна

Актуально для версии магазина: 5.0

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

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

Создание собственной цветовой схемы для Трансформера дизайна делится на 2 этапа:

  • Работа с css файлом
  • Формирование архива и загрузка на сайт

Пример файла с цветовой схемой: скачать (2,52кб).  

 

Работа с css файлом

Как найти нужный класс и прописать ему стили, можете ознакомиться с инструкцией: http://www.advantshop.net/help/pages/work-with-css

 

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

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

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

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

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

скопируйте указанный код и замените на свои значения

<?xml version="1.0" encoding="utf-8" ?>

<Theme name="dark" previewImage="">

                   <Names>
                                  <Name lang="ru-RU" value="Темная" />
                                  <Name lang="en-US" value="Dark" />
                  </Names>
</Theme>

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

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

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

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

Файл dark.zip
| - Папка dark
   | - Файл color.config
   | - Папка styles
       | - Файл styles.css

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

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

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


Рисунок 3. Загрузка цветовой схемы.

6. Найдите в списке свою цветовую схему и поставьте слева галочку "Применить" (рис 4). Либо можете выбрать вашу тему в "Трансформере дизайна" в клиентской части магазина и нажать "Сохранить".


Рисунок 4. Выбор цветовой схемы.

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

Всё готово.

Открыть онлайн чат? Открыть
Статья оказалась полезной? Да Нет
Как мы можем улучшить статью?
Благодарим за отзыв.
Благодарим за отзыв. Мы улучшим эту статью.
Произошла ошибка.
Не нашли нужную статью? Предложить тему
Не нашли нужную статью?
Благодарим за отзыв.
Произошла ошибка.

Дизайн интернет-магазина

Работа с CSS Как изменить надписи кнопок на сайте Как изменить дизайн сайта Как изменить размер и стиль шрифта на сайте Примеры изменения CSS Как создать и загрузить свою цветовую схему в трансформер дизайна Настройка внешнего вида интернет-магазина Как загрузить свою тему в трансформер дизайна Редактирование блоков и текстов на главной странице Как создать и загрузить свой фон в трансформер дизайна Работа со статическими блоками (видео) Работа со статическими блоками (описание блоков) Вопросы авторского права на дизайн Товары на главной: добавление новинок и хитов Настройка карусели на главной странице интернет-магазина (видео) Настройка карусели на главной странице интернет-магазина Вывод изображения большего размера при нажатии изображение Вывод вплывающего окна с текстом при нажатии на ссылку Как добавить таблицу в текст страницы, описания или новости Установка якоря на странице Формирование рамки таблицы Как изменить размер фотографии (картинок) для всех сущностей в каталоге Как создать и загрузить свою тему в трансформер дизайна (Для версии 4.x и 3.x)
© AdvantShop. Платформа для открытия интернет-магазина.