Struggling to get [email] placeholder to respect colour change

Hey guys,

This has gotta be something obvious that I'm missing, but I'm really struggling to get the link added by the [email]placeholder to respect my CSS in outlook and gmail, which is displaying the default blue. I've got a css a deceleration in the head section that looks like this:

.footer a {color: #00AAFF !important; text-decoration: underline;}

and the actual html looks like this:

<p style="font-size: 10.5px; color:#777; margin: 0; padding: 0; font-family: Helvetica, Arial, sans-serif;">You are receiving this email because the email address <span style="color:#00AAFF !important;">[email]</span> is subscribed to our email list. If you would no longer like to receive emails from us, you can <unsubscribe style="color: #00AAFF; text-decoration:underline;">unsubscribe from this list</unsubscribe>.</p>

What am I missing here? I added the span in an effort to colour the link, but it didn't overpower the default blue.

[edit to add] That p tag has a parent element which is a table that has a class of "footer", so it should be applying, just to be clear.

Diana Diana, 6 years ago


Gmail requires inline styles, and since they're the ones linking that email address rather than something before arriving at Gmail, they're not going to move your a tag inline for you. Your safest option there is just link the email address yourself and then you can control the link style. So <a href="mailto:[email]" style="color: #00AAFF !important; text-decoration: underline;">[email]</a> .

Hope that helps!

D. Potter
Campaign Monitor
bjbk, 6 years ago

Ah beautiful!

Thanks Diana - that's just what I was looking for!

See why 200,000 companies worldwide love Campaign Monitor.

From Australia to Zimbabwe, and everywhere in between, companies count on Campaign Monitor for email campaigns that boost the bottom line.

Get started for free