При наведении на товар хотелось бы убрать появление звездочек рейтинга, в избранное, в сравнение.
А оставить, при наведении на всю ширину картинки кнопку "В корзину" и чтобы так же затемнялась фотография.
0
Помогите Изменить Внешний Вид Товара
Автор dmitriy750, 10 янв. 2017 15:15
Сообщений в теме: 6
#1
Отправлено 10 Январь 2017 - 15:15
#2
Отправлено 10 Январь 2017 - 17:20
dmitriy750 (10 Январь 2017 - 15:15) писал:
При наведении на товар хотелось бы убрать появление звездочек рейтинга, в избранное, в сравнение.
А оставить, при наведении на всю ширину картинки кнопку "В корзину" и чтобы так же затемнялась фотография.
А оставить, при наведении на всю ширину картинки кнопку "В корзину" и чтобы так же затемнялась фотография.
Здравствуйте.
В данном случае попробуйте, пожалуйста, произвести следующие изменения:
В шаблоне main.css найдите, пожалуйста, данный код:
.products-grid .item .item-inner .item-img .ratings { position: absolute; opacity: 0; bottom: 50%; left: 40%; }
И замените его вот этим вот кодом:
.products-grid .item .item-inner .item-img .ratings { position: absolute; opacity: 0; bottom: 50%; left: 40%; display: none; }
После чего в том же шаблоне найдите, пожалуйста, следующий код:
.products-grid .item .item-inner .item-img:hover .actions a.add-wishlist { right: 55px; }
И замените его вот этим кодом:
.products-grid .item .item-inner .item-img:hover .actions a.add-wishlist { right: 55px; display: none; }
Далее снова там же найдите, пожалуйста, данный код:
.products-grid .item .item-inner .item-img:hover .actions a.add-compare { right: 0; }
И замените его, пожалуйста, вот этим вот кодом:
.products-grid .item .item-inner .item-img:hover .actions a.add-compare { right: 0; display: none; }
#4
Отправлено 11 Январь 2017 - 09:55
dmitriy750 (10 Январь 2017 - 20:49) писал:
Спасибо, получилось.
Только теперь надо сделать чтобы при наведении кнопка "в корзину" выдвигалась на всю длину фотографии товара.
(скрин прикрепил)
Только теперь надо сделать чтобы при наведении кнопка "в корзину" выдвигалась на всю длину фотографии товара.
(скрин прикрепил)
Здравствуйте.
В таком случае попробуйте, пожалуйста, произвести следующие изменения:
В шаблоне main.css найдите, пожалуйста, данный код:
.products-grid .item .item-inner .item-img .actions a:hover, .products-grid .item .item-inner .item-img .actions a.added { background: #c7081b; color: #fff; }
И замените его вот этим вот кодом:
.products-grid .item .item-inner .item-img .actions a:hover, .products-grid .item .item-inner .item-img .actions a.added { background: #c7081b; color: #fff; width: 100%; }
#6
Отправлено 11 Январь 2017 - 13:08
dmitriy750 (11 Январь 2017 - 10:46) писал:
Сделал как вы написали.
По итогу получилось что, при наведении на картинку товара кнопка так же вылазит на половину, а вот при наведении на кнопку она вылазит до конца.
Скрин прикрепил.
По итогу получилось что, при наведении на картинку товара кнопка так же вылазит на половину, а вот при наведении на кнопку она вылазит до конца.
Скрин прикрепил.
Тогда в шаблоне main.css найдите, пожалуйста, снова данный код:
.products-grid .item .item-inner .item-img .actions .add-cart { padding: 0; width: 160px; left: -160px; }
И замените его вот этим вот кодом:
.products-grid .item .item-inner .item-img .actions .add-cart { padding: 0; width: 100%; left: 100%; }
#7
Отправлено 11 Январь 2017 - 13:16
Благодарю за помощь) Все получилось.
Количество пользователей, читающих эту тему: 0
0 пользователей, 0 гостей, 0 анонимных