Доброго времени суток всем!!! Сам недавно начал осваиваться в Opencart и базовых знаний очень не хватало, привожу не плохую статейку для новичков по редактированию и созданию шаблона OpenCart на основе default шаблона! Думаю новичкам пригодится данная информация! Итак, имеем установленный Opencart версии 1.5.4, на данном этапе используется стандартный шаблон Default. Новый шаблон будем делать на базе стандартного, так как в нем есть все необходимые файлы структуры, а также можно будет использовать объявленные в нем стили. Вот так выглядит главная страница сайта сейчас: Такая одноколоночная структура используется не очень часто, поэтому сначала приведем главную страницу сайта к более привычному виду. Зайдем в админку сайта, дописав к адресу /admin. Включим отображение категорий товаров на главной странице в левой колонке. Для этого перейдем в пункт Дополнения → Модули. В открывшемся списке модулей выберем модуль Категории и нажмем Изменить. На странице редактирования модуля задается его расположение на сайте. Для каждой страницы расположение можно задать свое (подробнее об этом можно прочитать в статье Схемы в Opencart. Различная структура сайта для отдельных страниц), но мы пока установим его только для главной страницы: щелкнем Добавить модуль, в появившейся строке выберем страницу Home, Расположение — левая колонка, Статус — Включено, отображение количества товаров и сортировка задаются по желанию. Нажмем Сохранить и вернемся на страницу списка модулей. Зайдем в настройки Слайдшоу (кнопкой Изменить), изменим размеры слайдера на 740х230, не забудем сохранить изменения. Теперь можно перейти на главную страницу сайта и оценить внесенные изменения — структура сайта стала двухколоночной с соответствующей шириной слайдера. Для всех остальных страниц можно настроить другое расположение модулей и другую структуру. Шаблоны Opencart располагаются по следующему пути: Корень сайта/catalog/view/theme. Приступим к созданию простого шаблона на базе стандартного. Для начала сделаем копию папки шаблона Default. Копию стандартного шаблона назовем Space-cart и в последствии будем работать только с ним. Для того, чтобы активировать шаблон в административной части сайта, выберем его — Система → Настройки → Мой магазин(по умолчанию)[Изменить] → Витрина. На странице Витрина возле метки Шаблон магазина: выберем шаблон Space-cart из выпадающего списка и нажмем Сохранить. Пока новый шаблон не отличается от стандартного, но это первые шаги к созданию своего шаблона для Opencart. Теперь подойдем к редактированию шаблона Opencart поэтапно: --- Добавлено, 2 дек 2014 --- 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. --- Добавлено, 2 дек 2014 --- - Установим некликабельный задний фон шапки сайта. Для этого будем использовать заранее подготовленное изображение shining_space. jpg размером 980х270px, которое положим в папку space-cart/image. Пропишем путь к файлу с изображением: --- Добавлено, 2 дек 2014 --- продолжение следует
Тем у кого нет проблем с пониманием кода, есть опыт в "ковырянии" шаблонов и т.д. эта статья не будет интересной, а остальным новичкам будет сложно из-за отсутствия картинок-примеров. Проще понимать написаное когда есть визуальный пример после каждого шага-изменения.
Лично мне, это помогло, более доступной информации найти не получалось. По примерам - добавлю в процессе, сделаю скрины всех этапов. Во всяком случае это лучше, чем ничего. Чуть позже продолжение с примерами --- Добавлено, 2 дек 2014 --- продолжение - Теперь надо поработать с логотипом. Для этого будем использовать картинку 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 дек 2014 --- 2. Этот этап совсем небольшой, но тоже очень важный — изменим задний фон всего сайта, редактируя тег body на строке 6 нашего файла стилей: body { background: url('../image/main-background.png'); color: #000000; font-family: Arial, Helvetica, sans-serif; margin: 0px; padding: 0px; } Задний фон сайта качаем тут --- Добавлено, 2 дек 2014 --- 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; } Результат проделанной работы:
Установил сборку ocStore-1.5.5.1.2 + шаблон xds_oc_default_2.0. Никаких сложностей пока не испытал в редактировании под свои нужды. Все предельно просто, с языковыми файлами разобрался. Статья отличная. Один вопрос. вы намеренно не использовали прозрачный фон для логотипа? Как по мне - так не очень выглядит. Самому создавать шаблоны с ноля мне рановато пока. Нужно учитывать много факторов, таких как например динамичные блоки, которые по настройкам из админки можно куда угодно устанавливать (слева, по центру, справа). А редактировать готовый шаблон под себя это мое любимое дело...
