Moushe.ru

Блог обо всём

OpenCart делаем шаблон BlackWhite (1 часть)



Сегодня мы с вами начнём делать новый шаблон для OpenCart’а 1.4.9

12

1. Как всегда копируем на рабочий стол папку со стандартным шаблоном от Opencart’а (default) и сохраняем её под названием BlackWhite, закидываем в папку шаблонов.

2. Открываем админку > система > настройки > магазин > шаблон > BlackWhite > сохранить.

3. Открываем stylesheet.css и изменяем это:

#container {
width: 960px;
margin-left: auto;
margin-right: auto;
text-align: left;
}

на это:

#container {
width: 90%;
margin-left: auto;
margin-right: auto;
text-align: left;
}

это:

#header .div2 {
float: left;
padding-top: 15px;
padding-left: 15px;
}

на это:

#header .div2 {
width: 100%;
background: #000;
height: 240px;
}

4. Открываем админку > система > настройки > изображения > логотип > выбираем картинку ниже и жмём кнопку сохранить:

Logo

(для примера подойдёт, а сами нарисуете что-то более путное)

5. Откроем header.tpl и переместим это:

<div class="div3"><a href="<?php echo str_replace('&', '&amp;', $special); ?>" style="background-image: url('catalog/view/theme/default/image/special.png');"><?php echo $text_special; ?></a><a onclick="bookmark(document.location, '<?php echo addslashes($title); ?>');" style="background-image: url('catalog/view/theme/default/image/bookmark.png');"><?php echo $text_bookmark; ?></a><a href="<?php echo str_replace('&', '&amp;', $contact); ?>" style="background-image: url('catalog/view/theme/default/image/contact.png');"><?php echo $text_contact; ?></a><a href="<?php echo str_replace('&', '&amp;', $sitemap); ?>" style="background-image: url('catalog/view/theme/default/image/sitemap.png');"><?php echo $text_sitemap; ?></a></div>

под это:

<div id="header">
<div class="div1">

Откроем stylesheet.css и изменим это:

#header .div3 {
float: right;
padding-top: 7px;
height: 38px;
}

на это:

#header .div3 {
float: right;
padding-top: 7px;
padding-right: 5px;
height: 38px;
}

и это:

#header .div3 a {
margin-left: 15px;
padding: 1px 0px 2px 20px;
background-repeat: no-repeat;
background-position: left center;
}

на это:

#header .div3 a {
margin-left: 15px;
padding: 1px 0px 2px 20px;
background-repeat: no-repeat;
background-position: left center;
color: #fff;
text-decoration: none;
}
#header .div3 a:hover {
color: #9f9f9f;
text-decoration: underline;
}

6. Если вам как и мне нафиг не нужны кнопки – акции, избранное, контакты, карта сайта в верхнем меню, зато не помешают ссылки на меню входа и регистрацию то изменяем в header.tpl это:

<div class="div3"><a href="<?php echo str_replace('&', '&amp;', $special); ?>" style="background-image: url('catalog/view/theme/default/image/special.png');"><?php echo $text_special; ?></a><a onclick="bookmark(document.location, '<?php echo addslashes($title); ?>');" style="background-image: url('catalog/view/theme/default/image/bookmark.png');"><?php echo $text_bookmark; ?></a><a href="<?php echo str_replace('&', '&amp;', $contact); ?>" style="background-image: url('catalog/view/theme/default/image/contact.png');"><?php echo $text_contact; ?></a><a href="<?php echo str_replace('&', '&amp;', $sitemap); ?>" style="background-image: url('catalog/view/theme/default/image/sitemap.png');"><?php echo $text_sitemap; ?></a></div>

на это:

<div class="div3"><a href="?route=account/login">Войти</a> или <a href="?route=account/create">зарегистрироваться</a></div>

(P.S. – если русские надписи отображаются не понятными символами открывайте файл header.tpl блокнотом – сохранить как – кодировка utf8)

и изменим в stylesheet.css это:

#header .div3 {
float: right;
padding-top: 7px;
padding-right: 5px;
height: 38px;
}
#header .div3 a {
margin-left: 15px;
padding: 1px 0px 2px 20px;
background-repeat: no-repeat;
background-position: left center;
color: #fff;
text-decoration: none;
}
#header .div3 a:hover {
color: #9f9f9f;
text-decoration: underline;
}

на это:

#header .div3 {
float: right;
padding-top: 7px;
padding-right: 5px;
height: 38px;
color: #9f9f9f;
}
#header .div3 a {
color: #fff;
text-decoration: none;
}
#header .div3 a:hover {
color: #9f9f9f;
text-decoration: underline;
}

7. Откроем header.tpl и после этих строк:

<div class="div1">
<div class="div3"><a href="?route=account/login">Войти</a> или <a href="?route=account/create">Зарегистрироваться</a></div>

вставим эти:

<div class="contacts">
Наш телефон: <div class="big"b>8 (903) 006 - 81 - 47</div>
Работаем ежедневно <div class="big">с 10 до 20</div>
Наш адрес: г. Москва<br/>
<div class="big">ТК. "Савёловский"</div>
павильоны <div class="big">С**, А**</div>
</div>

Откроем stylesheet.css и создадим в нём новый стиль:

#header .contacts {
float: right;
padding-top: 7px;
padding-right: 50px;
color: #9f9f9f;
}
#header .big {
color: #fff;
font-weight: bold;
font-size: 12px;
}

8. Откроем header.tpl и найдём эти строки:

<div class="div4"><a href="<?php echo str_replace('&', '&amp;', $home); ?>" id="tab_home"><?php echo $text_home; ?></a>
<?php if (!$logged) { ?>
<a href="<?php echo str_replace('&', '&amp;', $login); ?>" id="tab_login"><?php echo $text_login; ?></a>
<?php } else { ?>
<a href="<?php echo str_replace('&', '&amp;', $logout); ?>" id="tab_logout"><?php echo $text_logout; ?></a>
<?php } ?>
<a href="<?php echo str_replace('&', '&amp;', $account); ?>" id="tab_account"><?php echo $text_account; ?></a><a href="<?php echo str_replace('&', '&amp;', $cart); ?>" id="tab_cart"><?php echo $text_cart; ?></a><a href="<?php echo str_replace('&', '&amp;', $checkout); ?>" id="tab_checkout"><?php echo $text_checkout; ?></a></div>

изменим их на эти:

<div class="div4">
<a href="<?php echo str_replace('&', '&amp;', $home); ?>" id="tab_home"><?php echo $text_home; ?></a>
<a href="<?php echo str_replace('&', '&amp;', $account); ?>"><?php echo $text_account; ?></a>
<a href="<?php echo str_replace('&', '&amp;', $special); ?>"><?php echo $text_special; ?></a>
<a href="<?php echo str_replace('&', '&amp;', $contact); ?>"><?php echo $text_contact; ?></a>
</div>

(удалим: войти, корзина, оформить, и вставим: контакты, акции)

и вставим под эти строки:

<div class="contacts">
Наш телефон: <div class="big"b>8 (903) 006 - 81 - 47</div>
Работаем ежедневно <div class="big">с 10 до 20</div>
Наш адрес: г. Москва<br/>
<div class="big">ТК. "Савёловский"</div>
павильоны <div class="big">С**, А**</div>
</div>

Откроем stylesheet.css и изменим это:

#header .div4 {
width: 510px;
clear: right;
float: right;
height: 32px;
padding-right: 14px;
}
#header .div4 a {
float: left;
margin-right: 2px;
width: 100px;
height: 18px;
padding-top: 9px;
padding-bottom: 9px;
background: url('../image/tab_1.png') no-repeat;
text-align: center;
color: #333333;
text-decoration: none;
font-size: 14px;
font-weight: bold;
position: relative;
z-index: 1;
}
#header .div4 a.selected {
background: url('../image/tab_2.png') no-repeat;
color: #FFF;
padding-bottom: 10px;
z-index: 3;
}

на это:

#header .div4 {
width: 408px;
clear: right;
float: right;
height: 32px;
padding-right: 14px;
padding-top: 81px;
}
#header .div4 a {
float: left;
margin-right: 2px;
width: 100px;
height: 18px;
padding-top: 9px;
padding-bottom: 9px;
background: url('../image/tab_1.png') no-repeat;
text-align: center;
color: #fff;
text-decoration: none;
font-size: 14px;
font-weight: bold;
position: relative;
z-index: 1;
}
#header .div4 a:hover {
background: url('../image/tab_2.png') no-repeat;
color: #000;
padding-bottom: 10px;
z-index: 3;
}

9. Откроем header.tpl и изменим это:

<div class="div5">
<div class="left"></div>
<div class="right"></div>
<div class="center">

на это:

<div class="div5">
<div class="center">

Откроем stylesheet.css и изменим это:

#header .div5 {
clear: both;
}
#header .div5 .left {
background: url('../image/header_1_left.png') no-repeat;
width: 5px;
height: 40px;
float: left;
}
#header .div5 .right {
background: url('../image/header_1_right.png') no-repeat;
width: 5px;
height: 40px;
float: right;
}
#header .div5 .center {
background: url('../image/header_1_center.png') repeat-x;
height: 40px;
margin-left: 5px;
margin-right: 5px;
}

на это:

#header .div5 {
clear: both;
}
#header .div5 .center {
background: url('../image/header_1_center.png') repeat-x;
height: 40px;
}

Теперь откроем папку image и заменим стандартные картинки этими:

header_1_centertab_1tab_2

10. Откроем header.tpl и изменим это:

<div id="search">
<div class="div8"><?php echo $entry_search; ?>&nbsp;</div>
<div class="div9">
<?php if ($keyword) { ?>
<input type="text" value="<?php echo $keyword; ?>" id="filter_keyword" />
<?php } else { ?>
<input type="text" value="<?php echo $text_keyword; ?>" id="filter_keyword" onclick="this.value = '';" onkeydown="this.style.color = '#000000'" style="color: #999;" />
<?php } ?>
<select id="filter_category_id">
<option value="0"><?php echo $text_category; ?></option>
<?php foreach ($categories as $category) { ?>
<?php if ($category['category_id'] == $category_id) { ?>
<option value="<?php echo $category['category_id']; ?>" selected="selected"><?php echo $category['name']; ?></option>
<?php } else { ?>
<option value="<?php echo $category['category_id']; ?>"><?php echo $category['name']; ?></option>
<?php } ?>
<?php } ?>
</select>
</div>
<div class="div10">&nbsp;&nbsp;<a onclick="moduleSearch();" class="button"><span><?php echo $button_go; ?></span></a> <a href="<?php echo str_replace('&', '&amp;', $advanced); ?>"><?php echo $text_advanced; ?></a></div>
</div>

на это:

<div id="search">
<div class="div9">
<?php if ($keyword) { ?>
<input type="text" value="<?php echo $keyword; ?>" id="filter_keyword" />
<?php } else { ?>
<input type="text" value="<?php echo $text_keyword; ?>" id="filter_keyword" onclick="this.value = '';" onkeydown="this.style.color = '#000000'" style="color: #999;" />
<?php } ?>
</div>
<div class="div10">&nbsp;&nbsp;<a onclick="moduleSearch();" class="button"><span><?php echo $button_go; ?></span></a></div>
</div>

Результат:

1

Делаю несколько дополнительных правок, чтобы вы скачивали мой вариант, вот результат:

2

На сегодня всё, до новых встреч. Улыбка

4 Комментария

  1. Татьяна

    09.03.2012 at 15:23

    Влад, а можете включить в один из следующих уроков, как добавлять прозрачность, как на этом сайте http://www.vipjazz.ru/, чтобы картинка фона просвечивалась? Спасибо! 🙂

    • Владислав Храмцов
      vkontakte.ru Владислав Храмцов

      09.03.2012 at 17:41

      В ближайшее время я не планирую уроков по OpenCart — мне нужно сделать несколько шаблонов для продвижения в поисковиках по запросу шаблоны для OpenCart’а 🙂

  2. Дмитрий

    21.11.2012 at 13:02

    Владислав, помогите нубу пожалуйста 🙂
    Если я к примеру хочу не просто черный цвет в шапке, а именно какой нибудь готовый фон с машинами и городом к примеру…что я должен сделать?

Добавить комментарий

Your email address will not be published.

*

CAPTCHA image
*

© 2016 Moushe.ru При копировании материалов, ссылка на нас обязательна!

Вверх ↑



Яндекс.Метрика