Moushe.ru

Блог обо всём

OpenCart 1.5.1 шаблон fly (3 часть)



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

До:                                                       После:

До5

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

1. Изменим дизайн категорий.

2. Изменим (немного) кнопки.

3. Изменим название товара при наведении на него курсором мыши.

 

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

1. Откроем stylesheet.css (..\catalog\view\theme\fly\stylesheet) и ищем этот код:

#menu {
background: #585858;
border-bottom: 1px solid #000000;
height: 37px;
margin-bottom: 15px;
-webkit-border-radius: 5px 5px 5px 5px;
-moz-border-radius: 5px 5px 5px 5px;
-khtml-border-radius: 5px 5px 5px 5px;
border-radius: 5px 5px 5px 5px;
-webkit-box-shadow: 0px 2px 2px #DDDDDD;
-moz-box-shadow: 0px 2px 2px #DDDDDD;
box-shadow: 0px 2px 2px #DDDDDD;
padding: 0px 5px;
}

и немного его изменим:

#menu {
background: #000 url('../image/fonpaneldown.jpg') repeat-x;
height: 32px;
margin-bottom: 15px;
padding: 0px 5px;
}

(мы изменили фон и убрали закругления вокруг блока, так-же мы изменили немного высоту блока)

Возьмём эту картинку и закинем в папку image (..\catalog\view\theme\fly\image):

fonpaneldown

Изменим это:

#header {
height: 90px;
margin-bottom: 7px;
padding-bottom: 4px;
position: relative;
z-index: 99;
}

на это:

#header {
height: 100px;
padding-bottom: 4px;
position: relative;
z-index: 99;
border-left: 1px solid #363636;
border-right: 1px solid #363636;
}

(мы немного изменили высоту шапки и добавили полоски слева и справа у шапки магазина)

изменим это:

#menu > ul > li > a {
font-size: 13px;
color: #FFF;
line-height: 14px;
text-decoration: none;
display: block;
padding: 12px 15px 11px 15px;
z-index: 6;
position: relative;
}

на это:

#menu > ul > li > a {
font-size: 13px;
color: #FFF;
line-height: 14px;
text-decoration: none;
display: block;
padding: 8px 15px 10px 8px;
z-index: 6;
position: relative;
}

(мы изменили отступы вокруг ссылок и теперь подкатегория товара появляется без отступа вниз от своей категории)

В прошлом уроке мы добаляли в шапку сайта 3 кнопки социальных сетей, изменим их отступ справа, изменяем это:

#socbuttons {
position: absolute;
top: 2px;
right: 0px;
}

на это:

#socbuttons {
position: absolute;
top: 2px;
right: 5px;
}

Смотрим результат проделанной работы:

1

 

2. Мне не нравятся кнопки, слишком уж они топорные (закругление очень резкое):

2

закидываем в папку image (..\catalog\view\theme\fly\image) эти картинки:

button-leftbutton-rightbutton-left-activebutton-right-active

Смотрим результат:

3

Найдите 10 отличий: Подмигивающая рожица

4

 

3. Ищем этот код:

.box-product .name a {
color: #38B0E3;
font-weight: bold;
text-decoration: none;
display: block;
margin-bottom: 4px;
}

и сразу под ним добавим этот:

.box-product .name a:hover {
color: #498eae;
font-weight: bold;
text-decoration: underline;
display: block;
margin-bottom: 4px;
}

(теперь названия товаров на главной странице магазина при наведении курсором мыши меняют свой цвет и подчёркиваются)

Ищем этот код:

.product-grid .name a {
color: #38B0E3;
font-weight: bold;
text-decoration: none;
display: block;
margin-bottom: 4px;
}

и ниже добавим этот:

.product-grid .name a:hover {
color: #498eae;
font-weight: bold;
text-decoration: underline;
display: block;
margin-bottom: 4px;
}

(теперь названия товаров в категориях при отображении в виде витрины при наведении курсором мыши меняют свой цвет и подчёркиваются)

Ищем этот код:

.product-list .name a {
color: #38B0E3;
font-weight: bold;
text-decoration: none;
}

и ниже добавим этот:

.product-list .name a:hover {
color: #498eae;
font-weight: bold;
text-decoration: underline;
}

(теперь названия товаров в категориях при отображении в виде списка при наведении курсором мыши меняют свой цвет и подчёркиваются)

 

Результат нашей работы:

5

На сегодня всё, до встречи в следующих статьях. Подмигивающая рожицаem

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

  1. Привет!
    Всё это у тебя здорово получается.. А ты можешь верхний горизонтальный список категорий изменить на другие ссылки там «На главную», «О компании», Контакты, Доставка.
    А то я сделал категории слева, а на верху они получается дублируются, совсем это не надо, а вот такие ссылки, в том же самом дизайне даже гораздо полезнее было бы, туже корзину я бы в этот список добавил. Я просто в этом вообще ничего не понимаю, но руки чешутся исправить эту форму, а знаний нету…

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

      23.01.2012 at 22:55

      Открываете header.tpl и ищете код < *div id="menu"> (126 строка примерно), после неё удаляете всё что размещено между < *ul>< */ul> и вставляете нужные вам ссылки.

  2. Ну понятно… я посмотрел на эти иероглифы, догоняю общий смысл, но как вставить нужные мне ссылки я все таки не знаю.. торррмоз((( Короче знаний даже простых не хватает.. Спасибо конечно большое за ответ..

  3. Ёханес

    24.01.2012 at 00:58

    Владислав! Огромное спасибо за ваши замечательные статьи!

  4. Ёханес

    24.01.2012 at 01:02

    C нетерпением жду Ваших следующих статей!

  5. Ёханес

    24.01.2012 at 21:43

    Владислав! Не поможете ли Вы мне с небольшим вопросом?
    Имеем два изображения: Корзина (пустая), корзина (полная). Товаров нет — корзина пустая. Товар в корзине есть — она полненькая. Как реализовать их в шапке сайта вместо надписи «Корзина»?
    P.S. Это можно было бы включить в следующую статью по опенкарту 💡 😳

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

      24.01.2012 at 23:23

      хех, это нужно искать скрипт, связывать как то с товаром, поищу конечно решение но вот получится ли , вопрос иной 🙂

  6. Ёханес

    25.01.2012 at 00:15

    Эх… Чувствую, что раз уж всё так «просто», то… Старания и труд всё перетрут))

  7. Ёханес

    25.01.2012 at 00:18

    Если нужно, могу предложить пару картинок чуть отредактированных в фотошопе)
    P.S. Хоть чем-то помогу))

  8. по этому уроку из списка задач №1 изменила дизайн категорий, только не так как в примере: поставила черный шрифт названий категорий на белом фоне… все получилось.. только одна загвоздка… теперь при наведении курсором на название категории она закрашивается черным цветом и не видно текста.. ? как сделать так, чтобы название категории при наведении курсором не меняло цвет? и как изменить цвет выплывающего подменю?…

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

    11.03.2012 at 21:08

    Все изменения делаются в css, правьте это:

    #menu > ul > li:hover {
    background: #000;
    }
    #menu > ul > li > a.active {
    background: #000;
    }

    • Спасибо большое за ответ!

      А подскажите еще, пожалуйста, как снести кнопку КУПИТЬ ? т.е. чтобы ее вообще не было под продуктами ни на главной странице, ни в продуктовой сетке…

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

      09.04.2012 at 21:44

      Удаляйте эту строку в модулях

      < а оnсliсk="addToСаrt('');" clаss="buttоn">< ?рhр еchо $buttоn_cаrt; ?>

  10. В последнем теге ошибка:
    text-decoration: none;
    тогда ссылка НЕ будет подчеркиваться:

    Хотя мне нравятся ссылки без подчеркивания)

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

      04.04.2012 at 21:05

      Спс за найденную ошибку, исправил. Я тоже предпочитаю ссылки без подчёркивания. 🙂

  11. > Владислав Храмцов
    09.04.2012 в 21:44 написал:

    Удаляйте эту строку в модулях

    Скажите, пожалуйста, а в каких конкретно модулях и где их искать: в catalog\view\theme\default\template\module или в catalog\controller \module ? 😳

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

      12.04.2012 at 21:20

      В папке модули (catalogviewthemedefaulttemplatemodule):

      bestseller
      category
      featured
      latest
      special

  12. Скажите пожалуйста, а как сменить цвет черных горизонтальных полосок меню. спасибо…
    Забыл сказать, у меня версия 1.5.2.2 а там нет таких файлов как в вашем варианте. И даже в версии ниже 1.5.1.2 то же нет таких. Вопрос в том что черный цвет горизонтальных меню хочется сменить но где это лежит и это скорее всего не просто графический файл а цветовой код где то прячется.

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

      10.06.2012 at 00:45

      У вас нет папки fly ? Вполне логично, если вы не делали первый и второй урок из этого цикла… Для изменения верхней полосы категорий вам нужно изменить файл stylesheet стандартного шаблона ((..catalogviewthemedefaultstylesheet) если конечно вы не установили другой шаблон).

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

      10.06.2012 at 01:42

      background: #585858; — это фон меню

  13. background: Мда, столько переписываться и не написать бы где это? Таких background: до фига не тыкать же все подряд. Если не знаете скажите а то каптчи заманался вводить.

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

      12.06.2012 at 20:57

      Эх…. Вы задали вопрос — а как сменить цвет черных горизонтальных полосок МЕНЮ … Вопрос в том что черный цвет горизонтальных МЕНЮ хочется сменить но где это лежит и это скорее всего не просто графический файл а цветовой код где то прячется.

      Я дал вам строчку из первой части статьи где задаётся именно цвет чёрной полоски и там даже в скобках комментарий — (мы изменили фон и убрали закругления вокруг блока, так-же мы изменили немного высоту блока), и всё равно вы недовольны ответом…

      Скидывайте stylesheet.css мне на почту hruhru.87@mail.ru и я сам вам его исправлю.

  14. Здравствуйте, подскажите пожалуйста, я фон меню сделал светло синим, и при наведении на него курсором мыши он выделяется черным и выпадающее меню тоже, не красиво получается, хотелось бы сделать его более не заметным, но не могу найти где это изменить…Очень надеюсь на вашу помощь…

    • Где цвет выделения нашел, вот выпадающего меню не могу никак отыскать.

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

      18.12.2012 at 21:51

      /* menu */
      #menu > ul > li > div

  15. Максим

    17.01.2013 at 17:01

    Привет, не подскажешь, столкнулся с такой проблемой. Не могу найти де в коде кавырнуть, что бы выводилась подкатегория в главном меню. Версия 1.5.1.3. Заранее спасибо

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

      17.01.2013 at 22:16

      Если я правильно понял вопрос то здесь — stylesheet.css, удалить вот эту строку:
      display: none;
      Вот из этого блока:
      #menu > ul > li > div {

  16. Леонид

    12.03.2013 at 18:25

    Владислав, помогите пожалуйста.
    Я делаю точно по ваших статьях (1, 2, 3) и после изменения фона меню, добавления туда картинки fonpaneldown.jpg, меню становится полосатым (вертикальные полосы вдоль всего меню).
    Где я ошибся и как это исправить? Спасибо.
    Прилагаю скрин:
    http://i54.fastpic.ru/big/2013/0312/e0/40c6fc42bba71d16884a28c0fafd5ae0.jpg

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

      12.03.2013 at 21:09

      Другим браузером скачайте фон, иногда возникает такая проблема что фон скачивается с белой полосочкой.

  17. Александр

    15.07.2013 at 14:52

    Здравствуйте Владислав, такой вопрос: я сейчас делаю им по автошинам, как сделать так чтобы в главном меню были кнопки «Главная» «Каталог шин» «Каталог дисков» и т.д., а при нажатии на каталог шин в боковом меню отражались категории шин, и с дисками соответственно сделать так же?

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

      15.07.2013 at 21:28

      Ставьте модуль расширенных категорий и настраивайте как вам нужно

  18. Александр

    15.07.2013 at 15:05

    И возможно ли в opencart реализовать вывод товара в карточке таблицей как здесь http://z-shina.com.ua/barum.html т.е. слева шина справа описание, а под этим всем размеры в которых она есть в наличи с кнопками «купить»?

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

      15.07.2013 at 21:30

      Настраиваете опции и правите контроллер category.php чтобы выводил значение опций.

    • Александр

      16.07.2013 at 09:19

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

  19. Николай

    19.03.2014 at 12:25

    Здравствуйте Владислав, подскажите пожалуйста как сделать так что бы
    при наведении мышки, открывалось краткое описание товара и появлялась тень рамки. Пример rozetka.com.ua
    Заранее благодарен

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

      19.03.2014 at 14:45

      Мне нужны ссылка на ваш сайт, версия ocStore и возможно помогу.

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

Your email address will not be published.

*

CAPTCHA image
*

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

Вверх ↑



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