Moushe.ru

Блог обо всём

OpenCart 1.5.1 несколько улучшений



Сегодня мы немного улучшим витрину нашего магазина.

До:                                                       После:

12

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

1. Переделаем ссылки:

  • Уберём подчёркивание у неактивной ссылки
  • Изменим цвет и добавим подчёркивание ссылке при наведении на неё курсором мыши

2. Изменим надпись рекомендуем на рекомендуемые товары

3. Отцентрируем заголовки модулей

4. Центрируем название, цену и кнопку купить под фотографией товара на главной странице

5. Изменим маркированные списки в футере

 

Приступим к работе:

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

a, a:visited, a b {
color: #38B0E3;
text-decoration: underline;
cursor: pointer;
}
a:hover {
text-decoration: none;
}

на это:

a, a:visited, a b {
color: #38B0E3;
text-decoration: none;
cursor: pointer;
}
a:hover {
text-decoration: underline;
color: #636e75;
}

 

2. Откроем файл featured.php (../catalog/language/russian/module) и меняем слово Рекомендуем на Рекомендуемые товары (или на любой свой вариант).

3. Откроем stylesheet.css и изменим это:

.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;
font-weight: bold;
line-height: 14px;
color: #333;
}

на это:

.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;
font-weight: bold;
line-height: 14px;
color: #333;
text-align: center;
}

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

4. Ищем в stylesheet.css этот код:

.box-product .image {
display: block;
margin-bottom: 0px;
}
.box-product .image img {
padding: 3px;
border: 1px solid #E7E7E7;
}
.box-product .name a {
color: #38B0E3;
font-weight: bold;
text-decoration: none;
display: block;
margin-bottom: 4px;
}
.box-product .price {
display: block;
font-weight: bold;
color: #333333;
margin-bottom: 4px;
}
.box-product .price-old {
color: #F00;
text-decoration: line-through;
}
.box-product .price-new {
font-weight: bold;
}
.box-product .rating {
display: block;
margin-bottom: 4px;
}

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

.box-product .image {
display: block;
margin-bottom: 0px;
text-align: center;
}
.box-product .image img {
padding: 3px;
border: 1px solid #E7E7E7;
}
.box-product .name a {
color: #38B0E3;
font-weight: bold;
text-decoration: none;
display: block;
margin-bottom: 4px;
text-align: center;
}
.box-product .price {
display: block;
font-weight: bold;
color: #333333;
margin-bottom: 4px;
text-align: center;
}
.box-product .price-old {
color: #F00;
text-decoration: line-through;
}
.box-product .price-new {
font-weight: bold;
}
.box-product .rating {
display: block;
margin-bottom: 4px;
}
.box-product .cart {
text-align: center;
}

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

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

#footer .column ul li {
margin-bottom: 3px;
}

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

#footer .column ul li {
margin-bottom: 3px;
color: #38b0e3;
}

(этим мы перекрасили кружочки списков)

изменим это:

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

на это:

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

(теперь при выделении ссылки в маркированных списках она не только подчёркивается но и меняет свой цвет)

Результат наших трудов:

2

На сегодня всё, до новых встреч. Следите за нашими новостями.

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

  1. Доброго времени суток, Владислав!

    Столкнулся с одной проблемой. Каталог товаров перенес из верхнего меню в левое. В результате чего большой баннер (там, где у стандартного шаблона Samsung Galaxy Tab) съехал вправо. Баннер я переделал (саму картинку) до размера 700х280 и загрузил через админку. Но при нажатии видно, что само поле баннера осталось старое — 980х280, а справа внизу, за пределами сайта висит этот маленький кружочек переключения между слайдами баннера.
    Не могу найти файл, в котором можно поменять 980 на 700, чтобы все встало на свое место.
    Подскажите, пожалуйста 😥

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

      24.03.2012 at 00:42

      В админке — дополнения — модули — слайдшоу — размеры.

  2. Логично было бы тут же выровнять картинки, подписи к ним и кнопку купить в списке товаров в категориях (сетка).
    Раздел stylesheet. css :
    .product-grid .image

  3. Здравствуйте!
    Спасибо вам за ваши уроки и ответы на вопросы!
    Но вот искала по списку тем что-то похожее на — Изменение статуса товара Нет на складе — под себя… т.е. в админке Статус «Нет на складе» стоит на выбор: Нет в наличии, Ожидание 2-3 дня, Предзаказ …. как и где изменить Предзаказ — на «Под заказ»… смотрела setting в админке language… кроме как
    $_[‘entry_stock_status’] = ‘Статус «Нет на складе»:Статус «Нет на складе» по умолчанию при редактировании товара.’; ничего больше не нахожу…
    Нужна ваша помощь! )) может, вы где и писали об этом, но не нашла (((

    • mysite.com/admin/index.php?route=localisation/stock_status
      или в админке
      System ->Localisation -> Stock Status

  4. Спасибо!
    нашла в админке )))

  5. 4. Центрируем название, цену и кнопку купить под фотографией товара на главной странице

    Может лучше добавить в блок:

    .box-product {
    width: 100%;
    overflow: auto;
    text-align: center; /* добавить */
    }

    Тогда и блоки внутри будут отцентрированы. Как здесь — http://little-toys.ru/

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

      02.08.2012 at 21:01

      Да, так лучше. 🙂

  6. Антон

    02.09.2012 at 23:24

    Здравствуйте.
    Простите за глупый (наверное) вопрос: а где находится раздел stylesheet.css? (((

    Спасибо за терпимость))

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

      03.09.2012 at 00:18

      ..catalogviewthemedefaultstylesheet

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

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

      17.12.2012 at 22:26

      Забавно, всё должно нормально отображаться. С таким глюком не сталкивался ни разу.

  8. или вообще из-за чего могло такое произойти? что нарушено?

  9. Здравствуйте, не могли бы вы сделать урок в скором будущем, по упрощению регистрации и заказа товара? Очень была бы вам признательна. 🙁

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

      27.12.2012 at 21:30

      Может быть и будет.

  10. Евгений

    22.06.2014 at 18:56

    Здравствуйте
    вопрос по модулю Рекомендуемые
    цена и название товаров отцентровались относительно картинок это радует, а как теперь отцентровать сами картинки относительно самого модуля ? ато справа зазор большой

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

      22.06.2014 at 22:25

      Для .box задайте центрирование — а для цены и кнопок удалите — и у вас все элементы будут отцентрированы.

  11. Спасибо, всё получилось исправить Рекомендуемые.

  12. Здравствуйте Владислав, на версии 1.5.6,4 все сделал как написано, но ничего не отцентровалось, не знаете в чем причина?

  13. Сам магазин только в стадии запуска, пытаюсь настроить внешний вид по вашим статьям

  14. Я еще не знаю как это делать
    http://e-smoke.in.ua/index.php?route=product/category&path=20
    вот в категории товары

  15. Прошу прощения, все работает, а где статья как центровать в категориях?

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

Your email address will not be published.

*

CAPTCHA image
*

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

Вверх ↑



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