Moushe.ru

Блог обо всём

OpenCart (8 часть)



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

До:                                                       После:

OpenCartMoushe14OpenCartMoushe19

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

1 Вырежем ненужный фон

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

3 Изменим фон шаблона

4 Логотип

5 Немного допилим шаблон (нижняя часть блоков, цвет фона и тд.)

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;
}

Смотрим на шаблон:

OpenCartMoushe15

2 Теперь откроем папку с картинками ..\catalog\view\theme\Moushe\image и ищем 3 картинки:

header_2_left

header_2_center

header_2_right

немного их перерисуем (люблю png за то что в нём можно сделать прозрачность ):

header_2_leftheader_2_centerheader_2_right

(их тут почти не видно,но они здесь есть Подмигивающая рожица)

Смотрим на шаблон:

OpenCartMoushe16

3 Откроем картинку fon.jpg и заменим фон на этот:

fon

Откроем stylesheet.css и найдём этот код:

body {
background: url('../image/fon.jpg') repeat-x;
margin: 0px;
padding: 0px;
text-align: center;
}

добавим цвет фона:

body {
background: #87bff9 url('../image/fon.jpg') repeat-x;
margin: 0px;
padding: 0px;
text-align: center;
}

Смотрим на шаблон:

OpenCartMoushe17

Симпатичненько, но нужно перерисовать нижнюю картинку у блоков, белые уголки не айс, ищем картинку box_bottom.png и стираем ластиком белые уголки снизу:

box_bottom

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

OpenCartMoushe18

Ну вот, другое дело Улыбка

Откроем папку с логотипом ..\image\data немного поработаем над иконкой компьютера:

logo

Смотрим шаблон:

OpenCartMoushe19

А так скачайте любую иконку компьютера в интернете, там их много Подмигивающая рожица

На сегодня всё.

21 Комментарий

  1. Артур

    29.11.2011 at 18:24

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

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

    29.11.2011 at 21:50

    1. В комментах одной из тем уже было как менять размер колонок. — http://moushe.ru/nashi-stati/web-dizajn-2/opencart-6-chast/#comments
    2. Сохраняете шапку в PNG с задним фоном с нулевой прозрачностью и всё.

  3. Алексей

    07.01.2012 at 23:16

    Подскажите пожалуйста: сделал свой логотип,размер немного больше стандартного,отступ шапки тоже сделал, но логотип сместился не на шапке а залез на текст. Можно ли его как-то перемещать (задавать местоположение)?вот сайт если
    нужно BIG-SHOP.COM.UA (версия ОС 1.5.1.3). И хотелось бы чтобы в шапке возле лого можно было номера телефонов разместить,подскажите пожалуйста!

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

      08.01.2012 at 00:09

      stylesheet.css
      #header #logo {
      position: absolute;
      top: 25px;
      left: 15px;
      }

      задаёте ширину и размер (width и height) и если что добавляете отступ вниз от логотипа (если понадобится).

    • Алексей

      08.01.2012 at 01:20

      Методом втыка разобрался, спасибо!
      А поповоду номеров телевонов в шапке
      подскажете что-то?

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

      08.01.2012 at 21:22

      Создайте новый div, и через ксс задайте ему ширину и высоту как у логотипа и добавьте отступ от логотипа вправо, либо вставьте телефон в див поиска, и после телефона задайте br — перенос на новую строку.

    • Алексей

      10.01.2012 at 02:58

      спасибо!буду пробовать!

  4. А возможно ли сделать так чтобы на главной странице background был один а на всех последующих другой?

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

      30.01.2012 at 00:29

      Фон прописывается сразу для всего магазина в header, а header (шапка сайта) у нас один и тот же для всех страниц, а так попробуйте задать этот вопрос на офф. форуме, возможно подскажут решение. 🙂

  5. Здравствуйте Владислав, подскажите пожалуйста как убрать фон из категорий, подкатегорий, описания товара, чтобы там в блоках фон оставался белым, как в блоках хиты продаж, рекомендуемые и т.д.
    И есть ли возможность в шапке прописать один фон, а ниже уже другой? у меня накладывается один на другой. Заранее спасибо.

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

    26.03.2012 at 21:00

    1 — Открываете stylesheet.css и правите код .box и .content
    2 — Делаете в header.tpl пару стилей — один для шапки второй ниже для всего сайта и добавляете их код в css/

  7. Спасибо, с первым пунктом разобрался, оказалось все просто.
    А вот со вторым не выходит, хотел уже бросить и просто в шапку залить фон, но получается еще хуже. Нет случайно готового решения что куда прописать? В готовых шаблонах я реализации не нашел. Заранее спасибо.

  8. Фон в шапке состоит из рисунка который повторяется по горизонтали, а ниже рисунок идет по вертикали. Поэтому без 2х рисунков никак((

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

      27.03.2012 at 22:54

      Присвойте тогда второй фон в css блоку #content

  9. Вечер добрый, появился еще вопрос(выше озвучивали), около лого хочу поставить картинку с телефонами(именно картинку чтобы цыфры не меняли формат от прог типа скайпа). Статью по этим урокам не нашел((
    В header.tpl дописал div:
    div id=»phone»
    img scr=»catalog/view/theme/default/image/phone1.jpg» /
    /div

    в стиле добавил
    **#header #phone {
    width: 250px;
    height: 75px;
    position: absolute;
    top: 25px;
    left: 200px;
    }

    без звездочек конечно, картинку залил, но ее не отображает, в чем косяк?
    Заранее спасибо.

  10. Добрый подскажите пож, как корректно выставить счетчики в ряд?

    Вставляю счетчики в футер, первые 4 стали просто идеально (подряд в первом ряду)

    А вот последние 2 счетчика (кода) стали коряво (по одному во второй и третий ряд)

    Как их выставить в продолжении первого ряда??

    Вот скрин: http://cs402220.userapi.com/v402220354/1eaa/3CW7bfrn95g.jpg

  11. Здравствуйте. Помогите пожалуйста.
    Как выставить счетчики метрик в футер, в продолжении первого ряда??

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

      26.03.2013 at 21:42

      В footer.tpl после первого /ul вставляйте ваши счётчики

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

Your email address will not be published.

*

CAPTCHA image
*

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

Вверх ↑



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