Moushe.ru

Блог обо всём

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



Сегодня мы перерисуем панель навигации нашего интернет магазина.

До:                                                      После:

13

Список задач на сегодня:

1. Немного переделаем панель навигации

2. Немного переделаем ссылки категорий товаров

 

Ну что-ж, давайте начнём:

1. Откроем header.tpl (..\catalog\view\theme\Photo4You\template\common) и вместо этого кода:

<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="div5">
<div class="left"></div>
<div class="right"></div>
<div class="center">

</div>
</div>

вставим этот:

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

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

Открываем stylesheet.css (..\catalog\view\theme\Photo4You\stylesheet) и изменяем этот код:

#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 .div5 a {
float: left;
margin-right: 2px;
width: 100px;
height: 18px;
padding-top: 9px;
padding-bottom: 9px;
text-align: center;
color: #ffffff;
text-decoration: none;
font-size: 14px;
font-weight: bold;
position: relative;
z-index: 1;
}
#header .div5 a.selected {
background: url('../image/tab_1.png') no-repeat;
color: #000000;
text-decoration: none;
padding-bottom: 10px;
z-index: 3;
}

Заходим в папку image (..\catalog\view\theme\Photo4You\image) и закидываем туда эти картинки:

header_1_leftheader_1_centerheader_1_righttab_1

Любуемся результатом:

2

2. Откроем stylesheet.css (..\catalog\view\theme\Photo4You\stylesheet) и вставим в него такой код:

#category a {
color: #000;
font-weight: bold;
text-decoration: none;
}
#category a:hover {
color: #26779d;
}

Смотрим результат:

3

На этом наш шаблон окончен (полоску футера оставил серой — с помощью последних уроков вы легко сможете её изменить), до новых встреч. Шаблон можно будет скачать 12 декабря. Улыбка

1 Комментарий

  1. kvartnikstroy

    19.12.2011 at 23:16

    Пора переходить на версию 1.5…
    Намного функциональнее!

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

Your email address will not be published.

*

CAPTCHA image
*

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

Вверх ↑



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