Moushe.ru

Блог обо всём

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



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

12

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

1. Перекрасим центральную колонку

2. Изменим заголовок приветственного сообщения

3. Перекрасим бордюры шапки сайта

 

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

1. Закинем эти картинки в папку image и согласимся на замену изображений:

content_top_leftcontent_top_centercontent_top_rightcontent_bottom_leftcontent_bottom_centercontent_bottom_right

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

#content .top .left {
background: url('../image/content_top_left.png') no-repeat;
width: 5px;
height: 32px;
float: left;
}

на этот:

#content .top .left {
background: url('../image/content_top_left.png') no-repeat;
width: 6px;
height: 32px;
float: left;
}

этот код:

#content .top .right {
background: url('../image/content_top_right.png') no-repeat;
width: 5px;
height: 32px;
float: right;
}

на этот:

#content .top .right {
background: url('../image/content_top_right.png') no-repeat;
width: 37px;
height: 32px;
float: right;
}

и наконец этот:

#content .top .center {
background: url('../image/content_top_center.png') repeat-x;
margin-left: 5px;
margin-right: 5px;
}

на этот:

#content .top .center {
background: url('../image/content_top_center.png') repeat-x;
margin-left: 6px;
margin-right: 37px;
}

Теперь найдём это:

#content .middle {
border-left: 1px solid #DDDDDD;
border-right: 1px solid #DDDDDD;
background: #FFFFFF;
padding: 10px 10px 1px 10px;
min-height: 30px;
}

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

#content .middle {
border-left: 1px solid #1c64dc;
border-right: 1px solid #1c64dc;
background: #FFFFFF;
padding: 10px 10px 1px 10px;
min-height: 30px;
}

Найдём это:

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

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

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

2. Откроем файл home.tpl и изменим это:

<h1><?php echo $heading_title; ?></h1>

на это:

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

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

#header .div1 {
border-right: 1px solid #dddddd;
border-left: 1px solid #dddddd;
}
#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;
}

на это:

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

Откроем папку image и закинем в неё эти картинки, соглашаемся на замену:

header_2_leftheader_2_centerheader_2_right

Результат наших трудов:

2

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

Результат наших трудов:


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

  1. Дмитрий

    22.02.2012 at 10:24

    1.4.* уже устарел. Хотелось бы побольше уроков для 1.5.*

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

      22.02.2012 at 22:13

      🙂 Мне больше нравится OpenCart 1.4.9, а так в скором времени будет и по 1.5.1 побольше материалов.

  2. Алексей

    22.02.2012 at 10:51

    Спасибо за урок =)

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

      22.02.2012 at 22:13

      Пожалуйста.

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

Your email address will not be published.

*

CAPTCHA image
*

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

Вверх ↑



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