Quark Store - Shop Page Hover Effect Off

Hi.

How can I turn hover effect off on the shop page?

I would like to display the picture, color variations, the price and then the button. What file do I need to change.

Link: http://lishinu.bordomat.com/?post_type=product

Thank you.

M

I would like this also off in related products section.

M

Hi,

Try to add the following custom css code:

Code: Select all

.archive.woocommerce ul.products li.product:hover > a > img,
.related ul.products li.product:hover > a > img,
.upsells.products ul.products li.product:hover > a > img,
.woocommerce > ul.products li.product:hover > a > img  {
      opacity: 1;
      -webkit-transform: scale(1) !important;
      -moz-transform: scale(1) !important;
      -ms-transform: scale(1) !important;
      -o-transform: scale(1) !important;
      transform: scale(1) !important;
}
ul.products li.product:hover h3,
ul.products li.product:hover .price {
      top: 0;
}
.archive.woocommerce ul.products li.product:hover .add_to_cart_button,
.related ul.products li.product:hover > .add_to_cart_button,
.upsells.products ul.products li.product:hover > .add_to_cart_button,
.woocommerce > ul.products li.product:hover > .add_to_cart_button   {
      bottom: 5px;
}


Hi.

Thank you.

How come override.css does not override additional.css file? Even when using !important declaration.

Is it save to change and add to all three css files: override.css, additional.css and overrides.css? Or should I have only css code added to override.css file? I do a lot of customization to this template.

Herei is the link: http://www.lishinu.bordomat.com.

M

Hi,

If you are using a child theme, please copy the override.css file into your Child-Theme/css directory and should be fine. If you add customization to your overrides or additional.css files, you can also add mentioned code at the end of additional.css file.

Hi Piotr.
I don't think I understood the last part.

... you can also add mentioned code at the end of additional.css file.

Did you just mean that it is ok to add code to this two css files? They won't get changed with an update, or will they?
There are also css files for mobile, small desktop, small tablet and tablet. How save is it to make changes in those files?

Thank you.
M

You are using quark child theme with ecommerce style, right? If you didn't edit additional.css file before, will be better to use override.css file or custom css plugin.

It's a child theme of the basic quark theme and most updated files will be added to parent theme, but sometimes the child files may be changed also, so it will be more safe to use override.css of custom css plugin.

Ok, I understand, but what about mobile, small desktop, and other css files for responsiveness? I've been changing them to make them fit my design. That was the easiest thing to do. Should I just use media queries in override.css? Is there a blog post or documentation on the topic of how to use media queries specifically for Gavick Templates?

Thank you.

Matej

override.css file is also loaded in your mobile, tablet devices, so this code should work properly.

Yes, there's no need to edit mobile.css or tablet.css files, you can use media queries in your override.css file, there's no special requirements for our themes, use default media queries.

Hi,

I'm trying to customize hover effect on archive page. But it seems the code does not work, unless is put into a additional.css file placed in Quark/css/ecommerce folder. I use a child theme of Quark template and would like the code to be place in either style.css or in additional.css placed in Quark-child/css/ecommerce folder.

URL: http://lishinu.bordomat.com/?post_type=product

Code:

Code: Select all

.archive.woocommerce ul.products li.product > a > img,
.related ul.products li.product > a > img,
.upsells.products ul.products li.product > a > img,
.woocommerce > ul.products li.product > a > img  {
  opacity: 1;
  margin-bottom: 25px;
  -webkit-transform: scale(.9) !important;
  -moz-transform: scale(.9) !important;
  -ms-transform: scale(.9) !important;
  -o-transform: scale(.9) !important;
  transform: scale(.9) !important;
  -webkit-transition: all .3s ease-out;
  -moz-transition: all .3s ease-out;
  -ms-transition: all .3s ease-out;
  -o-transition: all .3s ease-out;
  transition: all .3s ease-out;
}
.archive.woocommerce ul.products li.product:hover > a > img,
.related ul.products li.product:hover > a > img,
.upsells.products ul.products li.product:hover > a > img,
.woocommerce > ul.products li.product:hover > a > img  {
  opacity: 1;
  -webkit-transform: scale(1) !important;
  -moz-transform: scale(1) !important;
  -ms-transform: scale(1) !important;
  -o-transform: scale(1) !important;
  transform: scale(1) !important;
}

Thank you.
M

Could you send me a PM with FTP access to your website? I need to check the files. I can't see additional.css file in your child theme.