Moushe.ru

Блог обо всём

OpenCart (4 часть)



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

До:                                                       После:

OpenCartMoushe1OpenCartMoushe6

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

1 Логотип

2 Вырежем картинки

3 Удалим 4 ссылки

1. Откроем папку – ..\image\data

Ищем картинку logo.png это шапка нашего сайта, теперь перерисуем её.

Я нарисовал такую картинку (просто для примера, потом вставите нормальный логотип):

logo

Размеры 300 x 70 пикс.

Обновим страницу с нашим сайтом:

OpenCartMoushe2

Навигация из-за размера картинки отодвинулась от панели поиска, исправим:

Откроем stylesheet.css

и найдём это:

#header .div3 {
float: right;
padding-top: 7px;
height: 38px;
}

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

#header .div3 {
float: right;
padding-top: 17px;
height: 38px;
}

Результат:

OpenCartMoushe3

2. Мне не нравятся картинки блоков – Категории, производители, информация и тд, давайте их удалим:

Откроем папку: ..\catalog\view\theme\Moushe\template\module

и открываем category.tpl (категории)

<div class="box">
<div class="top"><img src="catalog/view/theme/default/image/category.png" alt="" /><?php echo $heading_title; ?></div>
<div id="category" class="middle"><?php echo $category; ?></div>
<div class="bottom">&nbsp;</div>
</div>

Вырезаем картинку категории:

<div class="box">
<div class="top"><?php echo $heading_title; ?></div>
<div id="category" class="middle"><?php echo $category; ?></div>
<div class="bottom">&nbsp;</div>
</div>

Сделаем тоже самое в файлах:

information (информация)

manufacturer (производители)

featured (рекомендуем)

blinks (ссылки)

bestseller (хиты продаж)

корзину оставим с картинкой – пусть выделяется.

Теперь сделаем так чтобы надписи категорий отображалась по центру блока:

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

.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: 8px 0px 8px 7px;
color: #000000;
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
text-transform: uppercase;
text-align: center;
}

Любуемся на результат:

OpenCartMoushe4

3. Удалим ссылки: акции,избранное,контакты,карта сайта

Откроем файл header.tpl – ..\catalog\view\theme\Moushe\template\common

И удалим эту строку:

<div class="div3"><a href="<?php echo str_replace('&', '&amp;', $special); ?>" style="background-image: url('catalog/view/theme/default/image/special.png');"><?php echo $text_special; ?></a><a onclick="bookmark(document.location, '<?php echo addslashes($title); ?>');" style="background-image: url('catalog/view/theme/default/image/bookmark.png');"><?php echo $text_bookmark; ?></a><a href="<?php echo str_replace('&', '&amp;', $contact); ?>" style="background-image: url('catalog/view/theme/default/image/contact.png');"><?php echo $text_contact; ?></a><a href="<?php echo str_replace('&', '&amp;', $sitemap); ?>" style="background-image: url('catalog/view/theme/default/image/sitemap.png');"><?php echo $text_sitemap; ?></a></div>

Без неё сайт стал выглядеть так:

OpenCartMoushe5

Откроем stylesheet.css

Удалим 2 колонки (они больше не используются):

#header .div3 {
float: right;
padding-top: 17px;
height: 38px;
}
#header .div3 a {
margin-left: 15px;
padding: 1px 0px 2px 20px;
background-repeat: no-repeat;
background-position: left center;
}

И изменим:

#header .div4 {
width: 510px;
clear: right;
float: right;
height: 32px;
padding-right: 14px;
}

на это:

#header .div4 {
width: 510px;
clear: right;
float: right;
height: 32px;
padding-right: 14px;
padding-top: 70px;
}

или на это:

#header .div4 {
width: 510px;
clear: right;
float: right;
height: 32px;
padding: 70px 14px 0 0;
}

Результат:

OpenCartMoushe6

На сегодня всё, встретимся в следующей статье. Улыбка

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

  1. Очень полезные статьи по OpenCart. Я только начал его изучать, нашел много интересного и полезного. Автору респект и думаю он продолжит свою работу. Если кто знает где можно взять видео уроки по создания шаблонов для OpenCart на русском пишите.

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

    11.07.2011 at 20:56

    Следующий урок будет о том как уменьшить панель поиска и перенести её в правую часть , ждите, будет на этой неделе 🙂

  3. Здравствуйте, Уважаемые.
    Долго думал, покупать шаблон или переделывать самому. Случайно наткнулся на ваш ресурс и понял, что можно и самому что-то сделать. 🙂 Спасибо большое за то, что предоставляете информацию о том, чего в сети почти нет.

    Не могли бы вы подсказать, где мне найти из этого урока в stylesheet.css «#header .div3»? …у меня почему то нет этого пункта. 🙁
    можно ли просто вставить это не хватающее описание из вашего урока?
    Еще раз Спасибо. 🙂

  4. прошу прощения, пока не отвечайте. )))))) я разобрался пока что в своих кривых ручках. ))) думаю, дальше соображу. а нет — обязательно спрошу у вас. спасибо еще раз. :)))

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

    28.09.2011 at 21:17

    Конечно спрашивайте, если что-то нужно подробнее обьяснить 🙂

  6. Оксана

    22.10.2011 at 13:33

    Спасибо огромное! Всё так доступно написано! С Вашей помощью уже во многом разобралась. Только логотип у меня небольшой и упёрся в левый угол. Можно его как-нибудь подвинуть вправо?

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

    22.10.2011 at 16:34

    Сделайте логотип крупнее просто разместите его в белой рамке, это самое простое и быстрое решение

    • Оксана

      23.10.2011 at 12:05

      О, я столько сил потратила, чтобы убрать его с белого фона! Это очень некрасивое решение, к сожалению. Может, всё-таки есть возможность сдвинуть его на пару десятков пикселей вправо в коде?

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

      23.10.2011 at 21:05

      stylesheet.css

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

      нижняя строчка с отступом вам в помощь 🙂

    • Оксана

      24.10.2011 at 10:32

      Спасибо! =)

  8. Максим

    23.01.2012 at 02:25

    Первое, что пришло в голову, после того, как нашел эту информацию — ЧЕЛОВЕК!
    Большое спасибо.

  9. Елена

    04.02.2012 at 10:56

    Спасибо, за Вам за статьи, все очень доступно изложено
    Единственное, долго не могла понять, почему мои правки stylesheet.css не отображаются
    Потом уже наткнулась на строчку
    Исправила и все заработало

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

    04.02.2012 at 12:04

    Пожалуйста. 🙂

  11. Марина

    08.08.2012 at 16:51

    Владислав, большое спасибо за материалы. Как раз искала как шапку поменять, прочитала.
    Вопрос:
    когда я вставляю файл logo.png вместо того, что был — он не вставляется, а если вставляется, то очень маленький в левый угол — маленькая картинка. Я хочу всю шапку поменять — сделать (найти) картинку, и загружить. Загружать-то загружается, а не показывается. Помогите, плиз!

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

      10.08.2012 at 15:24

      Через админку логотип не вставить (если у вас стоит задача вставить крупную картинку во всю шапку), вам нужно открыть header.tpl и переписать строку с логотипом.

  12. Марина

    10.08.2012 at 21:45

    Спасибо большое, Владислав! А что значит «переписать строку с логотипом»? Поставить другие размеры? А как вообще узнать размер всей шапки, чтобы вставить новую картинку?

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

      10.08.2012 at 23:45

      Ширина шаблона 960 либо 980 пикселей в stylesheet.css указаны точные размеры шаблона.

  13. Марина

    13.08.2012 at 15:45

    Спасибо огромное!

  14. Алексей

    26.12.2012 at 11:36

    Огромное спасибо за Ваши уроки!!! Подскажите, а как отключить показ заголовка «Категории» ?

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

      26.12.2012 at 21:12

      Category.tpl — вторая строка

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

Your email address will not be published.

*

CAPTCHA image
*

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

Вверх ↑



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