Digital experiences for all disciplines
New Landing › How can we help? › Themeforest Theme Support › Dante › .product-cat-info background color
New Landing › How can we help? › Themeforest Theme Support › Dante › .product-cat-info background color
- This topic has 9 replies, 2 voices, and was last updated 10 years by Kyle – SUPPORT.
-
Posted in: Dante
-
May 14, 2014 at 5:36 pm #75072
Hi,
I am adding this line to my style.css of the child theme
.woocommerce ul.products li.product-category .product-cat-info {
background: none repeat scroll 0 0 #FFFFFF;
}in order to replace
.woocommerce ul.products li.product-category .product-cat-info {
background: none repeat scroll 0 0 #E4E4E4;
}so I want to change the background color (white istead of grey) but this is now working.. still have color #E4E4E4 at the background of .product-cat-info
where do I have to change this reference?
thank you.
May 15, 2014 at 8:44 am #75176Hi
Sorry which theme?
– Kyle
May 15, 2014 at 9:33 am #75210Hi Kyle… Dante
May 15, 2014 at 9:48 am #75217It uses the section divide color for the background color, I’m guessing you wont want to change the section divide color so instead you can add this custom css:
.woocommerce ul.products li.product-category .product-cat-info:before { border-bottom-color: #FFFFFF; }
– Kyle
May 18, 2014 at 9:42 pm #75728Hi Kyle,
Thanks but this doesn’t do what I need,Actually, what I want is to see categories like products. Just the picture and the text below with no decoration at all.
PS
Can this thread be moved to Themes Support -> Dante? (it was my mistake)May 19, 2014 at 8:43 am #75780Hi
Unfortunately it’s not possible to change the layout and decoration of the categories to look like products without modifying a lot of css, and it’s not within the scope of our support to be able to provide that functionality as it is more work than a small customisation. While we’d love to be able to support every customisation request, we simply don’t have the time. We recommend that you seek a freelance developer if you need that functionality, potentially from one of the below resources:
Hope that helps.
– Kyle
May 19, 2014 at 9:08 am #75791This reply has been marked as private.May 19, 2014 at 9:17 am #75798Ok great, this should do the trick:
.woocommerce ul.products li.product-category .product-cat-info { background: none; }
– Kyle
May 19, 2014 at 11:32 am #75871Thanks Kyle.
Finally it worked and get rid of the grey background, but I needed to add it to the Custom CSS/JS section. Don’t know why.Just adding your code to my style.css on my child theme wasn’t enough..
(I already had this on my style.css in the child theme).woocommerce ul.products li.product a img, .woocommerce-page ul.products li.product a img {
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.3);
display: block;
height: auto;
margin: 0 0 8px;
transition: all 0.2s ease-in-out 0s;
width: 100%;
}
.woocommerce ul.products li.product-category .product-cat-info {
background: none repeat scroll 0 0 #FFFFFF;
bottom: -35px;
padding: 10px;
position: absolute;
text-align: left;
}
.woocommerce ul.products li.product a:hover img, .woocommerce-page ul.products li.product a:hover img {
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.4);
}
.woocommerce ul.products li.product-category .product-cat-info .count {
display: none;
}
.woocommerce ul.products li.product-category .product-cat-info:before {
display:none;
border-bottom-color: #FFFFFF;
}Thank you very much for your help!
May 19, 2014 at 11:47 am #75883It’s because you already have this:
.woocommerce ul.products li.product-category .product-cat-info { background: none repeat scroll 0 0 #FFFFFF; bottom: -35px; padding: 10px; position: absolute; text-align: left; }
Glad it’s working now
– Kyle
-
Posted in: Dante
You must be logged in and have valid license to reply to this topic.