Opencart — система управления контентом для интернет-магазинов, популярная в России и за рубежом. Основными преимуществами CMS является простота установки и администрирования, маленький вес базы, надежность и хорошая скорость работы даже на сравнительно больших проектах. По сравнению со многими другими системами для opencart не так уж и много шаблонов, поэтому часто пользователи, пытаясь сделать шаблон самостоятельно, сталкиваются с трудностями в поисках ответов на вопросы - как сделать шаблон для Opencart, как его редактировать или изменить. В этой статье рассмотрим создание простого шаблона для Opencart, а в конце статьи у вас будет возможность скачать готовый бесплатный шаблон и использовать его для своих проектов.
Итак, имеем установленный Opencart версии 1.5.4, на данном этапе используется стандартный шаблон Default. Новый шаблон будем делать на базе стандартного, так как в нем есть все необходимые файлы структуры, а также можно будет использовать объявленные в нем стили. Вот так выглядит главная страница сайта сейчас:
Такая одноколоночная структура используется не очень часто, поэтому сначала приведем главную страницу сайта к более привычному виду. Зайдем в админку сайта, дописав к адресу /admin. Включим отображение категорий товаров на главной странице в левой колонке. Для этого перейдем в пункт Дополнения → Модули.
В открывшемся списке модулей выберем модуль Категории и нажмем Изменить. На странице редактирования модуля задается его расположение на сайте.
Для каждой страницы расположение можно задать свое (подробнее об этом можно прочитать в статье Схемы в 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. Высоту можно поменять в файле stylesheet.css, который находится по следующему пути: space-cart/stylesheet/stylesheet.css. Находим строку 93 #header и меняем значение height на 270px.
- Установим некликабельный задний фон шапки сайта. Для этого будем использовать заранее подготовленное изображение shining_space. jpg размером 980х270px, которое положим в папку space-cart/image.
Пропишем путь к файлу с изображением:
- Теперь надо поработать с логотипом. Для этого будем использовать картинку space-logo.png. Картинка логотипа меняется в админке сайта: Система → Настройки → Мой магазин(по умолчанию)[Изменить] → Изображения. На странице Изображения нам будет предложено загрузить логотип для сайта. Загрузим наш логотип и нажмем Сохранить. Скачать изображение для логотипа можно здесь - Скачать логотип.
Сейчас логотип расположен наверху шапки, не совсем по центру, что не очень красиво. Разместим его пониже, изменив 102 строку:
(Сейчас и далее в статье вносимые изменения будут выделены полужирным шрифтом)
#header #logo {
position: absolute;
top: 35px;
left: 15px;
}
- Подвинем переключатель языков немного вправо, чтобы он не наползал на логотип и изменим цвет заголовка на белый. Редактируем строку 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;
}
С шапкой можно сделать еще очень много всего интересного, но это явно не уложится в одну статью, поэтому на этот раз хватит изменений.
Шапка в данный момент выглядит так:
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 1.5.4 можно нажав на ссылку:
Скачать бесплатный шаблон для Opencart