Moushe.ru

Блог обо всём

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



Сегодня мы немного поработаем над практически готовым шаблоном.

nextshop template 9 lesson

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

1.  Удалим из меню навигации лишние ссылки и увеличим шрифт оставшихся пунктов.

2. Уменьшим размер поиска и уберём его тень.

3. Перекрасим фон кнопок

4. Изменим шрифт категорий

5. Изменим стили футера

6. Изменим стрелки и стили у слайдера производителей

7. Переведём colorbox (используется в карточке товара – увеличение изображения)

8. Изменим стиль headinfo

9. Изменим стиль корзины (в шапке)

10. Изменим стили личного кабинета (модуля) и других ul списков

Приступим:

1. У нас в шапке есть ссылки постоянный покупатель, корзина покупок и оформление заказа, в принципе они нам не нужны, постоянный покупатель и так воспользуется кнопкой вход, а в корзину или оформление заказа можно зайти добавив товар в корзину и щёлкнув мышью на слово Корзина или развернув список добавленных товаров и воспользовавшись одной из ссылок.

Откроем файл ../catalog/view/theme/nextshop/template/common/header.tpl и удалим из него эти строки (82-84):

<li><a href="<?php echo $account; ?>"><?php echo $text_account; ?></a></li>
<li><a href="<?php echo $shopping_cart; ?>"><?php echo $text_shopping_cart; ?></a></li>
<li><a href="<?php echo $checkout; ?>"><?php echo $text_checkout; ?></a></li>

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

#menu a {
font-size: 13px;
font-family: Verdana,Geneva,sans-serif;
text-transform: uppercase;
color: #000;
text-decoration: none;
display: block;
padding: 6px 10px 6px 10px;
position: relative;
}

вставим эти:

#menu a {
font-size: 14px;
font-family: Verdana,Geneva,sans-serif;
text-transform: uppercase;
color: #000;
text-decoration: none;
display: block;
padding: 6px 10px 6px 10px;
position: relative;
}

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

#header #search {
position: absolute;
top: 15px;
right: 0px;
width: 298px;
z-index: 15;
}
#header .button-search {
position: absolute;
left: 0px;
background: url('../image/button-search.png') center center no-repeat;
width: 28px;
height: 24px;
border-right: 1px solid #CCCCCC;
cursor: pointer;
}
#header #search input {
background: #FFF;
padding: 1px 1px 1px 33px;
width: 262px;
height: 21px;
border: 1px solid #CCCCCC;
-webkit-border-radius: 3px 3px 3px 3px;
-moz-border-radius: 3px 3px 3px 3px;
-khtml-border-radius: 3px 3px 3px 3px;
border-radius: 3px 3px 3px 3px;
-webkit-box-shadow: 0px 2px 0px #F0F0F0;
-moz-box-shadow: 0px 2px 0px #F0F0F0;
box-shadow: 0px 2px 0px #F0F0F0;
}

вставим эти:

#header #search {
position: absolute;
top: 15px;
right: 0px;
width: 256px;
z-index: 15;
}
#header .button-search {
position: absolute;
left: 0px;
background: url('../image/button-search.png') center center no-repeat;
width: 28px;
height: 24px;
border-right: 1px solid #CCCCCC;
cursor: pointer;
}
#header #search input {
background: #FFF;
padding: 1px 1px 1px 33px;
width: 220px;
height: 21px;
border: 1px solid #CCCCCC;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
border-radius: 3px;
}

3. Откроем папку ../catalog/view/theme/nextshop/image и закинем в неё эти картинки, соглашаемся на замену стандартных изображений:

buttonbutton-active

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

.box-category > ul > li > a {
text-decoration: none;
color: #333;
}

вставим эти:

.box-category > ul > li > a {
text-decoration: none;
color: #333;
font-size: 13px;
font-variant: small-caps;
}

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

#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;
}
#powered {
margin-top: 5px;
text-align: right;
clear: both;
}

вставим эти:

#footer {
clear: both;
overflow: auto;
min-height: 100px;
padding: 20px 20px 10px 20px;
border-top: 1px solid #45a5ec;
}
#footer h3 {
color: #000000;
font-family: Verdana,Geneva,sans-serif;
text-transform: uppercase;
font-weight: normal;
font-size: 14px;
margin-top: 0px;
margin-bottom: 8px;
}
#footer .column {
float: left;
width: 20%;
min-height: 100px;
font-size: 13px;
font-variant: small-caps;
}
#footer .column ul {
margin-top: 0px;
padding-left: 5px;
}
#footer .column ul li {
margin-bottom: 3px;
list-style-type: none;
}
#footer .column a {
text-decoration: none;
color: #000;
font-size: 13px;
font-variant: small-caps;
}
#footer .column a:hover {
color: #45a5ec;
}
#powered {
padding-bottom: 5px;
text-align: center;
clear: both;
}
#powered a {
color: #45a5ec;
}
#powered a:hover {
color: #ooo;
}

6. Откроем папку ../catalog/view/theme/nextshop/image и закинем в неё эти картинки, соглашаемся на замену стандартных изображений:

button-next actbutton-nextbutton-previous actbutton-previous

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

.jcarousel-skin-opencart .jcarousel-next-horizontal {
position: absolute;
top: 23px;
right: 5px;
width: 32px;
height: 32px;
cursor: pointer;
background: url('../image/button-next.png') center no-repeat;
}
.jcarousel-skin-opencart .jcarousel-direction-rtl .jcarousel-next-horizontal {
left: 5px;
right: auto;
background: url('../image/button-previous.png') center no-repeat;
}
.jcarousel-skin-opencart .jcarousel-next-horizontal:hover, .jcarousel-skin-opencart .jcarousel-next-horizontal:focus {
}
.jcarousel-skin-opencart .jcarousel-next-horizontal:active {
}
.jcarousel-skin-opencart .jcarousel-next-disabled-horizontal, .jcarousel-skin-opencart .jcarousel-next-disabled-horizontal:hover, .jcarousel-skin-opencart .jcarousel-next-disabled-horizontal:focus, .jcarousel-skin-opencart .jcarousel-next-disabled-horizontal:active {
cursor: default;
background: none;
}
.jcarousel-skin-opencart .jcarousel-prev-horizontal {
position: absolute;
top: 23px;
left: 0px;
width: 32px;
height: 32px;
cursor: pointer;
background: url('../image/button-previous.png') center no-repeat;
}
.jcarousel-skin-opencart .jcarousel-direction-rtl .jcarousel-prev-horizontal {
left: auto;
right: 0px;
background: url('../image/button-next.png') center no-repeat;
}
.jcarousel-skin-opencart .jcarousel-prev-horizontal:hover, .jcarousel-skin-opencart .jcarousel-prev-horizontal:focus {
}
.jcarousel-skin-opencart .jcarousel-prev-horizontal:active {
}
.jcarousel-skin-opencart .jcarousel-prev-disabled-horizontal, .jcarousel-skin-opencart .jcarousel-prev-disabled-horizontal:hover, .jcarousel-skin-opencart .jcarousel-prev-disabled-horizontal:focus, .jcarousel-skin-opencart .jcarousel-prev-disabled-horizontal:active {
cursor: default;
background: none;
}

вставим эти:

.jcarousel-skin-opencart .jcarousel-next-horizontal {
position: absolute;
top: 23px;
right: 5px;
width: 32px;
height: 32px;
cursor: pointer;
background: url('../image/button-next.png') center no-repeat;
}
.jcarousel-skin-opencart .jcarousel-direction-rtl .jcarousel-next-horizontal {
left: 5px;
right: auto;
background: url('../image/button-previous.png') center no-repeat;
}
.jcarousel-skin-opencart .jcarousel-next-horizontal:hover, .jcarousel-skin-opencart .jcarousel-next-horizontal:focus {
background: url('../image/button-next act.png') center no-repeat;
}
.jcarousel-skin-opencart .jcarousel-next-horizontal:active {
}
.jcarousel-skin-opencart .jcarousel-next-disabled-horizontal, .jcarousel-skin-opencart .jcarousel-next-disabled-horizontal:hover, .jcarousel-skin-opencart .jcarousel-next-disabled-horizontal:focus, .jcarousel-skin-opencart .jcarousel-next-disabled-horizontal:active {
cursor: default;
background: none;
}
.jcarousel-skin-opencart .jcarousel-prev-horizontal {
position: absolute;
top: 23px;
left: 0px;
width: 32px;
height: 32px;
cursor: pointer;
background: url('../image/button-previous.png') center no-repeat;
}
.jcarousel-skin-opencart .jcarousel-direction-rtl .jcarousel-prev-horizontal {
left: auto;
right: 0px;
background: url('../image/button-next.png') center no-repeat;
}
.jcarousel-skin-opencart .jcarousel-prev-horizontal:hover, .jcarousel-skin-opencart .jcarousel-prev-horizontal:focus {
background: url('../image/button-previous act.png') center no-repeat;
}
.jcarousel-skin-opencart .jcarousel-prev-horizontal:active {
}
.jcarousel-skin-opencart .jcarousel-prev-disabled-horizontal, .jcarousel-skin-opencart .jcarousel-prev-disabled-horizontal:hover, .jcarousel-skin-opencart .jcarousel-prev-disabled-horizontal:focus, .jcarousel-skin-opencart .jcarousel-prev-disabled-horizontal:active {
cursor: default;
background: none;
}

7. Откроем файл ../catalog/view/javascript/jquery/colorbox/jquery.colorbox и изменим эту строку (35):

current: "image {current} of {total}",

на эту:

current: "Изображение {current} из {total}",

совсем другое дело. Улыбка

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

#headinfo {
padding-left: 400px;
padding-top: 10px;
}

вставим эти:

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

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

#header #cart .content {
clear: both;
display: none;
position: relative;
padding: 8px;
min-height: 150px;
border: 1px solid #EEEEEE;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
background: #FFF;
}

вставим эти:

#header #cart .content {
clear: both;
display: none;
position: relative;
padding: 8px;
min-height: 150px;
border: 1px solid #45a5ec;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
background: #FFF;
}

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

label {
cursor: pointer;
}

вставим эти:

ul {
list-style-type: none;
font-family: Verdana,Geneva,sans-serif;
}
ul a, ul a:visited {
color: #45a5ec;
text-decoration: none;
font-size: 14px;
}
ul a:hover {
color: #000;
}

Я специально прописываю всем ссылкам над которыми работаю отдельные стили, а не переписываю общие стили (45-53 строки), так по подчёркиванию и цвету я вижу над чем работал, а над чем ещё нет, после всех правок шаблона из css выбрасывается всё лишнее — все не используемые стили и удаляются цвета ссылок.

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

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

  1. Дмитрий

    10.07.2013 at 23:21

    Здравствуйте, Владислав, а Вы не подскажете как правильно сделать, что бы на главной страничке изображение товара немного увеличивалось при наведении.
    Благодарю.

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

      11.07.2013 at 16:19

      Нет не знаю, движок делает одну превью картинку а вам нужно чтобы он делал 2 превьюшки, одну для просто картинки и вторую для картинки при наведении курсора мышки, попробуйте нанять фрилансера, возможно сможет поковырять контроллеры и сделать то что вам нужно, а так вы можете просто поковырять ксс и сделать изображению красочную полупрозрачную рамку с градиентом при наведении курсора мышки, используя тени

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

Your email address will not be published.

*

CAPTCHA image
*

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

Вверх ↑



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