Создание шаблона для Opencart 1.5.4. Базовые знания.

Opencart — система управления контентом для интернет-магазинов, популярная в России и за рубежом. Основными преимуществами CMS является простота установки и администрирования, маленький вес базы, надежность и хорошая скорость работы даже на сравнительно больших проектах. По сравнению со многими другими системами для opencart не так уж и много шаблонов, поэтому часто пользователи, пытаясь сделать шаблон самостоятельно, сталкиваются с трудностями в поисках ответов на вопросы - как сделать шаблон для Opencart, как его редактировать или изменить. В этой статье рассмотрим создание простого шаблона для Opencart, а в конце статьи у вас будет возможность скачать готовый бесплатный шаблон и использовать его для своих проектов. 

Итак, имеем установленный Opencart версии 1.5.4, на данном этапе используется стандартный шаблон Default. Новый шаблон будем делать на базе стандартного, так как в нем есть все необходимые файлы структуры, а также можно будет использовать объявленные в нем стили.  Вот так выглядит главная страница сайта сейчас:

создание шаблона Opencart

Такая одноколоночная структура используется не очень часто, поэтому сначала приведем главную страницу сайта к более привычному виду. Зайдем в админку сайта, дописав к адресу /admin. Включим отображение категорий товаров на главной странице в левой колонке. Для этого перейдем в пункт Дополнения → Модули.

Создание шаблона Opencart

В открывшемся списке модулей выберем модуль Категории и нажмем Изменить. На странице редактирования модуля задается его расположение на сайте.

Создание шаблона Opencart

Для каждой страницы расположение можно задать свое (подробнее об этом можно прочитать в статье Схемы в Opencart. Различная структура сайта для отдельных страниц), но мы пока установим его только для главной страницы: щелкнем Добавить модуль, в появившейся строке выберем страницу Home, Расположение — левая колонка, Статус — Включено, отображение количества товаров и сортировка задаются по желанию. Нажмем Сохранить и вернемся на страницу списка модулей. Зайдем в настройки Слайдшоу (кнопкой Изменить), изменим размеры слайдера на 740х230, не забудем сохранить изменения. Теперь можно перейти на главную страницу сайта и оценить внесенные изменения — структура сайта стала двухколоночной с соответствующей шириной слайдера. Для всех остальных страниц можно настроить другое расположение модулей и другую структуру.

Шаблоны Opencart располагаются по следующему пути: Корень сайта/catalog/view/theme. Приступим к созданию простого шаблона на базе стандартного. Для начала сделаем копию папки шаблона Default. Копию стандартного шаблона назовем Space-cart и в последствии будем работать только с ним. Для того, чтобы активировать шаблон в административной части сайта, выберем его — Система → Настройки → Мой магазин(по умолчанию)[Изменить] → Витрина. На странице Витрина возле метки Шаблон магазина: выберем шаблон Space-cart из выпадающего списка и нажмем Сохранить. Пока новый шаблон не отличается от стандартного, но это первые шаги к созданию своего шаблона для Opencart. Теперь подойдем к редактированию шаблона Opencart поэтапно:

1. Работа с шапкой шаблона Opencart. Что будем делать? Увеличим высоту шапки, установим задний фон шапки, поменяем логотип, изменим вид ссылок и прочие небольшие изменения.

В первую очередь укажем путь к таблицам стилей css, так как все пути остались старые от стандартного шаблона default. Редактирование файла шапки осуществляется по пути space-cart/template/common/header.tpl. Находим в этом файле строку 19 и меняем в ней имя шаблона default на наш space-cart, не забываем сохранить:

Создание шаблона Opencart

- Меняем высоту шапки Opencart. Высоту можно поменять в файле stylesheet.css, который находится по следующему пути: space-cart/stylesheet/stylesheet.css. Находим строку 93 #header и меняем значение height на 270px.

Создание шаблона Opencart
- Установим некликабельный задний фон шапки сайта. Для этого будем использовать заранее подготовленное изображение shining_space. jpg размером 980х270px, которое положим в папку space-cart/image.

Скачать изображение.

Пропишем путь к файлу с изображением:

Создание шаблона Opencart

- Теперь надо поработать с логотипом. Для этого будем использовать картинку space-logo.png. Картинка логотипа меняется в админке сайта: Система → Настройки → Мой магазин(по умолчанию)[Изменить] → Изображения. На странице Изображения нам будет предложено загрузить логотип для сайта. Загрузим наш логотип и нажмем Сохранить. Скачать изображение для логотипа можно здесь - Скачать логотип.

Сейчас логотип расположен наверху шапки, не совсем по центру, что не очень красиво. Разместим его пониже, изменив 102 строку: 

(Сейчас и далее в статье вносимые изменения будут выделены полужирным шрифтом)

#header #logo {
position: absolute;
 top: 35px;
left: 15px;
}

Создать шаблон Opencart

- Подвинем переключатель языков немного вправо, чтобы он не наползал на логотип и изменим цвет заголовка на белый. Редактируем строку 108:

#language {
position: absolute;
top: 15px;
 left: 350px;
width: 80px;
color: #fff;
line-height: 17px;
}

- Изменим внешний вид Корзины, для начала уберем задний белый фон и установим закругленные края для неактивной корзины. Внимательно вносим следующие изменения на строке 145:

#header #cart .heading {
float: right;
margin-right: 172px;
margin-top: 15px;
padding: 5px 10px 10px 10px;
border: 1px solid #ccc;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;

position: relative;
z-index: 1;
}

- В строке 158 установим цвет заголовка корзины белый, наклонный шрифт, уберем полужирность:

#header #cart .heading h4 {
color: #fff;
font-size: 15px;
 font-weight: normal;
font-style: italic;

margin-top: 0px;
margin-bottom: 3px;
}

- Уберем белый фон у количества товаров неактивной корзины, редактируем строку 170 следующим образом, удаляем #FFFFFF:

#header #cart .heading a span {
background: url('../image/arrow-down.png') 100% 50% no-repeat;
padding-right: 15px;
}

- Не забываем отредактировать стиль на строке 194 для активной корзины:

#header #cart.active .heading {
margin-top: 15px;
padding-top: 5px;
padding-bottom: 6px;
border-top: 1px solid #ccc;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
 -webkit-border-radius: 5px 5px 0px 0px;
-moz-border-radius: 5px 5px 0px 0px;
-khtml-border-radius: 5px 5px 0px 0px;
border-radius: 5px 5px 0px 0px;

}

- Редактируем поиск. Поиск нужно сделать короче, расположить его по центру между краем шапки и корзиной, убрать лишнюю тень. Правим строку 266:

#header #search {
position: absolute;
top: 15px;
right: 0px;
width: 278px;
z-index: 15;
}

и строку 278, удаляем там строки box-shadow и меняем ширину width:

#header #search input {
background: #FFF;
padding: 1px 1px 1px 33px;
width: 202px;
height: 21px;
border: 1px solid #CCCCCC;
-webkit-border-radius: 3px 3px 3px 3px;
-moz-border-radius: 3px 3px 3px 3px;
-khtml-border-radius: 3px 3px 3px 3px;
border-radius: 3px 3px 3px 3px;
}

- Перенесем строчку Войти или зарегистрироваться ближе к середине шапки:
Строка 289:

#header #welcome {
position: absolute;
bottom: 80px;
right: 300px;

z-index: 5;
width: 298px;
text-align: right;
color: #fff;
}

- Отредактируем расположение и стиль меню ссылок в шапке, начиная со строки 298:

#header .links {
position: absolute;
 right: 30px;
bottom: 15px;

font-size: 10px;
padding-right: 10px;
}
#header .links a {
float: left;
display: block;
 padding: 5px 7px 5px 7px;
color: #ffffff;
font-weight: bold;

text-decoration: none;
font-size: 12px;
 -webkit-border-radius: 5px;
-moz-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
background: #A52A2A;

}
#header .links a + a {
margin-left: 8px;
}

- Изменим цвет ссылок и заголовка настройки валюты на строке 117:

#currency {
width: 75px;
position: absolute;
top: 15px;
left: 425px;
 color: #fff;
line-height: 17px;
}
#currency a {
display: inline-block;
padding: 2px 4px;
border: 1px solid #CCC;
 color: #fff;
text-decoration: none;
margin-right: 2px;
margin-bottom: 2px;
}

- В заключение настройки шапки установим ей отступ от верхнего края, рамку и закругленные углы в строке 92:

#header {
height: 270px;
margin-bottom: 7px;
 margin-top: 10px;
position: relative;
z-index: 99;
background: url('../image/shining_space.jpg') no-repeat;
 border: 1px solid #000;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
-khtml-border-radius: 7px;
border-radius: 7px;

}

С шапкой можно сделать еще очень много всего интересного, но это явно не уложится в одну статью, поэтому на этот раз хватит изменений.
Шапка в данный момент выглядит так:

Создаем шаблон Opencart

2. Этот этап совсем небольшой, но тоже очень важный — изменим задний фон всего сайта, редактируя тег body на строке 6 нашего файла стилей:

body {
background: url('../image/main-background.png');
color: #000000;
font-family: Arial, Helvetica, sans-serif;
margin: 0px;
padding: 0px;
}

Задний фон сайта качаем тут - Скачать

3. Меняем внешний вид Главного горизонтального меню сайта. Редактируем строку 328 (удаляем строки box-shadow, меняем border-bottom на общий border, меняем цвет фона):

#menu {
 background: #3c0749;
border: 1px solid #000000;

height: 37px;
margin-bottom: 15px;
-webkit-border-radius: 5px 5px 5px 5px;
-moz-border-radius: 5px 5px 5px 5px;
-khtml-border-radius: 5px 5px 5px 5px;
border-radius: 5px 5px 5px 5px;
padding: 0px 5px;
}

4. Редактируем стиль боксов (блоков). Изменим фон и цвет текста, а также цвет рамки у заголовков блоков:
Строка 660:

.box .box-heading {
-webkit-border-radius: 7px 7px 0px 0px;
-moz-border-radius: 7px 7px 0px 0px;
-khtml-border-radius: 7px 7px 0px 0px;
border-radius: 7px 7px 0px 0px;
 border: 1px solid #000;
background: #A52A2A;

padding: 8px 10px 7px 10px;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
line-height: 14px;
 color: #fff;
}

Поменяем цвет рамки на черный для тела блока на строке 674:

.box .box-content {
background: #FFFFFF;
-webkit-border-radius: 0px 0px 7px 7px;
-moz-border-radius: 0px 0px 7px 7px;
-khtml-border-radius: 0px 0px 7px 7px;
border-radius: 0px 0px 7px 7px;
border-left: 1px solid #000;
border-right: 1px solid #000;
border-bottom: 1px solid #000;
padding: 10px;
}

5. Изменяем футер: сделаем его темным, закруглим края и изменим цвет текста на белый. Редактируем, начиная со строки 1593:

#footer {
clear: both;
overflow: auto;
min-height: 100px;
padding: 20px;
 border: 1px solid #000;
background: #111;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
-khtml-border-radius: 7px;
border-radius: 7px;

}
#footer h3 {
 color: #fff;
font-size: 14px;
margin-top: 0px;
margin-bottom: 8px;
}
#footer .column a {
text-decoration: none;
color: #fff;
}

6. Сейчас может показаться, что шаблон практически готов, но перейдем на страницу товара или категории и увидим, что у правой колонки нет фона. Это нельзя оставить просто так, поэтому надо добавить стиль, описывающий главный блок контента. Он называется #content, и добавим мы его под строку 770. Придерживаясь нашего основного дизайна, опишем закругленные углы и черную рамку:

#content {
background: #fff;
padding: 20px;
border: 1px solid #000;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
-khtml-border-radius: 7px;
border-radius: 7px;
}

7. Установим другой цвет для кнопок сайта. Для неактивных — строка 572:

a.button, input.button {
cursor: pointer;
color: #FFFFFF;
line-height: 12px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
background: #3c0749;
-webkit-border-radius: 7px 7px 7px 7px;
-moz-border-radius: 7px 7px 7px 7px;
-khtml-border-radius: 7px 7px 7px 7px;
border-radius: 7px 7px 7px 7px;
}

Для активной кнопки строка 596:

a.button:hover, input.button:hover {
 background: #A52A2A;
}

Результат проделанной работы:

Создаем шаблон Opencart

Создаем шаблон Opencart

Наш простой шаблон для Opencart готов. Его можно еще очень долго изменять, редактировать и преобразовывать до неузнаваемости, но целью статьи было ознакомление с основами создания шаблонов для Opencart, и, думаю, общее представление вы получили. Скачать готовый бесплатный шаблон для Opencart 1.5.4 можно нажав на ссылку:

  Скачать бесплатный шаблон для Opencart