Asterial web design - створення сайтів

Opencart - система управління контентом для інтернет-магазинів, популярна вУкаіни і за кордоном. Основними перевагами CMS є простота установки і адміністрування, маленька вага бази, надійність і хороша швидкість роботи навіть на порівняно великих проектах. У порівнянні з багатьма іншими системами для opencart не так вже й багато шаблонів, тому часто користувачі, намагаючись зробити шаблон самостійно, стикаються з труднощами в пошуках відповідей на питання - як зробити шаблон для Opencart, як його редагувати або змінити. У цій статті розглянемо створення простого шаблону для Opencart, а в кінці статті у вас буде можливість скачати готовий безкоштовний шаблон і використовувати його для своїх проектів.

Отже, маємо встановлений Opencart версії 1.5.4, на даному етапі використовується стандартний шаблон Default. Новий шаблон будемо робити на базі стандартного, так як в ньому є всі необхідні файли структури, а також можна буде використовувати оголошені в ньому стилі. Ось так виглядає головна сторінка сайту зараз:

Шаблони 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. Завантажити зображення. Пропишемо шлях до файлу із зображенням:

Зараз логотип розташований нагорі шапки, не зовсім по центру, що не дуже красиво. Розмістимо його нижче, змінивши 102 рядок:

(Зараз і далі в статті вносяться зміни будуть виділені напівжирним шрифтом)

- Посунемо перемикач мов трохи вправо, щоб він не наповзав на логотип і змінимо колір заголовка на білий. Редагуємо рядок 108:

- Змінимо зовнішній вигляд Кошики, для початку приберемо задній білий фон і встановимо закруглені краї для неактивної кошика. Уважно вносимо наступні зміни на рядку 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. Змінюємо футер. зробимо його темним, закруглити краю і змінимо колір тексту на білий. Редагуємо, починаючи з рядка 1 593:

#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;
>

#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

Можливо вам також будуть цікаві статті:

Доброго дня. Як я розумію, вам потрібен білий фон для центральної частини сайту. В даному випадку найпростіше прописати білий фон всьому контейнеру сайту, додавши background: #fff;
(Приблизно це буде рядок 67 в файлі stylesheet.css):

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

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

Vanillaman (гість)

Привіт, хочу зробити між центральним контейнером і заливкою пару міліметрів білого тла, а то відразу йде різкий перехід, не зовсім добре виглядає, як правильно це зробити. потрібна прозорість, наприклад, за меню, тоді доведеться додати ще один контейнер, в який помістити всі центральні елементи, і вже йому привласнити білий фон - так і треба щоб було) заранее спасибо за ответ

Добридень! Щоб помістити всі центральні елементи в один контейнер, додайте в файл header.tpl (знаходиться в папці catalog / view / theme / Ваша_тема / template / common) в самому низу, після рядка

який-небудь новий div, нехай буде буде в файлі footer.tpl. Можна його поставити на самому початку коду перед