Override the default link color in Yahoo! Mail Beta

By Ros Hodgekiss

July 14, 2011

4 Comments

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; }
...
</style>

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!

Posted in:

4 Comments

  1. Brian S
    July 14, 2011 3:28pm

    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.

  2. Stephen
    July 14, 2011 5:07pm

    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.

  3. Eric
    August 24, 2011 12:23am

    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?

  4. Ros Hodgekiss
    August 24, 2011 12:31am

    Campaign Monitor team member

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

Comments for this entry are closed.

Browse the Blog

  1. Behind the Scenes (31)
  2. Interviews & Buzz (133)
  3. New Features & Updates (234)
  4. Observations & Answers (221)
  5. Tips & Resources (491)

Explore the Email Gallery

Beautiful! “@cameronmoll: Email successfully @CampaignMonitor‘d:” http://t.co/KbrfnS1a ^RH

Follow us on Twitter