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

Категория: 

Создание шаблона OpencartOpencart — система управления контентом для интернет-магазинов, популярная в России и за рубежом. Основными преимуществами 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

Возможно вам также будут интересны статьи:

 

Tags: 

Комментарии

Аватар пользователя Галинка

Большое спасибо авторам! Нашла здесь ответы на все вопросы, теперь смогу сама сделать вполне симпатичный шаблон для своего магазина. На форуме Opencart такую полную информацию надо по крупицам долго собирать.

Аватар пользователя Анатолий

Авторам огромное спасибо)))))первый сайт где можно найти инфу по верстке под opеncart))))остальные сайти такой инфы не дают(((((

Аватар пользователя Артём

Благодарен за статью!
В сети действительно мало информации по созданию своего шаблона для данной CMS. Скажите, будут ли ещё статьи по данной тематике? Или где ещё можно почитать подобный материал?
Спасибо.

Аватар пользователя Asterial

Информацию про opencart лучше искать на зарубежных ресурсах. Много хороших инструкций и ответов на большинство вопросов есть на официальном сайте http://www.opencart.com/ в разделе документация, а также на форуме опенкарта - http://forum.opencart.com/. Но, естественно, вся информация на английском языке.
В будущем планирую выкладывать еще статьи про опенкарт и другие CMS. Но написание и оформление таких статей требует достаточно много времени, поэтому выкладываю не очень часто.

Аватар пользователя Рамиль М.

Потрясающая статья. На русскоязычных ресурсах действительно не найти такой подробной информации. Просьба дополнить видео-уроками и подскажите так же: Какими инструментами /редакторами лучше пользоваться, возможности редактировать сайт "на лету" - Вашему творению цены нет !!!!
С уважением
Рамиль М. (ramiler.com)

Аватар пользователя Asterial

Спасибо за комментарий :) Для меня лучший редактор Sublime Text 2, на втором месте Notepad++, но у него нет версии под Линукс, поэтому только Sublime.

Аватар пользователя Павел

Спасибо за статью. Теперь хоть немного понятно как устроена визуальная часть сие детища)

Аватар пользователя grafuss

БОЛЬШОЕ!!! СПАСИБО!!!

Аватар пользователя Константин

Очень полезная статья, автору респект!!!!!

Аватар пользователя Лариса

Когда корректирую файл stylesheet, логотип сайта не меняет местоположение и фон не ставится... Может я что-то не то делаю?

Аватар пользователя Asterial

возможно, название шаблона поменяли, а путь к файлу стилей остался прежним? В файле header.tpl в строке <link rel="stylesheet" type="text/css" href="catalog/view/theme/default/stylesheet/stylesheet.css" /> вместо default должно быть название вашего шаблона

Аватар пользователя Donkan

Скорее всего проблема в кешировании изображения браузером. Для его очистки используйте комбинацию клавиш ctr+shift+del

Аватар пользователя Надежда

Спасибо за статью.
Собираюсь установить и купить хороший шаблон
Есть несколько вопросов по движку:
можно ли самому прописывать метатеги?
можно делать самому перелинковку информационных статей, категорий и товаров?
можно ли сделать статьи 2 уровня вложенности?
можно ли залить базу данных с другого магазина?

Спасибо.Буду очень признательна за ответы

Аватар пользователя Asterial

Основные метатеги прописываются в админке, например, такие как title, keywords, meta description. Статьи в стандартной версии не очень хорошо организованы, с ними почти ничего нельзя делать. Чтобы сделать нормальные статьи я покупала модуль статей-новостей, в нем были и категории, и можно к статье присоединять рекомендуемые товары.
Насчет базы другого магазина сложно сказать, зависит от того, какой движок, и какая у него структура базы.

Аватар пользователя Юлия

Хочу присоединиться к предыдущим ораторам и поблагодарить за статью. Материал очень полезный и редкий. Большое спасибо!
А можно поподробнее узнать о модуле для новостей? что за он? есть ли какие-нибудь бесплатные аналоги? Спасибо.

Аватар пользователя Asterial

Для нескольких сайтов я использовала этот платный модуль - http://shopencart.com/Opencart-modules/news-blog-opencart-1.5 Изначально он на английском, я его переводила. Недавно появился бесплатный блог-модуль, в котором очень много полезных функций (на русском сайте опенкарта выложили его локализацию)- http://opencartforum.ru/files/file/1158-russkii-perevod-bloga-novostei-p.... Правда, он немного сыроват, но автор занимается исправлением найденных багов, так что будем следить за развитием модуля :)
Есть еще несколько простых бесплатных модулей новостей, как на русском сайте опенкарта, так и на зарубежном, но, как правило, в них нет категорий, а это, я считаю, большой недостаток. Среди платных модулей выбор побольше, но многие из них слишком дорогие.

Аватар пользователя Андрей

Спасибо автору за урок.Такого подробного материала днем с огнем не сыщешь.Буду ждать очередного урока и надеяться, что у автора появится вдохновение и время.Пожалуйста, пишите почаще.

Аватар пользователя Андрей

У меня такой вопрос.Магазин обслуживает две компании (одна скажем большая,другая маленькая), но каждая хочет на главной странице свой блок категорий с логотипом в позиции над слайдером. Возможно это организовать в дефолтном шаблоне, без установки дополнительных модулей?
Спасибо.

Аватар пользователя Asterial

У вас мультимагазин или один магазин, и в нем категории от разных компаний?

Аватар пользователя Андрей

Магазин один.Подразделения два.Одно продает,другое оказывает услуги.Категории разные.Заказчики хотят видеть свои менюшки в отдельно стоящих блоках.Второй день изучаю O_cart,и вижу - модуль "категории" выводит на страницу сразу все категории,какие есть, из списка их выбрать нельзя. Может сам движок не достаточно гибкий, а может наоборот :)
Вот скрин ' http://files.mail.ru/3EBA72FB38034E728E6868A1E8D177F9 ' может так будет понятней.
Спасибо

Аватар пользователя sanegin

Не пройду мимо, спасибо автору, замечательная статья, все кратко, толково, по делу. Продолжаем пилить OpenKart )))

Аватар пользователя Виталий

Здравствуйте, как оставить часть экрана с товаром белой?

Аватар пользователя Asterial

Добрый день. Как я понимаю, вам нужен белый фон для центральной части сайта. В данном случае проще всего прописать белый фон всему контейнеру сайта, добавив background: #fff;
(приблизительно это будет строка 67 в файле stylesheet.css):

#container {
background: #fff;
margin-left: auto;
margin-right: auto;
text-align: left;
width: 980px;
}

Если же все-таки нужна прозрачность, например, за меню, тогда придется добавить еще один контейнер, в который поместить все центральные элементы, и уже ему присвоить белый фон.

Аватар пользователя Vanillaman

Здравствуйте, хочу сделать между центральным контейнером и заливкой пару милиметров белого фона, а то сразу идет резкий переход, не совсем хорошо смотриться, как правильно это сделать???? нужна прозрачность, например, за меню, тогда придется добавить еще один контейнер, в который поместить все центральные элементы, и уже ему присвоить белый фон - так и нужно чтобы было) заранее спасибо за ответ

Аватар пользователя Asterial

Добрый день! Чтобы поместить все центральные элементы в один контейнер, добавьте в файл header.tpl (находится в папке catalog/view/theme/Ваша_тема/template/common) в самом низу, после строки <div id="notification"></div> какой-нибудь новый div, пусть будет <div class="main-container">
А закрывающий </div> будет в файле footer.tpl. Можно его поставить в самом начале кода перед <div id="footer">, тогда футер не будет включаться в новый контейнер, либо после кода футера, чтобы он тоже был внутри.
После этого можно прописать фон для добавленного контейнера в файле stylesheet.css :

.main-container {
background: #fff;
}

Ну и другие стили прописать при желании.

Про милиметры не совсем понятно, что вы хотите сделать, но, надеюсь, мой ответ вам поможет

Аватар пользователя Denchis

Спасибо за информацию, материал очень хороший! Описан простым и понятным языком!
Будем читать вас ;)

Аватар пользователя nata_lia

Может ли быть, что в версии 1.5.5.1 в Мозилле и Хроме все ОК, а в ИЕ - наперекосяк, заранее спасибо!

Аватар пользователя Asterial

Конечно может. Дефолтный шаблон опенкарт (и все шаблоны, сделанные на его основе) не адаптирован под ИЕ старых версий, например, 7 и 8, поэтому, если нужна поддержка ИЕ, то надо отдельно с этим заморачиваться.

Аватар пользователя Виталий

Спасибо, это то что нужно

Аватар пользователя Krasavchik

Спасибо Автору делаете большое дело, просвещаете нас новичков. Я как ребенок радовался всем изменениям у себя в магазине. Спасибо.

Аватар пользователя Ирина

Какое счастье, что вы есть! Большое спасибо и низкий вам поклон за эту инструкцию. Больше мне не придется покупать платные шаблоны и пытаться "на ощупь" их подправлять, когда заказчику хочется "все то же самое, но немного позеленее..." Если есть способ отблагодарить вас более весомо, чем просто словами, напишите мне об этом.

Аватар пользователя Сергей

Спасибо за ценный урок! Не подскажите а можно ли редактировать текст сообщения приходящего на имейл клиента при заказе товара?

Аватар пользователя Asterial

Сам внешний вид письма можно изменить в файле catalog/view/theme/ваша тема/template/mail/order.tpl, а тексты, выводимые в письме, редактируются в файлах локализации - catalog/language/russian/mail. Там открываете блокнотом файл, например, order.php ищете нужный текст и редактируете.

Аватар пользователя Сергей

Огромное спасибо!!! Очень полезный и интересный сайт!

Аватар пользователя Руслан Ch

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

Аватар пользователя alexidi

Большое спасибо за ценную информацию! Буду теперь часто посещать ваш сайт!

Аватар пользователя alexidi

Был бы очень благодарен если вы написали статью о том, как добавлять в шапку различные элнменты, а именно счетчик обратного отсчета. Можно рассчитывать на это?

Аватар пользователя Max

Уважаемый(ая) Автор,
У меня все замечательно, с первого раза получилось на Localhost, но при переносе изменений на нешний хост, вся структура витрины разваливается. Возникает обычный текст и картинки, далекие от витирины opencart. Пробовал раз пять. Все тоже самое - получается текст вперемежку с картинками, а не витрина. С чем это м.б. связано?

Аватар пользователя Asterial

проверьте сначала на всякий случай, тот ли у вас выбран шаблон в админке магазина по пути система-настройки-изменить-витрина

Аватар пользователя Владмир

Спасибо большое:) Вот чего мне не хватало) полезный источник:)

Аватар пользователя Александр

Для начинающего сайтостроителя ваши статьи, действительно, настоящая находка. Спасибо!

Аватар пользователя SKY

Огромное спасибо! Как раз то что нужно новичку!

Аватар пользователя Катя

Огромное спасибо! Замечательная и очень подробная статья.

Аватар пользователя Виталий

Добрый день. У меня проблемка с ПОИСКОМ. Магазин флагов, товар имеет названия - флаг России, флаг Украины, флаг США и т.д. Если в поиске вводить - флаг США, то поисковик выдает все страницы со словом "флаг". Как сделать чтобы выдавался только искомое - "флаг США". Сайт http://flagmaster.com.ua/
Спасибо.

Аватар пользователя Юрий

Здравствуйте! У меня проблема - не знаю как поменять горизонтальное меню. Хочу, чтобы там было написано как тут: http://deliri.ru/demoshop/# (о магазине, доставка и оплата и тд)

Подскажите как это делается?

Аватар пользователя Asterial

Меню редактируется в файле /catalog/view/theme/ваша_тема/template/common/header.tpl, ищете строку <div id="menu"> в ней удаляете все, кроме <ul></ul> и закрывающего </div>
Внутри тэга <ul> пишете свои пункты, каждый пункт будет иметь вид <li><a href="ваша ссылка">Название ссылки</a></li>
Можно еще удалить <?php if ($categories) { ?> и закрывающий <?php } ?>

Аватар пользователя михаил

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

body {
background: url('../image/main-background.png');
color: #000000;
font-family: Arial, Helvetica, sans-serif;
margin: 0px;
padding: 0px;
}
Удивительно, но фон не меняется, файл со стилями и картинку залил в нужные папки, перепроверил десять раз, изменения внес. Кто с таким столкнулся?

Аватар пользователя Asterial

а если поставить цвет вместо картинки, например, background: #333333; тоже не меняется?

Аватар пользователя михаил

Нет, ничего не происходит, ни с цветом ни с картинкой, не меняется фон. Странно конечно.

Аватар пользователя михаил

Упс, вот цвет меняется фона, а изображение нет.

Страницы