Moushe.ru

Блог обо всём

OpenCart делаем шаблон WhiteCart (2 часть)



Сегодня мы продолжим создавать новый шаблон для OpenCart 1.4.9.

До:                                                      После:

12

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

1. Доработаем шапку магазина.

2. Изменим заголовки блоков.

3. Вырежем из модулей не нужные картинки.

4. Перекрасим ссылки хлебных крошек, категорий и информации и ссылок Подмигивающая рожица.

5. Изменим флажки категорий, информации и ссылок.

6. Доделаем блоки.

 

И так приступим:

1. Откроем stylesheet.css и вставим это:

#header .div1 {
border-right: 1px solid #dddddd;
border-left: 1px solid #dddddd;
}

после этого:

#container {
width: 960px;
margin-left: auto;
margin-right: auto;
text-align: left;
}

изменяем это:

#header .div2 {
float: left;
padding-top: 15px;
padding-left: 15px;
}

на это:

#header .div2 {
width: 958px;
padding-top: 15px;
padding-bottom: 15px;
border-right: 1px solid #dddddd;
border-left: 1px solid #dddddd;
border-bottom: 1px solid #dddddd;
}

 

2. Изменим этот код:

#content .top h1, .heading {
padding: 8px 0px 8px 7px;
}

на этот:

#content .top h1, .heading {
padding-top: 8px;
padding-bottom: 8px;
text-align: center;
}

этот код:

#content h1, .heading {
color: #000000;
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
text-transform: uppercase;
margin: 0px;
}

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

#content h1, .heading {
color: #000000;
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
margin: 0px;
}

изменим этот код:

.box .top {
padding: 8px 0px 8px 7px;
color: #000000;
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
text-transform: uppercase;
}

на этот:

.box .top {
padding-top: 8px;
padding-bottom: 8px;
color: #000000;
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
text-align: center;
}

 

3. Откроем папку модулей (../catalog/view/theme/WhiteCart/template/module) и открываем файлы bestseller, blinks, cart, category, featured, information, latest, manufacturer, special и удаляем из них картинку, к примеру из special нужно удалить это:

<img src="catalog/view/theme/default/image/special.png" alt="" />

так-же поступаем с остальными файлами.

 

4. В stylesheet.css ищем это:

#breadcrumb {
float: left;
padding-top: 7px;
padding-bottom: 11px;
height: 13px;
margin-bottom: 10px;
color: #000000;
}

и ниже добавим этот код:

#breadcrumb a {
color: #5588dd;
text-decoration: none;
}
#breadcrumb a:hover {
color: #000;
text-decoration: underline;
}

под этим:

#category ul {
margin-top: 0px;
margin-bottom: 0px;
margin-left: 8px;
padding-left: 12px;
list-style: url('../image/bullet_1.png');
}

разместим это:

#category a {
color: #5588dd;
text-decoration: none;
}
#category a:hover {
color: #000;
text-decoration: underline;
}

а под этим:

#information ul {
margin-top: 0px;
margin-bottom: 0px;
margin-left: 8px;
padding-left: 12px;
list-style: url('../image/bullet_2.png');
}

это:

#information a {
color: #5588dd;
text-decoration: none;
}
#information a:hover {
color: #000;
text-decoration: underline;
}

 

5. Откроем папку image и заменим стандартные изображения этими:

bullet_1bullet_2button_leftbutton_rightbutton_leftbutton_rightbox_topbox_bottom

6. Откроем stylesheet.css и изменим это:

.box .top {
padding-top: 8px;
padding-bottom: 8px;
color: #000000;
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
text-align: center;
}
.box .top img {
float: left;
margin-right: 5px;
}
.box .middle {
border-left: 1px solid #DDDDDD;
border-right: 1px solid #DDDDDD;
background: #FFFFFF;
padding: 10px;
}

на это:

.box .top {
padding-top: 8px;
padding-bottom: 8px;
color: #fff;
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
text-align: center;
}
.box .top img {
float: left;
margin-right: 5px;
}
.box .middle {
border-left: 1px solid #1c64dc;
border-right: 1px solid #1c64dc;
background: #FFFFFF;
padding: 10px;
}

 

Результат сегодняшней работы:

2

До новых встреч, следите за новостями. Улыбка

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

  1. Ёханес

    13.02.2012 at 10:07

    Вячеслав, не забывай об 1.5.1.3 опенкарте)))

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

      13.02.2012 at 12:18

      Как только у нас появится модератор или админ Вячеслав, он обязательно будет писать статьи по OpenCart 1.5.1.+

  2. а как вывести такое же меню слева на главной странице в 1.5.1.3 опенкарт ? и еще есть ocstore, какая версия ocstore подойдет для шаблонов под опенкарт 1.5.х.х и 1.4.х.х . как это все взаимосвязано?

    • Ёханес

      13.02.2012 at 12:22

      Тьфу блин))) Алкогольные выходные…)) Извини Владислав! На стороннем форуме opencarta общался паралельно с Вячеславом))))

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

      13.02.2012 at 12:29

      1. Недавний урок — http://moushe.ru/nashi-stati/web-dizajn-2/opencart-1-5-1-shablon-fly-6-chast/
      2. Опенкарт и опенсторе это одно и тоже (Опенкарт это ответвление от Опенсторе для России — добавлены модули, способы оплаты и русский язык).

  3. Вы хотите сказать что версии указанные в шаблонах совпадают так же и с осstore? например шаблон для версии 1.4.х.х. на какую весрию осstore подойдет?

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

      13.02.2012 at 21:37

      OcStore 1.0.0+ = OpenCart 1.5.1.+
      OcStore 0.2.0+ = OpenCart 1.4.9
      (+ — и старше)

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

Your email address will not be published.

*

CAPTCHA image
*

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

Вверх ↑



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