Moushe.ru

Блог обо всём

OpenCart (7 часть)



Продолжим работы над нашим шаблоном OpenCart’а

До:                                                       После:

OpenCartMoushe10OpenCartMoushe16

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

1 Удалим лишний фон

2 Изменим оформление “хлебных крошек”

 

1 Откроем stylesheet.css и ищем этот код:

#header .div5 .left {
background: url('../image/header_1_left.png') no-repeat;
width: 5px;
height: 40px;
float: left;
}
#header .div5 .right {
background: url('../image/header_1_right.png') no-repeat;
width: 5px;
height: 40px;
float: right;
}
#header .div5 .center {
background: url('../image/header_1_center.png') repeat-x;
height: 40px;
margin-left: 5px;
margin-right: 5px;
}

Изменяем:

#header .div5 {
clear: both;
height: 40px;
}

Смотрим:

OpenCartMoushe11

2 В папке ..\Moushe\image меняем картинки:

header_2_leftheader_2_centerheader_2_right

Картинки в png с прозрачностью, поэтому их тут плохо видно, но они здесь есть Подмигивающая рожица

Обновим страницу в браузере:

OpenCartMoushe16

На сегодня урок окончен.

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

  1. Дмитрий

    24.07.2011 at 16:09

    Спасибо!
    Не совсем понятно по рисункам только что изменилось в оформлении хлебных крошек?
    И планируются ли у Вас уроки для изменения оформления нового Opencart 1.5.x?

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

    24.07.2011 at 21:25

    Хлебные крошки стали с полупрозрачным фоном — то есть фоновой рисунок шапки будет просвечивать через хлебные крошки, в следующем уроке вы это увидите. Я пока ещё не устанавливал 1.5.x ни на магазы ни на локальный сервер, стоит попробовать. 🙂

  3. Немножечко не понял — удаляем три блока .div5 .left .div5 .right .div5 .center
    А блок .div5 который по умолчанию содержит:
    #header .div5 {
    clear: both;

    дописываем строку height: 40px;
    Правильно?

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

    06.10.2011 at 10:22

    Да, всё верно — код блока div содержит три подблока и их мы вырезаем, оставляем только основной 😉

  5. Павел

    01.02.2013 at 13:29

    Здравствуйте, сделайте урок пожалуйста как делать красивые слайды на главную страницу opencart

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

Your email address will not be published.

*

CAPTCHA image
*

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

Вверх ↑



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