Создаем шаблон (тему) для сайта на OpenCart 2.3 самостоятельно
Краткое руководство
Создать шаблон (тему) для сайта на OpenCart 2.3 самостоятельно не так уж и сложно
1. Сначала копируем файлы и папки стандартной темы, т.е. создаем копию папки catalog/view/theme/default и переименовываем ее по-своему латинскими буквами.
2. Копируем файл admin/controller/extension/theme/theme_default.php, помещаем его в ту же папку, где находится и этот файл, и переименовываем его по названию вашей темы. Желательно называть файлы темы одинаково, так же, как вы назвли папку с вашей темой.
3. Далее в файле admin/controller/extension/theme/[ваша тема].php заменяем theme_default на название вашей темы (латинскими буквами) должно быть примерно 197 совпадений. Находм строку:
и переименовываем на свое название темы (т.е. меняем последние два слова в названии контроллера, после первого Theme), должно получиться примерно так:
Кстати, если название вашей темы (как в примере выше) состоит из двух слов, то каждое слово пишем с большой буквы (ну и слитно, конечно).
4. Копируем файл admin/view/template/extension/theme/theme_default.tpl, помещаем его в ту же папку, где находится и этот файл, и переименовываем его по названию вашей темы. Заменяем theme_default на название вашей темы (латинскими буквами) должно быть примерно 48 совпадений.
5. Копируем языковой файл admin/language/ru-ru/extension/theme/theme_default.php, помещаем его в ту же папку, где находится и этот файл, и переименовываем его по названию вашей темы. В новом файле примерно в третьей строке меняем название, т.е. находим эту строку:
,
и получается так:
И наконец, переходим в административной панели в Модули / Расширения, в селекторе выбираем Темы. Видим в списке две темы: новая и стандартная. Редактируем новую тему и включаем ее. Затем переходим в Настройки, редактируем магазин во вкладке «Основные», в пункте Тема выбираем новую и сохраняем.
Теперь можно менять внешний вид и стили нового шаблона, как вам угодно.
Итак, мы создали новый шаблон для сайта на базе opencart 2.3.
Источник статьи: http://techpodderzhki.net/blog/sozdanie-shablona-opencart-samostoyztelno.html
Как создать шаблон для OpenCart?
Я новичок в OpenCart, и я хотел бы применить свою тему к OpenCart.
Я знаю, что не должен редактировать шаблон по умолчанию напрямую, но как скопировать файлы шаблонов по умолчанию и изменить его, чтобы применить тему?
4 ответов
Balan, вы можете начать с копирования каталога папок\view\theme\default и всех его подпапок файлов и т. д.
таким образом, копия будет вашей новой темой. Итак, предположим, у вас теперь есть эти папки
перейдите на сайт администратора и выберите System > Settings
на вкладке » Store «вы должны увидеть опции» default «и» my-new-theme «в качестве опций для поля с именем»Template». Выберите «my-new-theme» и спасать.
начните вносить изменения в файлы в каталоге\view\theme\my-new-theme, и они появятся сразу
создайте пользовательскую тему в opencart:
Opencart использовать резервную функцию, это означает, что, когда opencart не нашел определенный шаблон в вашей теме, он найдет в папке темы по умолчанию. Поэтому, чтобы создать новую тему, вам не нужно копировать весь файл из темы по умолчанию. Но, создание темы не только о том, чтобы сделать новую тему папки и изменить ее цвет. В этом уроке мы узнаем основное понимание того, как работает контроллер и модель, это связано с шаблоном модификация.
прежде чем мы продолжим, я хочу прояснить, что тема в этом уроке относится к теме внутри папки темы (каталог/вид/тема/мифема) и шаблон относится .TPL файл внутри папки шаблона (каталог / вид / тема / yourtheme / шаблон).
Шаг 1. Построить» Очень » Основная Тема
Шаг 3. Настройка Шаблона (1): Понимание Контроллера
Шаг 4. Настройка Шаблона (2): Понимание Модели
Шаг 5. Настройка шаблона (3): понимание vQmod
помните, что все файлы заканчивается .расширение ОСАГО.
значения переменных в файлах tpl поступают от соответствующих контроллеров. В то время как значения переменных в контроллер выходит из модели, которая извлекает данные из базы данных.
поэтому, если вы внесете какие-либо изменения в имя переменной в файлах tpl, измените имя переменной в соответствующих файлах контроллера.
@JackLB-вы можете назвать файлы шаблонов, как вы хотите. Каждый шаблон в любом случае указан вручную в файле контроллера.
попробуйте найти .tpl в любом файле контроллера, и вы увидите:
Opencart ищет шаблон в пользовательской папке шаблона. Если не найден, он возвращается к шаблону по умолчанию. Если не найдено, будет показана ошибка.
но это более сложный — использовать то же имя для контроллера/шаблона.
Источник статьи: http://askdev.ru/q/kak-sozdat-shablon-dlya-opencart-142788/
Создание шаблона для Opencart 1.5.4. Базовые знания.
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 можно нажав на ссылку:
Источник статьи: http://asterial.ru/sozdanie-shablona-dlya-opencart-1-5-4-bazovyie-znaniya/