Moushe.ru

Блог обо всём

OcStore 1.5.4.1 делаем шаблон NextShop (10 часть)


Продолжим доделывать наш шаблон NextShop.

nextshop theme ocstore

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

1. Переделаем страницу производителей

2. Чистим css

3. Добавим корзине картинку

Приступим:

1. Откроем файл ../catalog/view/theme/nextshop/template/product/manufacturer_list.tpl и удалим эти строки (11-15):

<p><b><?php echo $text_index; ?></b>
<?php foreach ($categories as $category) { ?>
&nbsp;&nbsp;&nbsp;<a href="index.php?route=product/manufacturer#<?php echo $category['name']; ?>"><b><?php echo $category['name']; ?></b></a>
<?php } ?>
</p>

удалим эту строку (13):

<div class="manufacturer-heading"><?php echo $category['name']; ?><a id="<?php echo $category['name']; ?>"></a></div>

2. Откроем файл ../catalog/view/theme/nextshop/stylesheet/stylesheet.css и вместо этих строк (46-53):

a, a:visited, a b {
color: #38B0E3;
text-decoration: underline;
cursor: pointer;
}
a:hover {
text-decoration: none;
}

вставим эти:

a, a:visited, a b {
color: #45a5ec;
text-decoration: none;
cursor: pointer;
}
a:hover {
color: #000;
}

вместо этих строк(81-89):

ul a, ul a:visited {
color: #45a5ec;
text-decoration: none;
font-size: 14px;
}
ul a:hover {
color: #000;
}

вставим эти:

ul a, ul a:visited {
font-size: 14px;
}

вместо этих строк (373-380):

#headinfo a {
color: #45a5ec;
text-decoration: none;
font-size: 14px;
}
#headinfo a:hover {
color: #000;
}

вставим эти:

#headinfo a {
font-size: 14px;
}

удалим эти строки (386-393):

.breadcrumb a {
text-decoration: none;
color: #45a5ec;
}
.breadcrumb a:hover{
text-decoration: underline;
color: #000;
}

вместо этих строк (386-418):

.success, .warning, .attention, .information {
padding: 10px 10px 10px 33px;
margin-bottom: 15px;
color: #555555;
-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;
}
.success {
background: #EAF7D9 url('../image/success.png') 10px center no-repeat;
border: 1px solid #BBDF8D;
-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;
}
.warning {
background: #FFD1D1 url('../image/warning.png') 10px center no-repeat;
border: 1px solid #F8ACAC;
-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;
}
.attention {
background: #FFF5CC url('../image/attention.png') 10px center no-repeat;
border: 1px solid #F2DD8C;
-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;
}

вставим эти:

.success, .warning, .attention, .information {
padding: 10px 10px 10px 33px;
margin-bottom: 15px;
color: #555555;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
}
.success {
background: #EAF7D9 url('../image/success.png') 10px center no-repeat;
border: 1px solid #BBDF8D;
}
.warning {
background: #FFD1D1 url('../image/warning.png') 10px center no-repeat;
border: 1px solid #F8ACAC;
}
.attention {
background: #FFF5CC url('../image/attention.png') 10px center no-repeat;
border: 1px solid #F2DD8C;
}

вместо этих строк (533-553):

a.button, input.button {
cursor: pointer;
color: #FFFFFF;
line-height: 12px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
background: url('../image/button.png') top left repeat-x;
-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;
-webkit-box-shadow: 0px 2px 2px #DDDDDD;
-moz-box-shadow: 0px 2px 2px #DDDDDD;
box-shadow: 0px 2px 2px #DDDDDD;
}
a.button {
display: inline-block;
text-decoration: none;
padding: 6px 12px 6px 12px;
}

вставим эти:

a.button, input.button {
cursor: pointer;
color: #FFFFFF;
line-height: 12px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
background: url('../image/button.png') top left repeat-x;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
}
a.button {
display: inline-block;
text-decoration: none;
padding: 6px 12px;
}

вместо этих строк (676-685):

.box-product .name a {
color: #45a5ec;
font-weight: bold;
text-decoration: none;
display: block;
margin-bottom: 4px;
}
.box-product .name a:hover {
color: #000;
}

вставим эти:

.box-product .name a {
font-weight: bold;
display: block;
margin-bottom: 4px;
}

удалим эти строки (720-722):

.box-category a:hover {
color: #49a5ec;
}

3. Ищем иконку корзины (я взял набор иконок здесь) и закинем её в папку ../catalog/view/theme/nextshop/image:

cart_img

3.1. Откроем файл ../catalog/view/theme/nextshop/template/module/cart.tpl и после этой строки (1):

<div id="cart">

вставим эту строку:

<div class="cartimage"><a href="<?php echo $cart; ?>"><img src="catalog/view/theme/nextshop/image/cart_img.png"></a></div>

3.2. Откроем файл ../catalog/view/theme/nextshop/stylesheet/stylesheet.css и после этих строк (157-163):

#header #cart .cartimage {
float: left;
margin-top: 0px;
margin-right: 5px;
margin-left: 100px;
}

вставим эти:

#cart img {
float: left;
margin-top: 5px;
margin-left: 60px;
}

На сегодня всё, следите за новостями.


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

  1. Дмитрий

    04.07.2013 at 21:55

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

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

Your email address will not be published.

*

CAPTCHA image
*

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

Вверх ↑



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