Shake the blues by overriding Yahoo! Mail’s default link color

By Ros Hodgekiss

August 11, 2010

4 Comments

This fix no longer works in Yahoo! Mail Beta. For a new fix, see our updated blog post.

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.

Posted in:

4 Comments

  1. Stefan Velthuys
    August 11, 2010 8:19pm

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

    .yshortcuts { color: #CCCCCC; border-bottom: none !important; }

    I did some quick tests and it seems to work.

  2. Kennedy
    August 18, 2010 8:22am

    @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.

  3. Travis Fulton
    October 2, 2010 4:21am

    Don’t for get the semicolons on those colors!

    .yshortcuts { color: #CCCCCC }

    to

    .yshortcuts { color: #CCCCCC; }

  4. SamCloud
    October 6, 2010 4:39am

    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 { color: #000000 !important; border-bottom: none !important; } /*Body text color*/
    a span.yshortcuts { color: #D2265A !important; } /*Link text color*/

Comments for this entry are closed.

Browse the Blog

  1. Behind the Scenes (28)
  2. Interviews & Buzz (132)
  3. New Features & Updates (229)
  4. Observations & Answers (210)
  5. Release Notes (1)
  6. Tips & Resources (477)

Explore the Email Gallery

@HunterOwens And sorry again! This one has been frustrating for everyone, but obviously for affected customers the most!

Follow us on Twitter