Как вам помочь ?

Тема дизайна

Статья актуальна для версии магазина: 11.0 | 10.0 | 8.0 | 7.0-6.0 | 5.0 | 4.1-3.0

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

 

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

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

Тема дизайна - 4678
Рисунок 1.

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

Тема дизайна - 2991
Рисунок 2.

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

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

 

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

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

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

Тема дизайна - 4334
Рисунок 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.

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

body {
     background:transparent url('../images/background-bottom.jpg') no-repeat scroll center bottom;
}
#theme-container {
     background:transparent url('../images/background-top.jpg') no-repeat scroll center top;
     height:675px;
}
.site-footer-top-level, .footer-bottom-level {
     background-color: transparent;
}

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

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

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

<?xml version="1.0" encoding="utf-8" ?>
<Theme name="summer" previewImage=""> custom = "true"
       <Names>
                <Name lang="ru-RU" value="Лето" />
                <Name lang="en-US" value="Summer" />
      </Names>
</Theme>

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

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

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

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

Файл summer.zip
| - Папка summer
   | - Файл theme.config
   | - Папка styles
       | - Файл styles.css
   | - Папка images
       | - Файл background-top.jpg
       | - Файл background-bottom.jpg
 

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

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

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

Загрузка темы.
Рисунок 5.

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

Выбор темы.
Рисунок 6.

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

Всё готово.

Другие статьи по теме

Статья оказалась полезной?
Благодарим за отзыв.

Как мы можем улучшить статью?

Не нашли нужную статью? Предложить свою тему

Не нашли нужную статью?

Благодарим за отзыв.

Тэги: редактировать стандартный шаблон, трансформер дизайна, загрузить тему, своя темя, загрузить свою тему, создание изображения темы, работа с css файлом и загрузка темы, трансформер дизайна, тема, загрузить тему, шаблон, дизайн, свой дизайн, как изменить шаблон, как изменить дизайн, как изменить тему, сменить тему, сменить фон, загрузить свой фон, поменять дизайн, сменить цвета, цветовая схема, схема, ntvf, изменить цвет, 60, 6.0

Мы используем cookies. Подробнее...