Hey,
What css are you using? And where are you adding it?
Hannah
Hi @hannahritner
I’m using the following in the ‘Custom Styles’ area of the email customizer:
.button {
padding: 12px 40px;
background-color:#f78a1d;
text-decoration:none !important;
color:#fff !important;
text-align:center;
text-transform:uppercase;
font-weight:bold !important;
border-radius:3px;
}
.button:hover, a.button:focus {
background-color: #afcd5d !important;
}
Thanks
Sorry, one more question – how are you adding the button to your email template?
Hannah
The text areas take HTML so just
<a href="" class="button">Link Text</a>
Hey,
Hover is not supported in many email clients.
https://www.campaignmonitor.com/css/selectors/hover/
Ben
Hi @britner
That’s not quite the same as not supported at all, from that list it looks like half. Is there a reason why the :hover rule is stripped from the custom CSS?
Thanks
-
This reply was modified 7 years, 1 month ago by
Richard B.
Yours is being stripped? Like when you go back in it’s not there?
Ben
It’s completely missing, it’s very odd
Ok, want to make sure we are talking about the same thing, when you go to woocommerce > email customizer and add css into the css box, click save. Then leave and come back your css is gone?
Ben
Ah no sorry that is not whats happening, my CSS remains in the email customizer, however in the email that is sent out there is no CSS in the raw source. The customizers CSS is converted to inline CSS with no hover rules showing anywhere.
Yes that is what woocommerce does for best compatibility with email clients it uses https://www.myintervals.com/emogrifier.php but for hover css it still adds it to the email in a style tag for the clients that support it. What email client are you trying to view in?
Ben
Thanks for the info, that’s really handy.
Ok interestingly enough i’m viewing in Gmail – webmail
Rich
Reading through the documentation it looks like :hover is not supported and probably never will be.
Is there a hook I can use to add a <style></style> of my own to the head of the email?
Rich
Hmm interesting, I tested your css through a demo site and it works for me, the hover css gets pulled into the head.
I don’t believe there is a hook that would let you add style tags into the head tag. I think you would have to override templates.
Ben
Ok solved! I was on version 1.1.5, i’ve updated to the latest and it is working as you experienced in your tests.
Thanks for the support!
