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 */
</style>

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.

  • Stefan Velthuys

    Couldn’t you just add “border-bottom: none !important;” to remove the blue, dotted line?

    .yshortcuts &#123 color: #CCCCCC; border-bottom: none !important; &#125

    I did some quick tests and it seems to work.

  • Stefan Velthuys

    Couldn’t you just add “border-bottom: none !important;” to remove the blue, dotted line?

    .yshortcuts &#123 color: #CCCCCC; border-bottom: none !important; &#125

    I did some quick tests and it seems to work.

  • Kennedy

    @Velthuys That was my first thought. The only negative to that is some people might want the underline on some links. I wonder if Yahoo! is doing this with JavaScript and if so what is the class they giving the links. If this is the case we could target it the same way Brian Thies targeted the color.

  • Kennedy

    @Velthuys That was my first thought. The only negative to that is some people might want the underline on some links. I wonder if Yahoo! is doing this with JavaScript and if so what is the class they giving the links. If this is the case we could target it the same way Brian Thies targeted the color.

  • Travis Fulton

    Don’t for get the semicolons on those colors!

    .yshortcuts &#123 color: #CCCCCC &#125

    to

    .yshortcuts &#123 color: #CCCCCC; &#125

  • Travis Fulton

    Don’t for get the semicolons on those colors!

    .yshortcuts &#123 color: #CCCCCC &#125

    to

    .yshortcuts &#123 color: #CCCCCC; &#125

  • SamCloud

    Big help, many thanks Ros.

    It was slightly different when I looked at my Yahoo!, I had to use “a span.yshortcuts” instead of “.yshortcuts a span”. I also used CSS to turn off the underlined elements.

    span.yshortcuts &#123 color: #000000 !important; border-bottom: none !important; &#125 /*Body text color*/
    a span.yshortcuts &#123 color: #D2265A !important; &#125 /*Link text color*/

  • SamCloud

    Big help, many thanks Ros.

    It was slightly different when I looked at my Yahoo!, I had to use “a span.yshortcuts” instead of “.yshortcuts a span”. I also used CSS to turn off the underlined elements.

    span.yshortcuts &#123 color: #000000 !important; border-bottom: none !important; &#125 /*Body text color*/
    a span.yshortcuts &#123 color: #D2265A !important; &#125 /*Link text color*/

Want to improve your email marketing? Subscribe to get tips on improving your email marketing delivered to your inbox.
X

Join 200,000 companies around the world that use Campaign Monitor to run email marketing campaigns that deliver results for their business.

Get started for free