What's happening
In some cases Yahoo! Mail is turning links blue by default
The solution
The workaround is to overwrite the Yahoo style by declaring it with an embedded style within the section like this:
Here is an example of the pesky blue links:
Here this is fixed:
Here is an example of how to fix this:
Original:
< a href=" http://%%track%%/dyn598" style="padding:0 8px 0 16px; color:#FFFFFF;" title="Mirrors" target="_blank" >Mirrors< /a >
Updated with Changes:
< a href="http://%%track%%/dyn598" style="padding:0 8px 0 16px; color:#FFFFFF;" title="Mirrors" target="_blank" >< span style="color:#FFFFFF" >Mirrors< /span >< /a >Mirrors
This example will set all links as black:
< style type="text/css" >
.yshortcuts { color:#000000; }< /style >
If you need to change more than one link color you will need to create classes.
In this example there is a class created for the links in the header and for the links in the footer.
.header .yshortcuts { color:#666666; }
.footer .yshortcuts { color:#FFFFFF; }
The class name would need to be added to the table tag or tag that contains the links.
Here is an example of the header class added to the table tag.
< table width="619" border="0" cellpadding="0" cellspacing="0" class="header" >
If there is text that is being highlighted as a popular search term by Yahoo! you can place an < a > tag around it to stop the underlining and blue box.
Here is an example of how you can do this:
< a style="color:#000000; text-decoration:none;" >System text copy that is being underlined by Yahoo!.< /a>
Please note: I added spaces before each < > in the above code. This is so the code displays correctly in this post. Remove the erroneous spaces when you try this in your Emails HTML.
As always, be sure to test your mailing after adding these snippets of code to ensure that it isn't causing any new breaks in other mail clients. Let me know if this update works for you.
Thank you!! This tip saved me huge headaches. :-)
ReplyDeleteThank you!! This saved me massive headaches. I had link colors defined with in-line css and yahoo insisted on turning them blue.
ReplyDeleteHi Jenny,
ReplyDeleteI am glad that I could help!
Best regards,
Jordan