Moushe.ru

Блог обо всём

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



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

До:                                                       После:

ДоПосле

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

1. Сделаем отступ для окна поиска

2. Закруглим нижние углы панели категорий

3. Немного доделаем вход в личный кабинет и регистрацию

4. Доделаем названия товаров

5. Перекрасим стиль модулей

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

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

#header #search {
position: absolute;
top: 40px;
right: 0px;
width: 298px;
z-index: 15;
}

на это:

#header #search {
position: absolute;
top: 40px;
right: 7px;
width: 298px;
z-index: 15;
}

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

 

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

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

и изменяем:

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

ниже ищем это:

#menu > ul > li ul > li > a:hover {
background: #000000;
}

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

#menu > ul > li ul > li > a:hover {
background: #868686;
}

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

 

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

#welcome a{
color: #1fabe8;
font-weight: bold;
padding-bottom: 5px;
padding-top: 10px;
}

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

#welcome a {
color: #1fabe8;
font-weight: bold;
padding-bottom: 5px;
padding-top: 10px;
text-decoration: none;
}
#welcome a:hover {
color: #fff;
text-decoration: underline;
}

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

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

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

на это:

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

 

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

.box .box-heading {
-webkit-border-radius: 7px 7px 0px 0px;
-moz-border-radius: 7px 7px 0px 0px;
-khtml-border-radius: 7px 7px 0px 0px;
border-radius: 7px 7px 0px 0px;
border: 1px solid #DBDEE1;
background: url('../image/background.png') repeat-x;
padding: 8px 10px 7px 10px;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
line-height: 14px;
color: #333;
text-align: center;
}

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

.box .box-heading {
-webkit-border-radius: 7px 7px 0px 0px;
-moz-border-radius: 7px 7px 0px 0px;
-khtml-border-radius: 7px 7px 0px 0px;
border-radius: 7px 7px 0px 0px;
border: 1px solid #363636;
background: url('../image/fonpanel.jpg') repeat-x;
padding: 8px 10px 7px 10px;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
line-height: 14px;
color: #fff;
text-align: center;
}

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

.box .box-content {
background: #FFFFFF;
-webkit-border-radius: 0px 0px 7px 7px;
-moz-border-radius: 0px 0px 7px 7px;
-khtml-border-radius: 0px 0px 7px 7px;
border-radius: 0px 0px 7px 7px;
border-left: 1px solid #DBDEE1;
border-right: 1px solid #DBDEE1;
border-bottom: 1px solid #DBDEE1;
padding: 10px;
}

на это:

.box .box-content {
background: #FFFFFF;
-webkit-border-radius: 0px 0px 7px 7px;
-moz-border-radius: 0px 0px 7px 7px;
-khtml-border-radius: 0px 0px 7px 7px;
border-radius: 0px 0px 7px 7px;
border-left: 1px solid #363636;
border-right: 1px solid #363636;
border-bottom: 1px solid #363636;
padding: 10px;
}

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

.box-product .image img {
padding: 3px;
border: 1px solid #E7E7E7;
}

на это:

.box-product .image img {
-webkit-border-radius: 7px 7px 0px 7px;
-moz-border-radius: 7px 7px 0px 7px;
-khtml-border-radius: 7px 7px 0px 7px;
border-radius: 7px 7px 0px 7px;
padding: 3px;
border: 1px solid #1aa7e5;
}

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

 

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

После

На сегодня всё, до новых встреч. Улыбка

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

  1. Ёханес

    25.01.2012 at 09:43

    И снова спасибо за отличную статью Владислав! Хотелось бы узнать, как Вас можно отблагодарить? На моб телефон или Я кошелек деньгу там перевести?) Нужно же стимулировать ваше желание писать столь необходимые статьи! 🙂

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

      25.01.2012 at 21:08

      Достаточно того что вы посещаете наш сайт. 🙂

      Хотя если что вот и «кошельки» )))
      Яндекс счёт — 410011255443442
      Мобильный — 8 (903) 006 81 47

  2. Ёханес

    26.01.2012 at 02:30

    Владислав, почему-то в рекомендуемых товарах всё чётко, в синей рамочке, а в категориях (витрина) нет… На что обратить внимание? Или это мы еще не затрагивали?
    Так же в рекомендуемых товарах присутствует косяк — если название товара длинное, оно не переносится, а становится длинным и практически залезает на другой товар в этом окошке… Возможно решить?

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

      26.01.2012 at 21:08

      1. Мы делали это только для модулей витрины (центральной страницы), для категорий это делается отдельно.
      2. На скриншоте предпоследний товар с длинным названием на 2 строки, проблем не вижу на сколько название длиннее этого?

    • Ёханес

      26.01.2012 at 22:38

      Спасибо, разобрался с рамками, Ротор мультифункциональный cb-130 типо этого) ну думаю не буду заморачиваться и просто сделаю короткое название

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

      26.01.2012 at 22:51

      🙂

  3. Все делал, как описывается в уроках. Сейчас заметил, что у меня почему-то на витрине нет тонкой черной рамки вокруг «Рекомендуемые товары», картинки с их изображениями придвинуты вплотную к верхнему краю (нет пробела), и еще: надпись на кнопках не «Куплю», а «В корзину». Как все это исправить? 😕

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

      26.01.2012 at 21:13

      1. 5 шаг сделали полностью ?
      2. В папке с переводом очень просто переименовать вашу надпись — ..cataloglanguagerussianrussian.php

    • Отлично!
      1. Нашел, в одном месте стояли:
      }
      }
      🙂
      2. Исправил. 😮

  4. Ёханес

    27.01.2012 at 23:57

    Владислав! Не поможете мне небольшим советом?
    Хочу в строке горизонтальной («меню») сделать только «о нас», «статьи» и т.д.
    Как вставить туда ссылку разобрался, всё работает, одно НО только:
    Если я убираю из этой строки (меню) все категории (с товарами которые), то сама строка (меню) пропадает… Борюсь уже 2й день с этой ерундой, все перепробывал…
    Подскажите пожалуйста 🙁

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

      28.01.2012 at 00:05

      Оставляйте в меню —
      < *div id="menu">
      < *ul>
      и добавляйте в начале каждой ссылки < *li> — дальше ссылка
      в конце каждой сылки вставляйте < */li>
      < */ul>
      < */div>
      * удалите — без них код в комментах не отобразился бы.

  5. Ёханес

    28.01.2012 at 00:17

    Ж..па как всё просто))) Спасибо большое!

  6. а почему кнопка купить пляшет как сумашедшая ? её можно как то угомонить что бы все товары с кнопками были по сетке а не по волнам ?

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

      15.04.2012 at 21:02

      В этом уроке мы не трогали кнопку в корзину, а трогали только картинку товара, хз с чем связана ваша проблема. Вы делали предыдущие уроки ?

  7. ето не с уроками связано, вот смотрите, картинка до и картинка после нижний ряд товаров улыбается а верхний вроде бы как ровно, и ета беда уже столько времени сколько я помню опенкарт, и разработчики почему то не стесняются, и ооочень много шаблонов даже платных страдают етой проблемой, в демо магазин ещё названия товаров короткие, а например слово отбойный молоток или аккумуляторный гвоздезабиватель, вот из за етого и прыгают товары…. надо или прикручивать какую нибудь gif картинку высото к примеру 200 пикселей и шириной в 1 пикс или добавлять пустые строки после коротких слов или обрезать длинные, как показывает практика первый способ самый наглядный, как на опенкарте его делать не знаю, но на джумле такое находил

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

      16.04.2012 at 21:02

      Задайте минимальную высоту и уменьшите ширину в ксс стилю с названием товара.

  8. Антон

    06.04.2013 at 21:02

    Здравствуйте. Подскажите, как сделать чтобы задний фон был чёрного цвета, а не белого?

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

      06.04.2013 at 22:16

      stylesheet.css — body — background

  9. Сергей

    08.04.2015 at 15:14

    Доброго времени суток!

    Сделал все как у Вас в уроке, но там, где Рекомендуемый товар просто белый фон . В чем еще может быть причина

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

      08.04.2015 at 15:16

      Может быть картинка фона из 3 части статьи у вас в другом формате, не как в статье, вот и не подгружается.

  10. Диана

    28.06.2015 at 20:46

    Здравствуйте. У меня проблема как у Сергея. Строка «Рекомендуемые» полностью белая, даже шрифт белый. Картинка фона в форма jpg, вроде всё правильно. Скажите, пожалуйста, что делать?

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

      28.06.2015 at 20:48

      Проверяйте название картинки, разрешение на всякий случай, если всё правильно — то в ксс ошиблись или закинули картинку в папку image друго-го шаблона.

  11. Диана

    28.06.2015 at 20:53

    А можно просто как-то вернуть «Рекомендуемым» черным шрифт?

  12. Диана

    28.06.2015 at 21:46

    Большое спасибо за помощь.) Но позвольте ещё кое-что спросить. У меня на панельке категорий названия сместились вниз. Как их поровнять ровно по центру?

  13. Диана

    28.06.2015 at 22:42

    Большое Вам спасибо!)

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

Your email address will not be published.

*

CAPTCHA image
*

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

Вверх ↑



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