Override the default link color in Yahoo! Mail Beta

By Ros Hodgekiss on 13th July 2011

Yahoo! Mail has reverted to using .yshortcuts. Please refer to our earlier blog post.

Not so long ago, we wrote about overriding Yahoo! Mail’s default link colors with your own, using the now-famous .yshortcuts CSS hack. However, with the rollout of Yahoo! Mail Beta, we’ve woken to the fact that this no longer works - alas, our links have turned that ugly default blue color again.

Thankfully, there’s a simple, albeit slightly finicky workaround. In the <head> section of your HTML email code, simply append your a style declarations with !important like so:

<style type="text/css">
   a { color: #00FF00 !important; }
   /* or alternately */
   a:link { color: red !important; }
   a:visited { color: blue !important; }
   a:hover { color: green !important; }

As Yahoo! Mail Beta doesn’t truncate styles that feature in the <head> of HTML emails, this is a safe workaround.

Despite the change being an annoyance for email designers everywhere, the fix is far more concise than what the .yshortcuts hack required. Before this gets filed away as a time-wasting tweak, note that Yahoo! Mail accounts for almost 10% of email client market share - perhaps even more if you’re sending email newsletters to consumer lists. So don’t forget, it’s important to add !important to maintain the look and feel of your email designs!


  • Brian S
    14th July

    I’m finding that adding a style=“color: rgb(101, 150, 190);” on an <a> tag is holding up in Yahoo in FF3 and IE9. That will overwrite the link color Yahoo imposes in the mod-whatsnew_2317.css file.

    We are finding we no longer have to roll span tags inside <a> tags. And best of all, the “autolinking” feature of the old Yahoo is gone. A huge time saver.

  • Stephen
    14th July

    Like Brian, I have always used inline styles on the <a> tag to style up colours, but found problems in Yahoo! Mail (hence the need for the .yshortcuts hack).

    Does this then mean, than my original way of styling it up on the <a> now works again? If so - it means I can cut out 6 lines of my ‘email boilerplate’ amended template.

  • Eric
    23rd August

    The problem I’ve been seeing is that Yahoo randomly seems to remove some of my inline styles. I’ve tried to google the problem but haven’t found anything. Has anyone else encountered this?

  • Ros Hodgekiss
    23rd August

    @Eric - could you kindly post an example on our forums? We’d be keen to look into why this is happening, so any details would be appreciated.

Sign up for free.
Then send campaigns for as little as $9/month

Create an account