Moushe.ru

Блог обо всём

OcStore 1.5.4.1.2 несколько улучшений (2 часть)



Продолжим улучшать стандартный шаблон OcStore 1.5.4.1.2.

Ocstore-2-lesson

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

1. Изменим стили ссылок

2. Изменим стили товаров в модулях и категориях

3. Изменим стили корзины

4. Изменим стили футера (уберём уродливые кружки, изменим стили блока и ссылок)

Приступим:

1. Откроем файл ../catalog/view/theme/default/stylesheet/stylesheet.css и вместо этих строк (34-41):

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

вставим эти:

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

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

127:     color: #999; (#currency a)

132:     color: #000; (#currency a b)

162:     color: #38B0E3; (#header #cart .heading a)

300:     color: #38B0E3; (#header .links a)

686:     color: #38B0E3; (.box-product .name a)

862:     color: #38B0E3; (.product-list .name a)

936:     color: #38B0E3; ( .product-grid .name a)

 

2. Чтобы вам было понятно что же мы сделаем, сравните эти скриншоты:

До:                                                      После:

doposle

Изменим эти строки (663-707):

.box-product {
width: 100%;
overflow: auto;
}
.box-product > div {
width: 130px;
display: inline-block;
vertical-align: top;
margin-right: 20px;
margin-bottom: 20px;
}
#column-left + #column-right + #content .box-product > div {
width: 119px;
}
.box-product .image {
display: block;
margin-bottom: 0px;
}
.box-product .image img {
padding: 3px;
border: 1px solid #E7E7E7;
}
.box-product .name a {
font-weight: bold;
text-decoration: none;
display: block;
margin-bottom: 4px;
}
.box-product .price {
display: block;
font-weight: bold;
color: #333333;
margin-bottom: 4px;
}
.box-product .price-old {
color: #F00;
text-decoration: line-through;
}
.box-product .price-new {
font-weight: bold;
}
.box-product .rating {
display: block;
margin-bottom: 4px;
}

на эти:

.box-product {
width: 100%;
overflow: auto;
text-align: center;
}
.box-product > div {
width: 14%;
display: inline-block;
vertical-align: top;
margin-right: 20px;
margin-bottom: 20px;
}
#column-left + #column-right + #content .box-product > div {
width: 119px;
}
.box-product .image {
display: block;
margin-bottom: 0px;
}
.box-product .image img {
padding: 3px;
border: 1px solid #E7E7E7;
}
.box-product .name a {
font-weight: bold;
text-decoration: none;
margin-bottom: 4px;
display: table-cell;
height: 30px;
width: 14%;
}
.box-product .price {
display: block;
font-weight: bold;
color: #333333;
margin-bottom: 4px;
}
.box-product .price-old {
color: #F00;
text-decoration: line-through;
}
.box-product .price-new {
font-weight: bold;
}
.box-product .rating {
display: block;
margin-bottom: 4px;
}

2.1. Если вы будете менять размер изображений (я выбрал для рекомендуемых товаров размер изображений 180 x 180), вы можете столкнуться с этим:

do 1

это исправляется очень просто:

.box-product {
width: 100%;
overflow: auto;
text-align: center;
}
.box-product > div {
width: 14%; – это значение
display: inline-block;
vertical-align: top;
margin-right: 20px;
margin-bottom: 20px;
}
#column-left + #column-right + #content .box-product > div {
width: 119px;
}
.box-product .image {
display: block;
margin-bottom: 0px;
}
.box-product .image img {
padding: 3px;
border: 1px solid #E7E7E7;
}
.box-product .name a {
font-weight: bold;
text-decoration: none;
display: block;
margin-bottom: 4px;
display: table-cell;
height: 30px;
width: 14%; – и это значение
}
.box-product .price {
display: block;
font-weight: bold;
color: #333333;
margin-bottom: 4px;
}
.box-product .price-old {
color: #F00;
text-decoration: line-through;
}
.box-product .price-new {
font-weight: bold;
}
.box-product .rating {
display: block;
margin-bottom: 4px;
}

нужно изменить к примеру на 20%, после этого изменения ваши товары примут такой вид:

posle 1

2.2. Чтобы вам было понятно что же мы сделаем, сравните эти скриншоты:

До:                                                      После:

grid dogrid posle

Вместо этих строк (917-987):

.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 {
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 {
width: 16%;
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 {
font-weight: bold;
text-decoration: none;
display: block;
margin-bottom: 4px;
display: table-cell;
height: 30px;
width: 16%
}
.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;
}

2.3. Если вы будете менять размер изображений (я выбрал для товаров размер изображений 140 x 140), вы можете столкнуться с этим:

grid do 1

это исправляется очень просто:

.product-grid {
width: 100%;
overflow: auto;
text-align: center;
}
.product-grid > div {
width: 16%; – это значение
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 {
font-weight: bold;
text-decoration: none;
display: block;
margin-bottom: 4px;
display: table-cell;
height: 30px;
width: 16% – и это значение
}
.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;
}

нужно изменить к примеру на 18%, после этого изменения ваши товары примут такой вид:

grid posle 1

3. Изменим эти строки (134-199):

#header #cart {
position: absolute;
top: 0px;
right: 145px;
z-index: 9;
min-width: 300px;
}
#header #cart .heading {
float: right;
margin-right: 172px;
margin-top: 15px;
padding-left: 14px;
padding-right: 14px;
border-top: 1px solid #FFFFFF;
border-left: 1px solid #FFFFFF;
border-right: 1px solid #EEEEEE;
background: #FFF;
position: relative;
z-index: 1;
}
#header #cart .heading h4 {
color: #333333;
font-size: 15px;
font-weight: bold;
margin-top: 0px;
margin-bottom: 3px;
}
#header #cart .heading a {
text-decoration: none;
}
#header #cart .heading a span {
background: #FFFFFF url('../image/arrow-down.png') 100% 50% no-repeat;
padding-right: 15px;
}
#header #cart .content {
clear: both;
display: none;
position: relative;
top: -1px;
padding: 8px;
min-height: 150px;
border-top: 1px solid #EEEEEE;
border-left: 1px solid #EEEEEE;
border-right: 1px solid #EEEEEE;
border-bottom: 1px solid #EEEEEE;
-webkit-border-radius: 0px 7px 7px 7px;
-moz-border-radius: 0px 7px 7px 7px;
-khtml-border-radius: 0px 7px 7px 7px;
border-radius: 0px 7px 7px 7px;
background: #FFF;
}
#header #cart.active .heading {
margin-top: 5px;
padding-top: 10px;
padding-bottom: 6px;
border-top: 1px solid #EEEEEE;
border-left: 1px solid #EEEEEE;
border-right: 1px solid #EEEEEE;
-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;
}
#header #cart.active .content {
display: block;
}

на эти:

#header #cart {
position: absolute;
top: 0px;
right: 145px;
z-index: 9;
min-width: 300px;
}
#header #cart .heading {
float: right;
margin-right: 80px;
margin-top: 15px;
padding-left: 14px;
padding-right: 14px;
background: #FFF;
position: relative;
z-index: 1;
}
#header #cart .heading h4 {
color: #333333;
font-size: 15px;
font-weight: bold;
margin-top: 0px;
margin-bottom: 3px;
}
#header #cart .heading a {
text-decoration: none;
}
#header #cart .heading a span {
background: #FFFFFF url('../image/arrow-down.png') 100% 50% no-repeat;
padding-right: 15px;
}
#header #cart .content {
clear: both;
display: none;
position: relative;
padding: 8px;
min-height: 150px;
border: 1px solid #EEEEEE;
-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;
background: #FFF;
}
#header #cart.active .heading {
margin-top: 5px;
padding-top: 10px;
padding-bottom: 6px;
}
#header #cart.active .content {
display: block;
}

 

4. Изменим эти строки (1562-1596):

#footer {
clear: both;
overflow: auto;
min-height: 100px;
padding: 20px;
border-top: 1px solid #DBDEE1;
border-bottom: 1px solid #DBDEE1;
background: #F8F8F8;
}
#footer h3 {
color: #000000;
font-size: 14px;
margin-top: 0px;
margin-bottom: 8px;
}
#footer .column {
float: left;
width: 20%;
min-height: 100px;
}
#footer .column ul {
margin-top: 0px;
margin-left: 8px;
padding-left: 12px;
}
#footer .column ul li {
margin-bottom: 3px;
}
#footer .column a {
text-decoration: none;
color: #000;
}
#footer .column a:hover {
text-decoration: underline;
}

на эти:

#footer {
clear: both;
overflow: auto;
min-height: 100px;
padding: 20px;
border-top: 2px solid #0099cc;
}
#footer h3 {
color: #000000;
font-size: 14px;
margin-top: 0px;
margin-bottom: 8px;
}
#footer .column {
float: left;
width: 20%;
min-height: 100px;
}
#footer .column ul {
margin-top: 0px;
padding-left: 5px;
list-style: none;
}
#footer .column ul li {
margin-bottom: 3px;
}
#footer .column a {
color: #000;
}
#footer .column a:hover {
color: #0099cc;
}

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

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

  1. Спасибо! Все кроме третьего пункта, где Корзина — получилось! Когда менял стили корзины — она почему-то исчезла. У меня версия 1.5.5.1.1 — и картинка корзины вроде бы нормально отображается (сайт пока на субдомене: http://opto.onhillsport.com/).
    Футер исправил! Действительно без точек перед ссылками намного лучше!

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

      24.09.2013 at 17:04

      Завтра вы увидите урок по OcStore 1.5.5.1.1, в уроке мы затронем верхнее меню.

  2. Kost9lbrik

    06.03.2014 at 19:45

    Добрый день, спасибо за статью очень полезно.
    А не подкажите назначение этого кода:
    #column-left + #column-right + #content .product-grid > div

    Заранее спасибо.
    Когда меняю не вижу изменений.
    Спасибо.

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

      06.03.2014 at 23:23

      Если не ошибаюсь, строка задаёт ширину div’а товара где бы он не был размещён, в правой, левой, или центральной колонке, и мы эту строку на сколько я помню не изменяем.

  3. Влад, добрый день!
    подскажите пожалуйста, как уменьшить высоту каждой строки с найденым товаром в результатах поиска (при отображении списком)?

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

      11.06.2014 at 17:12

      Напишите мне вконтакте — будем смотреть ваш сайт.

  4. google.com Денис Рафиков

    14.11.2014 at 00:45

    Приветствую, Влад!
    Хотелось бы узнать, как изменить цвет кнопки «Купить» при наведении на нее курсором?

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

Your email address will not be published.

*

CAPTCHA image
*

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

Вверх ↑



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