Moushe.ru

Блог обо всём

OpenCart изменяем дизайн категорий (1 часть)



Сегодня мы изменим внешний вид модуля категории, чтобы он внешне отличался от других модулей.

До:                                                      После:

Категории доФинал

Открываем category.tpl (..\catalog\view\theme\default\template\module) и изменим это:

<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="top_c">
<div class="left"></div>
<div class="right"></div>
<div class="center">
<div class="heading_c"><?php echo $heading_title; ?></div>
</div>
</div>
<div id="category_c" class="middle_c"><?php echo $category; ?></div>
<div class="bottom_c">
<div class="left"></div>
<div class="right"></div>
<div class="center"></div>
</div>

Откроем папку image (..\catalog\view\theme\default\image) и вставим туда такие картинки (для скорости написания урока нарисовал самые простенькие):

upleftupcenteruprighttoplefttopcentertoprightpunct

Откроем stylesheet.css (..\catalog\view\theme\default\stylesheet) и вставим в него такой код:

.top_c .left {
background: url('../image/upleft.png') no-repeat;
width: 7px;
height: 32px;
float: left;
}
.top_c .right {
background: url('../image/upright.png') no-repeat;
width: 7px;
height: 32px;
float: right;
}
.top_c .center {
background: url('../image/upcenter.png') repeat-x;
height: 32px;
margin: 0 5px 0px 5px;
}
.heading_c {
padding: 10px 0px 5px 0px;
color: #2644c4;
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
text-transform: uppercase;
text-align: center;
}
.middle_c {
border-left: 1px solid #6a7fd7;
border-right: 1px solid #6a7fd7;
background: #FFFFFF;
padding: 2px;
}
.bottom_c .left {
background: url('../image/topleft.png') no-repeat;
width: 7px;
height: 32px;
float: left;
}
.bottom_c .right {
background: url('../image/topright.png') no-repeat;
width: 7px;
height: 32px;
float: right;
}
.bottom_c .center {
background: url('../image/topcenter.png') repeat-x;
height: 32px;
margin: 0 5px 10px 5px;
}
#category_c ul {
margin-top: 0px;
margin-bottom: 0px;
margin-left: 8px;
padding-left: 12px;
list-style: url('../image/punct.png');
}
.middle_c a {
display: block;
margin-right: 2px;
color: #6a7fd7;
font-weight: bold;
font-size: 13px;
text-decoration: none;
z-index: 1;
position: relative;
top: 1px;
}
.middle_c  a:hover {
color: #2644c4;
border-bottom: 0px;
z-index: 3;
}

Результат:

Posle

Изменив картинки и изменив цвета можно сделать так:

Posle1

При минимальном владении photoshop’ом можно добиться и такого результата:

Финал

Картинки (только уберите 1(единичку) в названии картинок, когда закинете их в image):

1punct1upleft1upcenter1upright1topleft1topcenter1topright

stylesheet.css:

.top_c .left {
background: url('../image/upleft.png') no-repeat;
width: 7px;
height: 32px;
float: left;
}
.top_c .right {
background: url('../image/upright.png') no-repeat;
width: 7px;
height: 32px;
float: right;
}
.top_c .center {
background: url('../image/upcenter.png') repeat-x;
height: 32px;
margin: 0 5px 0px 5px;
}
.heading_c {
padding: 10px 0px 5px 0px;
color: #fff;
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
text-transform: uppercase;
text-align: center;
}
.middle_c {
border-left: 1px solid #224f6f;
border-right: 1px solid #224f6f;
background: #d6e3f3;
padding: 2px;
}
.bottom_c .left {
background: url('../image/topleft.png') no-repeat;
width: 7px;
height: 32px;
float: left;
}
.bottom_c .right {
background: url('../image/topright.png') no-repeat;
width: 7px;
height: 32px;
float: right;
}
.bottom_c .center {
background: url('../image/topcenter.png') repeat-x;
height: 32px;
margin: 0 5px 10px 5px;
}
#category_c ul {
margin-top: 0px;
margin-bottom: 0px;
margin-left: 8px;
padding-left: 12px;
list-style: url('../image/punct.png');
}
.middle_c a {
display: block;
margin-right: 2px;
color: #135480;
font-weight: bold;
font-size: 13px;
text-decoration: none;
z-index: 1;
position: relative;
top: 1px;
}
.middle_c  a:hover {
color: #7f8080;
border-bottom: 0px;
z-index: 3;
}

Надеюсь урок был полезен.

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

  1. Оксана

    31.10.2011 at 12:05

    А можно слово «КАТЕГОРИИ» убрать вообще?

    • kvartnikstroy.ru

      31.10.2011 at 16:41

      Убрать можно по адресу:
      /catalog/language/russian/module/category.php

      Но придется подрегулировать css

    • Оксана

      31.10.2011 at 18:05

      Если там просто убрать это слово, сайт заполнят иероглифы. Или слово «корзина» появится.

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

    31.10.2011 at 19:40

    Откройте файл category.tpl (..defaultcatalogviewtheme*название шаблона*templatemodule) и удалите этот код:

    < *img src="catalog/view/theme/default/image/category.png" alt="" />< ?php echo $heading_title; ?>

    • Оксана

      31.10.2011 at 20:09

      Спасибо!

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

      31.10.2011 at 20:34

      Пожалуйста, если возникнут ещё вопросы, вы знаете где их задавать. 🙂

  3. Игорь

    04.11.2011 at 01:28

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

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

      06.11.2011 at 15:36

      Stylesheet.css:

      #column_left {
      float: left;
      width: 180px;
      margin-right: 10px;
      clear: left;
      }
      #column_right {
      float: right;
      width: 180px;
      margin-left: 10px;
      clear: right;
      }

      задаёте им нужный фон и всё (дописываете такую строку color: #135480;).

  4. Добрый вечер!
    Расскажите пожалуйста, как стандартной категории придать такой вид?
    http://shop.germida.com.ua/01.jpg
    Спасибо!
    С нетерпением жду Вашего ответа!

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

      06.11.2011 at 15:47

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

    • В конечном итоге я хотел получить блок вот такого вида:
      http://shop.germida.com.ua/02.jpg,
      еще было бы здорово если бы при наведении мышки менялся цвет фона (как показано на картинке)
      Спасибо большое! С нетерпением жду Вашего урока!

  5. Роман

    07.11.2011 at 18:32

    А есть ли возможность сделать так чтоб категории были жирным текстом а подкатекории обычным? Дело в том, что у меня все категории, показываються в развернутом виде (по умолчанию видны и категории и подкатегории) и мне нужно визуально выделить именно категории!

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

      07.11.2011 at 22:28

      Хммм. Интересная задачка, в выходные посмотрим — вдруг что и получится сделать. 🙂

  6. Роман

    08.11.2011 at 00:28

    Спасибо, у самого уже пальцы болят)))

  7. Роман

    15.11.2011 at 17:20

    Извиняюсь за назойливость, но получилось ли сделать что-то с жирностью категорий?

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

      15.11.2011 at 21:20

      Сложная задача попалась ещё не справился. 🙁

  8. Доброго времени суток.
    Никак не могу найти как на главной странице выводить все категории с изображением.
    При заходе в категорию, в центре отображаются картинки подкатегорий, а чтоб на главной отображались категории? Это возможно?

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

      25.12.2011 at 22:30

      Нужно покупать модуль категории на главной, продают на myopencart.ru

  9. Евгений

    05.02.2012 at 23:38

    Владислав, а можете дописать, как так же изменить дизайн информации, ссылки, производители и тд., сам пытался не получается???!!!

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

      06.02.2012 at 21:48

      Открываете information.tpl и делаете 1 часть урока (заменяете старый код на новый), и у вас информация будет выглядеть как категории, с остальными модулями практически тоже самое нужно будет проделать. 🙂

  10. Евгений

    13.02.2012 at 15:22

    К сожалению не получается(!

  11. Евгений

    14.02.2012 at 17:39

    О спасибо вам!

  12. МахмеД

    23.10.2012 at 13:36

    Как сделать категорию как на этом сайте: eforchina.com …. Заранее спасибо!

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

      23.10.2012 at 21:29

      Интерсный пример, в выходные постараюсь написать урок по этой теме.

  13. Здравствуйте!
    Спасибо большое за уроки. Очень помогли.
    Может кто сталкивался с таким вопросом. Необходимо при нажатии кнопки «Добавить в корзину» сделать переход на другой сайт с этим же товаром.
    Пример: http://linesmart.ru/4240518557.html

    Буду признателен за ответы!!!

  14. P.S. Версия opencart 1.4.9.5 (ostore 0.2.2)

  15. Татьяна

    28.03.2013 at 15:22

    Здравствуйте. Скажите,а возможно ли разбить блок «категории» на два?

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

      28.03.2013 at 21:34

      Зачем? Какая у вас цель? Можете поискать модуль html и например в него вставить отдельные категории.

  16. Доброго времени суток! Подскажите как скрыть определенную категорию в меню?

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

      01.08.2013 at 23:39

      Каталог — категории — изменить — данные — статус — отключить

  17. Евгений

    14.10.2013 at 12:33

    Владислав, а как сделать, чтобы каждая категория была картинкой, не просто текст, а именно с картинкой, которая кстати присутствует в настройках

  18. Игорь

    14.04.2014 at 17:46

    Владислав. подскажите как скрыть категорию из бокового меню, То есть не отключить ее через админ панель, а как-то через исходный код,

  19. Анатолий

    29.12.2014 at 16:33

    Владислав добрый вечер, может вы подскажите, как сделать банер ниже слайдера, банер должен состоять из 4 картинок по горизонтали и прописать к ним путь. К примеру одна картинка будет доставка, при нажатии на неё она будет отправлять на статью доставка.

  20. Антон

    23.01.2015 at 12:33

    Владислав, здравствуйте. Подскажите — как увеличить картинки подкатегорий, когда заходишь в категорию. Весь стайлшит перерыл — ничего не получается.

  21. рЕБЯТ подскажите пожалуйста как устранить баг в строке,установил сео про чпу включил теперь такой хвост светит Osvyeshchyeniye/L-mpy-c25c31.html

  22. Александр

    16.06.2015 at 21:49

    Подскажите пожалуйста как поменять цвет подкатегорий меню. Не самых категорий, а подкатегорий.

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

Your email address will not be published.

*

CAPTCHA image
*

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

Вверх ↑



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