Moushe.ru

Блог обо всём

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



Продолжим наши работы над шаблоном для OcStore NextShop.

ocstore-nextshop-theme

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

1. Настроим категории

2. Отключим слайдшоу

3. Включим модуль последние

4. Настроим рекомендуемые

5. Переименуем модули

6. Изменим CSS стили ( для модулей, категорий, меню навигации, хлебных крошек )

Приступим:

1. Откроем админку:

Дополнения > Модули > Категории > Изменить > Добавить модуль:

home/левая колонка/отключено/включено/1

2. Откроем админку:

Дополнения > Модули > Слайдшоу > Изменить:

статус/отключено

3. Откроем админку:

Дополнения > Модули > Последние > Установить > Изменить > Добавить модуль:

12 / 120 x 120 / home / Верх страницы / Включено / 2

4. Откроем админку:

Дополнения > Модули > Рекомендуемые > Изменить:

12 / 120 x 120 / home / Верх страницы / Включено / 1 и добавим в модуль ещё несколько товаров

5. Откроем файл ../catalog/language/russian/module/featured.php и изменим эту строку (3):

$_[‘heading_title’] = ‘Рекомендуем’;

на эту:

$_[‘heading_title’] = ‘Рекомендуемые товары’;

5.1. Откроем файл ../catalog/language/russian/module/latest.php и изменим эту строку (3):

$_[‘heading_title’] = ‘Новые поступления’;

на эту:

$_[‘heading_title’] = ‘Новинки’;

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

/* box */
.box {
margin-bottom: 20px;
}
.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 {
margin-bottom: 20px;
text-align: center;
}
.box .box-heading {
font-family: Verdana,Geneva,sans-serif;
font-size: 14px;
text-transform: uppercase;
border-bottom: 1px solid #45a5ec;
padding: 8px 10px 7px 10px;
color: #000;
margin-bottom: 10px;
}
.box .box-content {
padding: 10px;
}

вместо этих строк (632-678):

/* box products */
.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 {
color: #38B0E3;
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 products */
.box-product {
width: 100%;
overflow: auto;
}
.box-product > div {
width: 130px;
display: inline-block;
vertical-align: top;
margin-right: 20px;
margin-bottom: 20px;
padding: 20px;
border: 1px solid #fff;
}
.box-product > div:hover {
border: 1px solid #45a5ec;
-webkit-box-shadow: 0px 2px 2px #DDDDDD;
-moz-box-shadow: 0px 2px 2px #DDDDDD;
box-shadow: 0px 2px 2px #DDDDDD;
-webkit-border-radius: 10px;
-moz-border-radius:    10px;
-khtml-border-radius:  10px;
border-radius:         10px;
}
#column-left + #column-right + #content .box-product > div {
width: 119px;
}
.box-product .image {
display: block;
margin-bottom: 0px;
}
.box-product .image img {
padding: 3px;
}
.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 .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;
}

вместо этих строк (694-731):

/* box category */
.box-category {
margin-top: -5px;
}
.box-category ul {
list-style: none;
margin: 0;
padding: 0;
}
.box-category > ul > li {
padding: 8px 8px 8px 0px;
}
.box-category > ul > li + li {
border-top: 1px solid #EEEEEE;
}
.box-category > ul > li > a {
text-decoration: none;
color: #333;
}
.box-category > ul > li ul {
display: none;
}
.box-category > ul > li a.active {
font-weight: bold;
}
.box-category > ul > li a.active + ul {
display: block;
}
.box-category > ul > li ul > li {
padding: 5px 5px 0px 10px;
}
.box-category > ul > li ul > li > a {
text-decoration: none;
display: block;
}
.box-category > ul > li ul > li > a.active {
font-weight: bold;
}

вставим эти:

/* box category */
.box-category {
margin-top: -5px;
}
.box-category ul {
list-style: none;
margin: 0;
padding: 0;
text-align: left;
}
.box-category > ul > li {
padding: 8px 8px 8px 0px;
}
.box-category > ul > li + li {
border-top: 1px dotted #49a5ec;
}
.box-category > ul > li > a {
text-decoration: none;
color: #333;
}
.box-category a:hover {
color: #49a5ec;
}
.box-category > ul > li ul {
display: none;
}
.box-category > ul > li a.active {
font-weight: bold;
}
.box-category > ul > li a.active + ul {
display: block;
}
.box-category > ul > li ul > li {
padding: 5px 5px 5px 5px;
border-top: 1px dotted #49a5ec;
margin-top: 5px;
}
.box-category > ul > li ul > li > a {
text-decoration: none;
display: block;
color: #000;
}
.box-category > ul > li ul > li > a:hover {
color: #49a5ec;
}
.box-category > ul > li ul > li > a.active {
font-weight: bold;
}

Теперь нам нужно изменить стиль меню навигации и добавить стиль хлебных крошек, этим сейчас и займёмся, вместо этих строк (334-363):

/* menu */
#menu {
height: 27px;
padding: 0px 5px;
margin-bottom: 10px;
}
#menu ul {
list-style: none;
margin: 0;
padding: 0;
}
#menu li {
position: relative;
float: left;
}
#menu a {
text-decoration: none;
font-size: 17px;
font-family: Myriad Pro;
padding: 2px 5px 2px 5px;
}
#menu a:hover {
color: #fff;
background: #38b0e3;
padding: 2px 5px 2px 5px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
}

вставим эти:

/* menu */
#menu {
height: 28px;
margin-bottom: 10px;
}
#menu ul {
list-style: none;
margin: 0;
padding: 0;
}
#menu li {
float: left;
}
#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:hover {
background: #49a5ec;
color:      #fff;
-webkit-border-radius: 14px;
-moz-border-radius:    14px;
-khtml-border-radius:  14px;
border-radius:         14px;
}

вместо этих строк (369-372):

.breadcrumb {
color: #CCCCCC;
margin-bottom: 10px;
}

вставим эти:

.breadcrumb {
background-color: #d7eefa;
font-style: italic;
height: 34px;
line-height: 33px;
padding-left: 30px;
margin-bottom: 10px;
margin-left: -20px;
margin-right: -20px;
}
.breadcrumb a {
text-decoration: none;
color: #45a5ec;
}
.breadcrumb a:hover{
text-decoration: underline;
color: #000;
}

На сегодня всё, до новых встреч. Следите за новостями.

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

  1. Добрый день!
    Не мешало бы к каждому уроку добавлять хотя бы по одному скрину: до изменений и после. А то не понятно, стоит ли вообще эти изменения вносить.

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

      28.05.2013 at 19:14

      Здравствуйте. Прочитав описание урока вполне можно понять нужно вам это или нет, либо сравнить со скриншотом предыдущего урока.

  2. Добрый день! Спасибо большое за Ваши информацию. У меня вопрос следующего характера — после внесения изменений данного урока в css файл, адрес магазина в шапке сайта сместился за картинку. Спасибо.

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

      30.05.2013 at 21:02

      #headinfo {
      padding-left: 400px; - отступ влево, меняйте значение...
      padding-top: 10px;
      }

  3. Валерий

    06.06.2013 at 00:48

    Владислав, добрый день день, у Вас прекрасные уроки, всё просто и структурно, чётко и доступно, наглядно и понятно, спасибо, что делитесь с нами своим интеллектуальным богатством! Никак не могу найти в Инт как можно отобразить под товаром его размеры — значения опций (Размеры одежды) на странице категорий (в списке товаров).

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

      14.06.2013 at 19:40

      Не выводил, смотрите на myopencart.ru (форум)

  4. Дмитрий

    11.06.2013 at 06:28

    Добрый день, а по 1.5.4.1 будет продолжение?

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

      14.06.2013 at 19:46

      Возможно будет )

  5. Владислав, добрый день!
    После данного урока сайт выдает ошибку:Parse error: syntax error, unexpected T_STRING in /home/u559583389/public_html/catalog/language/russian/module/featured.php on line 3
    Не могу понять где ошибся.

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

      22.06.2013 at 21:38

      Вам выдаёт ошибку в featured.php в 3 строке, вот и смотрите что вы не правильно в ней написали.

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

Your email address will not be published.

*

CAPTCHA image
*

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

Вверх ↑



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