Child theme / multiple CSS / not overwriting

[Laura]

Hi there,

I created a child theme for Cardinal and made a few changes in the style.css and .php files. Everything works perfectly except the fact that I’m trying to modify other css files like sf-woocommerce.css and it doesn’t work!
I tried different solutions. Sorry in advance if they seem dumb.
– I created a sub-folder in my child theme with the same name as in the template, copied the .css file I wanted to modify and then made the changes
– I added a @import url(“../cardinal/css/sf-woocommerce.css”); line in the style.css file and put the changes below
– I put the changes I wanted in the Custom CSS/JS part directly on WordPress

None of them was successful 🙁
The change I’m trying to make is to hide that hover effect on the products (Add to Cart or else). But I want to know how to do it for any changes I’d like to make in the future.

Thanks for your help.

Regards,

Laura

[Kyle – SUPPORT]

Hi

With child themes you only need one css file, even the css that you want to overwrite for other css files like sf-woocommerce.css will still go in the child theme style.css file and it will still work

– Kyle

[Laura]

Thanks Kyle, that helps a little bit 🙂
But how do I do it exactly?? I want to hide that hover effect as I said.
That part:

.product-type-standard figure:hover img {
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-ms-transform: scale(1.1);
-o-transform: scale(1.1);
transform: scale(1.1);
}
.product-type-standard figure:hover > span {
opacity: 0;
}
.product-type-standard .product .cart-overlay {
display: block;
bottom: auto;
left: auto;
width: auto;
top: 0;
right: 0;
}

Does that mean I’m supposed to create something like that in the style.css ?:
@import url(“../cardinal/css/sf-woocommerce.css”);
<!–.product-type-standard figure:hover img {–>
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-ms-transform: scale(1.1);
-o-transform: scale(1.1);
transform: scale(1.1);
}
<!–.product-type-standard figure:hover > span {–>
opacity: 0;
}
<!–.product-type-standard .product .cart-overlay {–>
display: block;
bottom: auto;
left: auto;
width: auto;
top: 0;
right: 0;
}

I tried that and it doesn’t work…

Thanks for your help!

[Laura]

This reply has been marked as private.

[Kyle – SUPPORT]

You would need to add the css and change the properties, please explain what exactly you want to change and I will tell you how to achieve it

– Kyle

[Laura]

Thanks Kyle.
I would need to centre that hover button you see on the screenshots I sent. See how the “View availability” button is hidden in a corner?
🙂

[Kyle – SUPPORT]

And what is your link so I can check?

– Kyle

[Laura]

This reply has been marked as private.

[Kyle – SUPPORT]

I do not get this on my installation therefore I would need to see your link, let us know when it’s online and we will look at it for you

– Kyle