Moushe.ru

Блог обо всём

OcStore 1.5.4.1.2 несколько улучшений (3 часть)



Продолжим работы над нашим стандартным шаблоном OcStore 1.5.4.1.2

OcStore leesons 3

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

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

2. Изменим стили картинок в карточке товара (при наведении курсором мыши они будут изменять цвет рамки)

3. Удалим лишние и объединим похожие стили

4. Изменим модуль личного кабинета

5. Удалим слова Язык и Валюта в одноимённых модулях

P.S. В 1-3 шагах урока мы работаем только со stylesheet.css

Приступим:

1. Откроем файл ../catalog/view/theme/default/stylesheet/stylesheet.css и после этих строк (713-716):

.box-category > ul > li > a {
text-decoration: none;
color: #333;
}

вставим эти:

.box-category > ul > li > a:hover {
color: #0099cc;
}

2. После этих строк (1006-1008):

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

вставим эти:

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

3. Удалим эти строки:

158-160:

#header #cart .heading a {
text-decoration: none;
}

169-171:

-webkit-border-radius: 7px 7px 7px 7px;
-moz-border-radius: 7px 7px 7px 7px;
-khtml-border-radius: 7px 7px 7px 7px;

255-257:

-webkit-border-radius: 3px 3px 3px 3px;
-moz-border-radius: 3px 3px 3px 3px;
-khtml-border-radius: 3px 3px 3px 3px;

290-292:

-webkit-border-radius: 5px 5px 5px 5px;
-moz-border-radius: 5px 5px 5px 5px;
-khtml-border-radius: 5px 5px 5px 5px;

304-305:

#menu > ul > li:hover {
}

320-322:

-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-khtml-border-radius: 5px;

329-331:

-webkit-border-radius: 0px 0px 5px 5px;
-moz-border-radius: 0px 0px 5px 5px;
-khtml-border-radius: 0px 0px 5px 5px;

363-365:

-webkit-border-radius: 5px 5px 5px 5px;
-moz-border-radius: 5px 5px 5px 5px;
-khtml-border-radius: 5px 5px 5px 5px;

368-371:

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

372-375:

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

376-379:

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

511-513:

-webkit-border-radius: 7px 7px 7px 7px;
-moz-border-radius: 7px 7px 7px 7px;
-khtml-border-radius: 7px 7px 7px 7px;

586-588:

-webkit-border-radius: 7px 7px 0px 0px;
-moz-border-radius: 7px 7px 0px 0px;
-khtml-border-radius: 7px 7px 0px 0px;

598-600:

-webkit-border-radius: 0px 0px 7px 7px;
-moz-border-radius: 0px 0px 7px 7px;
-khtml-border-radius: 0px 0px 7px 7px;

вместо этих строк (848-861):

.product-list .wishlist a {
color: #333333;
text-decoration: none;
padding-left: 18px;
display: block;
background: url('../image/add.png') left center no-repeat;
}
.product-list .compare a {
color: #333333;
text-decoration: none;
padding-left: 18px;
display: block;
background: url('../image/add.png') left 60% no-repeat;
}

вставим эти:

.product-list .wishlist a, .product-list .compare a {
padding-left: 2px;
display: block;
}

вместо этих строк (913-926):

.product-grid .wishlist a {
color: #333333;
text-decoration: none;
padding-left: 18px;
display: block;
background: url('../image/add.png') left center no-repeat;
}
.product-grid .compare a {
color: #333333;
text-decoration: none;
padding-left: 18px;
display: block;
background: url('../image/add.png') left center no-repeat;
}

вставим эти:

.product-grid .wishlist a, .product-grid .compare a {
padding-left: 2px;
display: block;
}

4. Откроем файл ../catalog/view/theme/default/template/module/account.tpl и после этих строк (2-3):

<div class="box-heading"><?php echo $heading_title; ?></div>
<div class="box-content">

вставим эту:

<div class="box-category">

а после этих строк (24-25):

</ul>
</div>

вставим эту:

</div>

5. Откроем файл ../catalog/view/theme/default/template/module/currency.tpl и удалим из 3 строки:

<?php echo $text_currency; ?><br />

5.1. Откроем файл ../catalog/view/theme/default/template/module/language.tpl и удалим из 3 строки:

<?php echo $text_language; ?><br />

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

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

  1. Добрый день, подскажите как можно сделать кнопку «купить» текстовой? как в розетке.

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

      14.08.2013 at 15:34

      Кнопка купить и так сделана ссылкой, удалите стили кнопок и у вас будет обычная текстовая ссылка без фона.

  2. Здравствуйте! Начинаю работу с Opencart, много вопросов, но вроде разбираюсь. Наткнулся на ваш сайт — информация очень пригодилась. Но у меня такой вопрос: в карточке товара после фото идёт описание, затем цена, а потом снова описание. Как мне убрать первое описание, а второе оставить? Пример, как это выглядит, здесь: http://maslomkartiny.ru/index.php?route=product/product&path=59&product_id=65
    Заранее благодарен!

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

      28.08.2013 at 12:48

      До цены:
      Производитель:
      Модель:
      Артикул:
      Наличие:

      Под ценой:
      Описание/ Характеристики/ Отзывы

      Вопрос не понятен. Если нужно выдрать описание из табов то просто правьте product.tpl (230 строка и ниже)

  3. Спасибо, я просто всё исправил, не дождавшись ответа. А вы не подскажете, как сделать так, чтобы при нажатии на фото товара оно увеличивалось в размерах?

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

      28.08.2013 at 16:38

      Очень много файлов в кмс придётся перелопатить, проще создать для товаров div:hover и при наведении на товар у него будет появляться рамка, которая будет перекрывать соседние товары, дайте ссылку на магазин и я напишу стили.

  4. http://maslomkartiny.ru/
    А изображение увеличиваться будет?

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

      28.08.2013 at 18:33

      Вроде бы понятно написано — Очень много файлов в кмс придётся перелопатить, проще создать для товаров div:hover и при наведении на товар у него будет появляться рамка, в общем если всё таки не понятно — Нет не будет.
      Добавьте этот код в stylesheet.css:

      .product-grid > div:hover {
      border: 1px solid #fc6454;
      border-radius: 7px;
      -webkit-box-shadow: 2px 2px #fc6454;
      -moz-box-shadow: 2px 2px #fc6454;
      box-shadow: 0px 0px 2px 2px #fc6454;
      }

      и на этой странице http://maslomkartiny.ru/kartiny/ переключитесь на вид сетка.

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

Your email address will not be published.

*

CAPTCHA image
*

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

Вверх ↑



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