- This topic has 5 replies, 2 voices, and was last updated 4 years, 1 month ago by
.
-
Posts
-
This topic has been discussed before. With GP premium activated I still need
!importantin my child CSS to style the button, which I usually try to avoid. Actually, in 1300 lines of CSS this is the only rule where I have to use it. I’m sure, you have a very good reason for it. Is there still no better solution?Thank you!
Mike
Customer Support
Hi there,
some of it cannot be avoided as Woocommerce declared certain properties as
!importantin their CSS. For example the product-remove link:.woocommerce a.remove { display: block; font-size: 1.5em; height: 1em; width: 1em; text-align: center; line-height: 1; border-radius: 100%; color: red!important; text-decoration: none; font-weight: 700; border: 0; }So in GP we did this:
.woocommerce a.remove { color: inherit!important; .... }Which means for the default color state you should only need this:
.woocommerce table.shop_table td.product-remove { color: #f00; }Hover state would require
!importanthowever.But overall its not an issue if you add
!importantto your CSS, as i would expect no one else will be adding more CSS on top of your CSS. Its just annoying when plugins or themes add use it in their code.Hi David,
you’re right, Woocommerce uses
!importantfor the color, which is completely unnecessary, as far as I can see. However, GP usesborder: 1px solid!important;, while Woocommerce usesborder: 0;. At least this!importantcould be avoided, couldn’t it?Sorry for being so petty about this and wasting your time. I just try to keep my CSS as clean as I can. 🙂
The border !important was added due to a weird bug on some legacy browsers where without it, the border would be clipped. We’ll check if thats still an issue before removing it.
Excellent, thank you!
You’re welcome
- You must be logged in to reply to this topic.
