Moushe.ru

Блог обо всём

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



Сегодня мы опять продолжим делать шаблон для OcStore 1.5.4.1.

nextshop_category

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

1. Правим карточку товара

2. Правим акции

3. Правим стили товаров

Приступим:

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

h1, .welcome {
color: #636E75;
font-family: Verdana;
margin-top: 0px;
margin-bottom: 20px;
font-size: 32px;
font-weight: normal;
text-shadow: 0 0 1px rgba(0, 0, 0, .01);
}

вставим эти:

.welcome {
color: #636E75;
font-family: Verdana;
margin-top: 0px;
margin-bottom: 20px;
font-size: 32px;
font-weight: normal;
text-shadow: 0 0 1px rgba(0, 0, 0, .01);
}
h1 {
font-family: Verdana,Geneva,sans-serif;
font-weight: normal;
font-size: 14px;
text-transform: uppercase;
border-bottom: 1px solid #45a5ec;
padding: 8px 10px 7px 10px;
color: #000;
margin-top: 0px;
margin-bottom: 10px;
}

эти строки (1008-1014):

.product-info .image {
border: 1px solid #E7E7E7;
float: left;
margin-bottom: 20px;
padding: 10px;
text-align: center;
}

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

.product-info .image {
border: 1px solid #e7e7e7;
float: left;
margin-bottom: 20px;
padding: 10px;
text-align: center;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
}

эти строки (1025-1027):

.product-info .image-additional img {
border: 1px solid #E7E7E7;
}

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

.product-info .image-additional img {
border: 1px solid #E7E7E7;
}
.product-info .image-additional img:hover {
border: 1px solid #45a5ec;
}

(теперь наши миниатюрки при наведении на них курсором мыши подсвечиваются)

эти строки (594-627):

.htabs {
height: 30px;
line-height: 16px;
border-bottom: 1px solid #DDDDDD;
}
.htabs a {
border-top: 1px solid #DDDDDD;
border-left: 1px solid #DDDDDD;
border-right: 1px solid #DDDDDD;
background: #FFFFFF url('../image/tab.png') repeat-x;
padding: 7px 15px 6px 15px;
float: left;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight: bold;
text-align: center;
text-decoration: none;
color: #000000;
margin-right: 2px;
display: none;
}
.htabs a.selected {
padding-bottom: 7px;
background: #FFFFFF;
}
.tab-content {
border-left: 1px solid #DDDDDD;
border-right: 1px solid #DDDDDD;
border-bottom: 1px solid #DDDDDD;
padding: 10px;
margin-bottom: 20px;
z-index: 2;
overflow: auto;
}

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

.htabs {
height: 30px;
line-height: 16px;
border-bottom: 1px solid #DDDDDD;
}
.htabs a {
border-top: 1px solid #DDDDDD;
border-left: 1px solid #DDDDDD;
border-right: 1px solid #DDDDDD;
background: #fff;
padding: 7px 15px 6px 15px;
float: left;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight: bold;
text-align: center;
text-decoration: none;
color: #000;
margin-right: 1px;
display: none;
-webkit-border-radius: 10px 10px 0 0;
-moz-border-radius: 10px 10px 0 0;
-khtml-border-radius: 10px 10px 0 0;
border-radius: 10px 10px 0 0;
}
.htabs a.selected {
padding-bottom: 7px;
}
.htabs a:hover {
color: #45a5ec;
}
.tab-content {
border-left: 1px solid #DDDDDD;
border-right: 1px solid #DDDDDD;
border-bottom: 1px solid #DDDDDD;
padding: 10px;
margin-bottom: 20px;
z-index: 2;
overflow: auto;
-webkit-border-radius: 0 0 10px 10px;
-moz-border-radius: 0 0 10px 10px;
-khtml-border-radius: 0 0 10px 10px;
border-radius: 0 0 10px 10px;
}

1.2. Откроем файл ../catalog/language/russian/product/product.php и вместо этой строки (9):

$_['text_stock']        = 'Наличие:';

вставим эту:

$_['text_stock']        = 'Товар:';

а эту (17):

$_['text_or']           = '- или -';

заменим этой:

$_['text_or']           = '- или добавить -';

а эту (18):

$_['text_reviews']      = 'Отзывов: %s';

заменим этой:

$_['text_reviews']      = 'Отзывы: %s';

На мой взгляд так будет лучше.

2. Откроем файл ../catalog/view/theme/nextshop/template/product/special.tpl и удалим эту строку (36):

<div class="product-compare"><a href="<?php echo $compare; ?>" id="compare-total"><?php echo $text_compare; ?></a></div>

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

.product-list > div {
overflow: auto;
margin-bottom: 15px;
}
.product-list .right {
float: right;
margin-left: 15px;
}
.product-list > div + div {
border-top: 1px solid #EEEEEE;
padding-top: 16px;
}
.product-list .image {
float: left;
margin-right: 10px;
}
.product-list .image img {
padding: 3px;
border: 1px solid #E7E7E7;
}
.product-list .name {
margin-bottom: 3px;
}
.product-list .name a {
color: #38B0E3;
font-weight: bold;
text-decoration: none;
}
.product-list .description {
line-height: 15px;
margin-bottom: 5px;
color: #4D4D4D;
}
.product-list .rating {
color: #7B7B7B;
}
.product-list .price {
float: right;
height: 50px;
margin-left: 8px;
text-align: right;
color: #333333;
font-size: 12px;
}
.product-list .price-old {
color: #F00;
text-decoration: line-through;
}
.product-list .price-new {
font-weight: bold;
}
.product-list .price-tax {
font-size: 12px;
font-weight: normal;
color: #BBBBBB;
}
.product-list .cart {
margin-bottom: 3px;
}
.product-list .wishlist, .product-list .compare {
margin-bottom: 3px;
}
.product-list .wishlist a {
color: #333333;
text-decoration: none;
padding-left: 18px;
display: block;
background: url('../image/add.png') left center no-repeat;
}
.product-list .compare a {
color: #333333;
text-decoration: none;
padding-left: 18px;
display: block;
background: url('../image/add.png') left 60% no-repeat;
}

вставим эти:

.product-list > div {
overflow: auto;
margin-bottom: 15px;
}
.product-list .right {
float: right;
margin-left: 15px;
}
.product-list > div + div {
border-top: 1px solid #EEEEEE;
padding-top: 16px;
}
.product-list .image {
float: left;
margin-right: 10px;
}
.product-list .image img {
padding: 3px;
border: 1px solid #E7E7E7;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
}
.product-list .name {
margin-bottom: 3px;
}
.product-list .name a {
color: #000;
text-decoration: none;
font-family: Verdana,Geneva,sans-serif;
font-size: 15px;
text-transform: uppercase;
}
.product-list .name a:hover {
color: #45a5ec;
}
.product-list .description {
line-height: 15px;
margin-bottom: 5px;
color: #4D4D4D;
}
.product-list .rating {
color: #7B7B7B;
}
.product-list .price {
float: right;
height: 50px;
margin-left: 8px;
text-align: right;
color: #333333;
font-size: 12px;
}
.product-list .price-old {
color: #F00;
text-decoration: line-through;
}
.product-list .price-new {
font-weight: bold;
}
.product-list .price-tax {
font-size: 12px;
font-weight: normal;
color: #BBBBBB;
}
.product-list .cart {
margin-bottom: 3px;
}
.product-list .wishlist, .product-list .compare {
margin-bottom: 3px;
}
.product-list .wishlist a, .product-list .compare a {
color: #333333;
text-decoration: none;
padding-left: 18px;
display: block;
background: url('../image/add.png') left center no-repeat;
}
.product-list .wishlist a:hover, .product-list .compare a:hover {
color: #45a5ec;
text-decoration: none;
padding-left: 18px;
display: block;
background: url('../image/add.png') left center no-repeat;
}

изменим это (943-1014):

.product-grid {
width: 100%;
overflow: auto;
}
.product-grid > div {
width: 130px;
display: inline-block;
vertical-align: top;
margin-right: 20px;
margin-bottom: 15px;
}
#column-left + #column-right + #content .product-grid > div {
width: 125px;
}
.product-grid .image {
display: block;
margin-bottom: 0px;
}
.product-grid .image img {
padding: 3px;
border: 1px solid #E7E7E7;
}
.product-grid .name a {
color: #38B0E3;
font-weight: bold;
text-decoration: none;
display: block;
margin-bottom: 4px;
}
.product-grid .description {
display: none;
}
.product-grid .rating {
display: block;
margin-bottom: 4px;
}
.product-grid .price {
display: block;
font-weight: bold;
color: #333333;
margin-bottom: 4px;
}
.product-grid .price-old {
color: #F00;
text-decoration: line-through;
}
.product-grid .price-new {
font-weight: bold;
}
.product-grid .price .price-tax {
display: none;
}
.product-grid .cart {
margin-bottom: 3px;
}
.product-grid .wishlist, .product-grid .compare {
margin-bottom: 3px;
}
.product-grid .wishlist a {
color: #333333;
text-decoration: none;
padding-left: 18px;
display: block;
background: url('../image/add.png') left center no-repeat;
}
.product-grid .compare a {
color: #333333;
text-decoration: none;
padding-left: 18px;
display: block;
background: url('../image/add.png') left center no-repeat;
}

на это:

.product-grid {
width: 100%;
overflow: auto;
text-align: center;
}
.product-grid > div {
max-width: 200px;
display: inline-block;
vertical-align: top;
margin-right: 20px;
margin-bottom: 15px;
border: 1px solid #fff;
}
.product-grid > div:hover {
display: inline-block;
vertical-align: top;
margin-right: 20px;
margin-bottom: 15px;
border: 1px solid #45a5ec;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
}
#column-left + #column-right + #content .product-grid > div {
width: 125px;
}
.product-grid .image {
display: block;
margin-bottom: 0px;
}
.product-grid .image img {
padding: 3px;
}
.product-grid .name a {
color: #000;
font-family: Verdana,Geneva,sans-serif;
font-size: 14px;
text-transform: uppercase;
text-decoration: none;
display: block;
margin-bottom: 4px;
}
.product-grid .name a:hover {
color: #45a5ec;
}
.product-grid .description {
display: none;
}
.product-grid .rating {
display: block;
margin-bottom: 4px;
}
.product-grid .price {
display: block;
font-weight: bold;
color: #333333;
margin-bottom: 4px;
}
.product-grid .price-old {
color: #F00;
text-decoration: line-through;
}
.product-grid .price-new {
font-weight: bold;
}
.product-grid .price .price-tax {
display: none;
}
.product-grid .cart {
margin-bottom: 3px;
}
.product-grid .wishlist, .product-grid .compare {
margin-bottom: 3px;
}
.product-grid .wishlist a, .product-grid .compare a {
color: #000;
text-decoration: none;
}
.product-grid .wishlist a:hover, .product-grid .compare a:hover {
color: #45a5ec;
}

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

6 Комментариев

  1. Дмитрий

    11.06.2013 at 19:59

    Сделал всё по уроку, в итоге вот что вышло

    http://s017.radikal.ru/i421/1306/f0/de7384c93cb7.jpg

    Как это исправить?

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

      14.06.2013 at 19:49

      Дайте ссылку на сайт, посмотрю css.

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

      17.06.2013 at 21:37

      min-width: 200px; измените на max-width: 200px; и скажите плиз название модуля производителей. 🙂

  2. Дмитрий

    18.06.2013 at 16:12

    Я так понял имеется ввиду модуль «filterpro»

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

      18.06.2013 at 17:23

      Я думал производители идут отдельно, спасибо что дали название. 🙂

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

Your email address will not be published.

*

CAPTCHA image
*

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

Вверх ↑



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