Moushe.ru

Блог обо всём

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



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

До:                                                       После:

12


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

1. Немного изменим футер витрины

2. Немного поработаем над категориями

3. Немного поработаем над карточкой товара

 

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

1. Открываем stylesheet.css и изменяем этот код:

#footer {
clear: both;
overflow: auto;
min-height: 100px;
padding: 20px;
border-top: 1px solid #DBDEE1;
border-bottom: 1px solid #DBDEE1;
background: #F8F8F8;
}

на этот:

#footer {
clear: both;
overflow: auto;
min-height: 100px;
padding: 20px;
border: 1px solid #363636;
-webkit-border-radius: 7px 7px 7px 7px;
-moz-border-radius: 7px 7px 7px 7px;
-khtml-border-radius: 7px 7px 7px 7px;
border-radius: 7px 7px 7px 7px;
}

а этот код:

#footer .column a {
text-decoration: none;
color: #000;
}

на этот:

#footer .column a {
text-decoration: none;
color: #1aa7e5;
font-weight: bold;
}

и этот код:

#footer .column a:hover {
text-decoration: underline;
}

на этот:

#footer .column a:hover {
text-decoration: underline;
color: #498eae;
}

и финальный штрих, этот код:

#powered {
margin-top: 5px;
text-align: right;
clear: both;
}

на этот:

#powered {
margin-top: 5px;
text-align: center;
clear: both;
}

 

2. На главной странице нашего интернет магазина у фотографий товара красивая рамка, а при выборе категории у товаров стандартная серая рамка, будем исправлять, ищем этот код:

.category-info .image {
float: left;
padding: 5px;
margin-right: 15px;
border: 1px solid #E7E7E7;
}

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

.category-info .image {
float: left;
padding: 5px;
margin-right: 15px;
border: 1px solid #1aa7e5;
-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;
}

так-же изменим этот код:

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

на этот:

.product-list .image img {
padding: 3px;
border: 1px solid #1aa7e5;
-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;
}

изменим этот код:

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

на этот:

.product-grid .image img {
padding: 3px;
border: 1px solid #1aa7e5;
-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;
}

 

3. В карточке товара у товаров серая рамка, будем исправлять. Ищем этот код:

.product-info .image {
border: 1px solid #E7E7E7;
float: left;
margin-bottom: 20px;
padding: 10px;
text-align: center;
}

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

.product-info .image {
border: 1px solid #1aa7e5;
-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;
float: left;
margin-bottom: 20px;
padding: 10px;
text-align: center;
}

ниже изменяем этот код:

.product-info .image-additional img {
border: 1px solid #E7E7E7;
}

на этот:

.product-info .image-additional img {
border: 1px solid #1aa7e5;
-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;
}

 

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

2

4

3

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

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

  1. Ёханес

    31.01.2012 at 13:33

    Спасибо Владислав! Очередная полезная статья в копилку! +1 )

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

      31.01.2012 at 21:06

      🙂 Рад что она вам понравилась.

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

    • Поддерживаю! Хороший вопрос!) А корзинку можно было бы направо аккуратненько в уголок сместить! Моё имхо 🙂

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

      01.02.2012 at 20:52

      На мой взгляд в эту полосу не стоит выводить поиск — если у кого-то в магазе много категорий, то шапка покривеет. 🙂
      А так, в выхи напишу как это сделать.

    • Спасибо. По моему мнению, категории в меню вообще не нужны. Рабочая область категорий– это колонка. Причем у всех и всегда присутствует эта колонка. И большинство любит и туда и туда запихнуть категории. На мой взгляд это чуточку глупо) Мне удобней, когда категории находятся либо там, либо там) Поэтому и интересна затея с поиском)

    • Ёханес

      02.02.2012 at 13:49

      Простите, не понял, где напишите? Не знаю, что такое «выха» ))

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

      02.02.2012 at 19:36

      Выхи — выходные дни. 🙂 Я не работаю по пятницам и субботам и в эти дни пишу статьи на блог. 🙂

    • Точно 😀 , что то я совсем от молодежного сленга отстал )))

  3. Да, я например тоже убрал категории с верхнего меню и заменил их на — главная, контакты и тд, т.к. мои категории там не поместятся всё равно, а категории вынес влево, так привычнее и удобнее.

  4. Владислав, спасибо за старания!

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

    02.02.2012 at 19:37

    Всегда пожалуйста 🙂

  6. Подскажите как изменить размер шрифта в выпадающем меню, а то так и не нашел.

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

      06.04.2012 at 12:21

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

    • Этим изменяется шрифт, допустим «Компьютеры», а нужно изменить шрифт подкатегорий «PC» или «Mac», например.

      А так то да, тоже думаю убрать категории из верхнего меню ,т.к. товаров как правило много и все они туда не поместятся. У версии 1,4 правильней это реализовано.

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

      06.04.2012 at 14:32

      #menu > ul > li > div > ul > li > a {
      color: #FFFFFF;
      }

      Добавьте в эту строку размер шрифта.

  7. Спасибо, Владислав 😉

    У меня почему-то сайт корректно отображается только в опере!
    Например, в карточке товара MacBook Air под основным фото товара находятся 3 маленьких. В гуглхром их закругления практически не отображаются, т.е. начинается закругление-разрыв-заканчивается закругление.
    Если добавить в последнем коде padding: 2px; то картинке будет больше и все норм.
    А эксплорере вообще никаких закруглений нигде нет, даже у сайта http://demo15.myopencart.ru/.
    Это у всех так?

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

      06.04.2012 at 15:27

      Да, ie отсталый браузер и новые коды css не умеет правильно отрабатывать — он их просте не видит / игнорирует.

  8. Добрый день! Очень интересует вид футера, попал на вашу тему и возник вопрос. На данном примере рамка футера одна, внутри которой четыри колонки: информация….личный кабинет. Вопрос. Как можно сделать для каждой колонки свою рамку с разным фоновым цветом и добавить пятую колнку в которой будет простой текст с инфой (например контакты)?

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

      18.10.2012 at 21:09

      Нужно изменить footer.tpl и stylesheet.css работы на час-два.

  9. Владислав, подскажите, а как изменить цвет в шапке категории «категории» на черный? он у меня серый….. http://www.wiskehrs.ru/index.php?route=product/category&path=20

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

      16.03.2013 at 21:08

      stylesheet.css — box-heading, в нём смотрите background

  10. Подскажите пожалуйста. Как описание товара сдвинуть вправо? Как у вас на картинке. У меня она на всю страницу под рисунками товара.

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

      19.06.2013 at 18:37

      Модуль категории выведите в карточку товара (админка — модули — категории — добавить и т.д.)

  11. Здравствуйте Владислав! Подскажите пожалуйста, возможно ли сделать раздел там где описание товара, цена и где картинки самого товара на полупрозрачном темном фоне, то бы он был обособлен от основной фоновой картинки, что бы через него было видно фон, а то у меня на сайте надписи не читаемы(((
    Заранее спасибо за ответ! Сайт: brand-velo.ru

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

Your email address will not be published.

*

CAPTCHA image
*

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

Вверх ↑



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