Yahoo Link Colors

Yahoo’s link styles—used on their web pages—now cascade into your email content by default. Yahoo does this by wrapping linked text directly with a SPAN tag with a CLASS of “.yshortcuts”.  The links are blue-green in color, and will override any link color contained in your email design, unless it’s an email address. In order to control the link color to match your email design, you need to apply the fix below.

Your Links Are the Same Color

If all of your links are the same color (in the email & footer) you can use the below workaround by adding style tags defining class to the page. Normally, we advise against using them, but in this case it will override Yahoo’s default link coloring, and will not affect the link rendering in other mail clients, as most will strip it out.

The CSS must go within the body, preferably after the first <table> tag is opened.  See an example of the code below:

<style type="text/css">
<!--
.yshortcuts {color:#000000;}
-->
</style>

In the example above, all of the links would become black.  To change the color, just add a different hex color code.

TIP:  As a BlueHornet user, instead of adding this fix to the code of every email you create, you can put the code in your custom footer. When the custom footer gets added to your sent message, the style will apply to the body of your email as well, fixing the links in the entire message.

Your Links Are Multiple Colors

There are two steps for this.

1. You have to create a style reference right after the first <table> tag is opened.

Here is an example using multiple link colors:

<style type="text/css">
<!--
a.whitelink .yshortcuts {color:#ffffff;}
a.greylink .yshortcuts { color:#666666;}
a.bluelink .yshortcuts { color:#0066cc;}
a.yellowlink .yshortcuts { color:#faf7bf;}
-->
</style>

2. You have to add a class reference to the link itself.

Here is an example for a white link:

<a class="whitelink" style="COLOR: #ffffff; FONT-SIZE: 13px;
FONT-WEIGHT: bold;TEXT-DECORATION: none" target="_blank"
href="http://www.company.com/">Check out our new site!</a>

You would then update the class to be whatever color it should be, based on the naming conventions you used in the CSS. We’ve found that it’s easiest to name it the color of the link. (E.g. “whitelink”)

This fix should be added to all links, including email address links.