Browse by...
Home Resources Blog

Its been pointed out recently that links in HTML emails have started showing up blue within Yahoo! Mail. This has been documented across a number of blogs and on our forums, alongside solutions to this rendering glitch. Lets go through why this is happening, then two approaches to restoring your links to the color you originally intended.

How is Yahoo! Mail changing my link colors?

As pointed out by email genius and cool customer, Brian Thies, Yahoo! Mail is now applying a class called .yshortcuts and surrounding links within HTML emails with <span> tags. The .yshortcuts class makes all impacted links a blue color (#366388, to be exact), which of course, is bad news for your design.

Yahoo! Mail blue links

Thankfully, there are two solid solutions which you can use to override Yahoo! Mail’s choice of link color. Here’s the skinny on both.

Brian’s solution: If you can’t beat ’em, style ’em

Given that Yahoo! Mail is automatically adding a .yshortcuts class and <span> tags, Brian Thies’ solution is to simply override Yahoo’s ambitions with your own styles. In the <head> section of your code, add the following:

<style type="text/css">
div { color: #CCCCCC }
a { color: #00FF00 }
.yshortcuts { color: #CCCCCC } /* Body text color */
.yshortcuts a span { color: #00FF00 } /* Link text color */

Where the colors defined are appropriate to your design. In your body, wrap your body copy and links in a <div> tag or similar, with the class .yshortcuts like so:

<div class="yshortcuts">If you wish HTML wasn't so darn quirky, <a href="...">click here</a></div>

This will override any link color styles that Yahoo! Mail applies.

Smith Harmon’s solution: Roll your own span tags

The second solution posed by Smith Harmon is to surround every link with a <span> tag with inline styles, like so:

<a href="..." style="color:#808080; text-decoration:none;"><span style="color:#808080;">Link</span></a>

This also does the trick just fine, however it does result in a bit of repetitive coding.

Why should I tweak my campaigns, anyway?

If you hike on over to your email client usage reports in your account, there’s a good chance that you might find some good reasons to make your email campaigns display as desired in Yahoo! Mail. As of our most recent stats, Yahoo! Mail accounted for over 14% of email client market share, however this percentage may be more or less, depending on who is on your lists.

You might also want to consider running your newsletters through our design and spam tests to see how they display in Yahoo! Mail.

And what’s with those blue, dotted links? Can I remove them?

Yahoo! Mail also has a knack for picking keywords in emails and linking them to advertising popups (look for the blue, dotted links). Unfortunately, there’s no known way to disable this behavior, despite it being potentially distracting or confusing to your subscribers.

Many thanks to Brian for having all the correct answers, as always. Whether you’ve got 5 or 5,000 Yahoo! Mail subscribers on your list, this is ultimately yet another quirk to add to your HTML email testing checklist.

This blog provides general information and discussion about email marketing and related subjects. The content provided in this blog ("Content”), should not be construed as and is not intended to constitute financial, legal or tax advice. You should seek the advice of professionals prior to acting upon any information contained in the Content. All Content is provided strictly “as is” and we make no warranty or representation of any kind regarding the Content.
Straight to your inbox

Get the best email and digital marketing content delivered.

Join 250,000 in-the-know marketers and get the latest marketing tips, tactics, and news right in your inbox.


Get started with Campaign Monitor today.

With our powerful yet easy-to-use tools, it's never been easier to make an impact with email marketing.

Try it for free