Moushe.ru

Блог обо всём

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



Продолжим работу над главной страницей нашего шаблона NewBlue для OcStore 1.5.4.1.

newblue 2 урок

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

1. Переделаем модуль рекомендуемые

2. Работаем над css стилями

3. Работаем над страницей категорий

4. Работаем над страницей товара

5. Работаем над страницей поиска

6. Работаем над модулем категорий

Приступим:

1. Откроем файл ../catalog/view/theme/newblue/template/module/featured.tpl и вместо этих строк (1-3):

<div class="box">
<div class="box-heading"><?php echo $heading_title; ?></div>
<div class="box-content">

вставим эти:

<div class="box">
<div class="box-content">
<div class="box-heading"><?php echo $heading_title; ?></div>

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

#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 {
color: #38B0E3;
text-decoration: none;
}
#header #cart .heading a span {
background: #FFFFFF url('../image/arrow-down.png') 100% 50% no-repeat;
padding-right: 15px;
}

вставим эти:

#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;
position: relative;
z-index: 1;
}
#header #cart .heading h4 {
color: #fff;
font-size: 15px;
font-weight: bold;
margin-top: 0px;
margin-bottom: 3px;
}
#header #cart .heading a {
color: #fff;
text-decoration: none;
}
#header #cart .heading a span {
background:  url('../image/arrow-down.png') 100% 50% no-repeat;
padding-right: 15px;
}

вместо этих строк (170-201):

#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;
-webkit-box-shadow: 0px 2px 2px #DDDDDD;
-moz-box-shadow: 0px 2px 2px #DDDDDD;
box-shadow: 0px 2px 2px #DDDDDD;
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 .content {
clear: both;
display: none;
position: relative;
top: -1px;
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.active .heading {
margin-top: 5px;
padding-top: 10px;
padding-bottom: 6px;
}

вместо этих строк (245-274):

#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: 228px;
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: 192px;
height: 21px;
border: 1px solid #CCCCCC;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
border-radius: 3px;
}

вместо этих строк (272-299):

#header #welcome {
position: absolute;
top: 47px;
right: 0px;
z-index: 5;
width: 298px;
text-align: right;
color: #999999;
}
#header .links {
position: absolute;
right: 0px;
bottom: 3px;
font-size: 10px;
padding-right: 10px;
}
#header .links a {
float: left;
display: block;
padding: 0px 0px 0px 7px;
color: #38B0E3;
text-decoration: none;
font-size: 12px;
}
#header .links a + a {
margin-left: 8px;
border-left: 1px solid #CCC;
}

вставим эти:

#header #welcome {
position: absolute;
top: 47px;
right: 0px;
z-index: 5;
width: 298px;
text-align: right;
color: #fff;
}
#header .links {
position: absolute;
right: 0px;
bottom: 3px;
padding-right: 10px;
}
#header .links a {
font-size: 14px;
font-family:"Myriad Pro";
float: left;
display: block;
padding: 7px;
color: #fff;
text-decoration: none;
}
#header .links a:hover{
background: #fff;
color: #2e99e4;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
border-radius: 3px;
}
#header .links a + a {
margin-left: 8px;
}

вместо этих строк (308-318):

#menu {
background: #fff;
border-bottom: 1px solid #000000;
height: 37px;
margin-bottom: 15px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
padding: 0px 5px;
}

вставим эти:

#menu {
background: #fff;
height: 37px;
margin-bottom: 15px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
padding: 0px 5px;
}

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

#menu > ul > li ul > li > a:hover {
background: #000000;
}

вставим эти:

#menu > ul > li ul > li > a:hover {
background: #fff;
color: #2e99e4;
}

вместо этих строк (348-360):

#menu > ul > li > div {
display: none;
background: #FFFFFF;
position: absolute;
z-index: 5;
padding: 5px;
border: 1px solid #000000;
-webkit-border-radius: 0px 0px 5px 5px;
-moz-border-radius: 0px 0px 5px 5px;
-khtml-border-radius: 0px 0px 5px 5px;
border-radius: 0px 0px 5px 5px;
background: url('../image/menu.png');
}

вставим эти:

#menu > ul > li > div {
display: none;
background: #FFFFFF;
position: absolute;
z-index: 5;
padding: 10px;
margin-left: -1px;
border-left: 1px solid #fff;
border-right: 1px solid #fff;
border-bottom: 1px solid #fff;
-webkit-border-radius: 0px 0px 8px 8px;
-moz-border-radius: 0px 0px 8px 8px;
-khtml-border-radius: 0px 0px 8px 8px;
border-radius: 0px 0px 8px 8px;
background: #2e99e4;
}

вместо этих строк (639-663):

.box .box-heading {
-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;
border: 1px solid #DBDEE1;
background: url('../image/background.png') repeat-x;
padding: 8px 10px 7px 10px;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
line-height: 14px;
color: #333;
}
.box .box-content {
background: #FFFFFF;
-webkit-border-radius: 0px 0px 7px 7px;
-moz-border-radius: 0px 0px 7px 7px;
-khtml-border-radius: 0px 0px 7px 7px;
border-radius: 0px 0px 7px 7px;
border-left: 1px solid #DBDEE1;
border-right: 1px solid #DBDEE1;
border-bottom: 1px solid #DBDEE1;
padding: 10px;
}

вставим эти:

.box .box-heading {
font-family: "Myriad Pro";
font-size: 16px;
padding: 5px 5px 20px 5px;
line-height: 14px;
color: #333;
}
.box .box-content {
background: #FFFFFF;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
padding: 10px;
}

вместо этих строк (308-317):

#menu {
background: #fff;
height: 37px;
margin-bottom: 15px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
padding: 0px 5px;
}

вставим эти:

#menu {
background: #fff;
height: 37px;
margin-bottom: 15px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
padding: 0 0 0 12px;
}

вместо этих строк (1563-1602):

#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: 25%;
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;
border-top: 2px dotted #DBDEE1;
}
#footer h3 {
color: #fff;
font-size: 14px;
margin-top: 0px;
margin-bottom: 8px;
}
#footer .column {
float: left;
width: 25%;
min-height: 100px;
}
#footer .column ul {
margin-top: 0px;
margin-left: 8px;
padding-left: 12px;
}
#footer .column ul li {
margin-bottom: 3px;
list-style: none;
}
#footer .column a {
text-decoration: none;
color: #fff;
}
#footer .column a:hover {
color: #000;
}
#powered {
color: #fff;
margin-top: 5px;
text-align: center;
clear: both;
}

3. Откроем файл ../catalog/view/theme/newblue/template/product/category.tpl и после  этих строк (1-2):

<?php echo $header; ?><?php echo $column_left; ?><?php echo $column_right; ?>
<div id="content"><?php echo $content_top; ?>

вставим эти:

<div class="box">
<div class="box-content">

а после этих строк (110-111):

<?php } ?>
<?php echo $content_bottom; ?></div>

вставим эти:

</div>
</div>

4. Откроем файл ../catalog/view/theme/newblue/template/product/product.tpl и после  этих строк (1-2):

<?php echo $header; ?><?php echo $column_left; ?><?php echo $column_right; ?>
<div id="content"><?php echo $content_top; ?>

вставим эти:

<div class="box">
<div class="box-content">

а после этих строк (335-336):

<?php } ?>
<?php echo $content_bottom; ?></div>

вставим эти:

</div>
</div>

5. Откроем файл ../catalog/view/theme/newblue/template/product/search.tpl и после  этих строк (1-2):

<?php echo $header; ?><?php echo $column_left; ?><?php echo $column_right; ?>
<div id="content"><?php echo $content_top; ?>

вставим эти:

<div class="box">
<div class="box-content">

а после этих строк (121-122):

<?php }?>
<?php echo $content_bottom; ?></div>

вставим эти:

</div>
</div>

6. Откроем файл ../catalog/view/theme/newblue/template/module/category.tpl и вместо этих строк (1-3):

<div class="box">
<div class="box-heading"><?php echo $heading_title; ?></div>
<div class="box-content">

вставим эти:

<div class="box">
<div class="box-content">
<div class="box-heading"><?php echo $heading_title; ?></div>

На сегодня хватит, продолжим в следующей статье.

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

  1. Добрый день. Планирую размещать в магазине товары партнерки, чтобы потребитель при нажатии на товар переходил по реферальной ссылке. Общими словами, продублировать товар привязав партнерских ссылки. Если такая возможность на opencart и если да, то как? Буду Вам очень признательна. Весь интернет облазила, нет ответа.

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

      26.07.2013 at 22:13

      Мне уже задавали этот вопрос, проще всего продавать чужие товары используя WP, получаете от партнёра код, создаёте в WP страницу создаёте оформление и вставляете на страницу полцченный код.

  2. Роман

    26.07.2013 at 18:02

    Отличные статьи! Спасибо! Может немного не в тему, но никак не могу найти нигде следующий момент.
    Как можно изменить стиль хлебных крошек ? (убрать подчеркивание, изменить шрифт…)
    То же оформление у меню «Вход/Регистрация», но это мне не так важно.
    Как я понял это обычные ссылки, но хотелось бы чтобы они срабатывали как как ссылки но оформление было не как у ссылок 🙂 Надеюсь вы поняли о чем я )

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

      26.07.2013 at 22:14

      stylesheet.css и учебник css вам в помощь. Можно сделать кнопками, ссылками, вставить картинки и т.д.

  3. Спасибо. Но хотелось именно в своем инт-магазине, чтобы увеличить ассортимент.

  4. Роман

    29.07.2013 at 18:21

    Добрый день
    сделайте плиз урок или подскажите
    я хочу вывести на главную страницу все товары с кнопками купить и сравнить
    и чтоб это было в два столбика а не 1 ряд на всю страницу
    спасибо

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

      29.07.2013 at 22:10

      Постараюсь написать статью

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

Your email address will not be published.

*

CAPTCHA image
*

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

Вверх ↑



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