Yahoo class ".yshortcuts" Overriding my Inline Color Styles on Links

I am developing a Campaign and when I test it in Yahoo Mail there is a class called .yshortcuts that keeps turning my links to this blue color (#366388). Does anyone know how to get around this? I've tried a lot of different things but nothing is working...please help!

techbydesign, 6 years ago

Here is an example of my code with a link that gets turned blue:

<div style="font-family: 'Arial', Avenir LT Std, Trebuchet MS, Helvetica; font-size: 12px; color: #CCCCCC; padding: 0px; margin: 0px; line-height: 16px; font-weight: normal; display: block; width: 646px;">Grab your video camera, cell phone or turn on your web cam.  It’s quick and easy – just tell us what you think about Johnsonville&reg;!  Visit <a href="http://www.shareyourville.com/index.php" style="text-decoration: none; font-weight: bold; outline: none; color: #00FF00;">www.ShareYourVille.com</a> to enter.</div>

BThies BThies, 6 years ago

Not sure if this would work, but have you tried putting a style tag in the head with your own .yshortcuts class?  It might override theirs.


Brian Thies
Professional Email Developer
Thies Publishing
techbydesign, 6 years ago

Yeah I did....I even moved the style tag containing the class out of the head and into the body hoping that maybe it would get fed in there. I did that because some email clients discard whatever's in the head of the document. I even tried to write very specific selectors to try and override their class. For example:

body.yshortcuts

and

body tr td div a span.yshortcuts

and various other combinations...it's so frustrating. I've only ran into a problem like this once before with MSN Hotmail where they were adding a default padding to any p tag of 1.3ems. That was easy to fix. I just changed the Ps to DIVs and set the DIV to display: block, but this I can't do anything about and it has me going mad!

techbydesign, 6 years ago

I don't want to have to make those links into images. That would suck....but I'm doing this email for Johnsonville Brats and they're quite particular about their color and style guides and that's what I might end up having to do.

Yahoo didn't always do this. This is a fairly recent happening. I test and send out an email campaign every month for Johnsonville and never had this problem before. I always code them the same way too....I jsut don't get it :(

BThies BThies, 6 years ago

Yahoo places an automatic <span> tag around the link, so you can use this instead:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
    .yshortcuts { color:#CCCCCC }
    .yshortcuts a span { color:#00FF00 }
</style>
</head>

<body>
<div class="yshortcuts" style="font-family: 'Arial', Avenir LT Std, Trebuchet MS, Helvetica; font-size: 12px; color: #CCCCCC; padding: 0px; margin: 0px; line-height: 16px; font-weight: normal; display: block; width: 646px;">Grab your video camera, cell phone or turn on your web cam.  It’s quick and easy – just tell us what you think about Johnsonville&reg;!  Visit <a href="http://www.shareyourville.com/index.php" style="text-decoration: none; font-weight: bold; outline: none; color: #00FF00;">www.ShareYourVille.com</a> to enter.</div>
</body>
</html>

Brian Thies
Professional Email Developer
Thies Publishing
techbydesign, 6 years ago

That totally worked Brian! I didn't write out the .yshortcuts a span in the same manner as you did! I tried selecting it in so many different ways but never could nail it. I cannot thank you enough my man. I appreciate the help sincerely. Thanks for the expedient responses and the help. You saved my day! :)

BThies BThies, 6 years ago

Very welcome! :-)


Brian Thies
Professional Email Developer
Thies Publishing
techbydesign, 6 years ago

Brian  I figured out another way to override their class. You got my mind back in the game I guess now that I'm not so frustrated lolz.

Anyways, it was nice to have an overall general color for the links but a few of my links were a different color, so what I did was place a span tag inside of the anchor and wrote inline styles in that span tag. That worked as well. Just thought I should add that information to this post in the event that anyone else ran into these problems.

Once again thanks much! You rock!

iamelliot iamelliot, 6 years ago

thanks guys, this caused a ton of headaches last week!


HTML Email Design and Build - http://www.elliot-ross.co.uk
Email Marketing Design Blog - http://www.emaildesignreview.com

Join 200,000 companies around the world that use Campaign Monitor to run email marketing campaigns that deliver results for their business.

Get started for free
1-888-533-8098