Trying to override Yahoo's .yshortcuts links in a email template

Hello gang! I'm having trouble with an email template that I hope you can help me with. In my template, I have included this:

/* Body text color for the New Yahoo. */
.yshortcuts {
    color: #242424 !important;
/* Link text color for Yahoo */
.yshortcuts a, .yshortcuts a:link, .yshortcuts a:visited, .yshortcuts a:hover, .yshortcuts a span {
    color: #f7941d !important;
    text-decoration: none !important;
    border-bottom: none !important;
    background: none !important;

But Yahoo modifies the CSS to this:

#yiv1324688753 .yiv1324688753yshortcuts {
    color: #242424;
#yiv1324688753 .yiv1324688753yshortcuts a, #yiv1324688753 .yiv1324688753yshortcuts a:link, #yiv1324688753 .yiv1324688753yshortcuts a:visited, #yiv1324688753 .yiv1324688753yshortcuts a:hover, #yiv1324688753 .yiv1324688753yshortcuts a span {
    background: none repeat scroll 0 0 transparent !important;
    border-bottom: medium none !important;
    color: #F7941D;
    text-decoration: none;

(At least that's what I see from Firebug anyway). So, if they've changed my class names in my CSS, I'm not going to be able to style

<a href=""><span class="yshortcuts>Link</span></a>

Previously I got around this problem by adding a span inside my anchor element. So I tried doing this...

<h2 align="left" class="article-title">
    <singleline label="Title">
        <span class="article-title">Headline with full-width image</span>

But it doesn't work because the email editor seems to strip out the span within the <singleline> element.

I'm not sure what else to do, and would really appreciate any ideas or a fresh pair of eyes on the problem. Thanks!

jimmenycricket jimmenycricket, 3 years ago

Hey man, what is it you are trying to do? Is it to stop certain text linking?

Get in touch for any freelance work!
roshodgekiss roshodgekiss, 3 years ago

Hi blogjunkie, I've had a little trouble replicating this behaviour, but I'll do my best to suggest a way to stop Yahoo! Mail from hijacking your links. In our blog post on .yshortcuts, Brian Thies suggests:

Given that Yahoo! Mail is automatically adding a .yshortcuts class and <span> tags, Brian Thies' solution is to simply override Yahoo's ambitions with your own styles. In the <head> section of your code, add the following:

<style type="text/css">
   div { color: #CCCCCC; }
   a { color: #00FF00; }
   .yshortcuts { color: #CCCCCC; } /* Body text color */
   .yshortcuts a span { color: #00FF00; } /* Link text color */

Where the colors defined are appropriate to your design. In your body, wrap your body copy and links in a <div> tag or similar, with the class .yshortcuts like so:

<div class="yshortcuts">If you wish HTML wasn't so darn quirky, <a href="...">click here</a></div>

This will override any link color styles that Yahoo! Mail applies.

Alternately, try:

a span.yshortcuts {
    color: #f7941d !important;
    text-decoration: none !important;
    border-bottom: none !important;
    background: none !important;

Let us know if you have any luck with these approaches - otherwise I'll dig around some more for you :)

Get in touch with us on Twitter:
We're also on Facebook:
blogjunkie, 3 years ago

Hi Ross! The problem is that although I have .yshortcuts or a span.yshortcuts in my CSS, Yahoo is changing the class names to span.yiv1324688753yshortcuts so Brian's method isn't working :(

However I got around the problem by doing this:

.article-title a,
.article-title a span {
    color: #111111 !important;
    border: 0 !important;
    background: transparent !important;
    text-decoration: none;

This works because I'm targeting .article-title a span instead of span.yshortcuts. Hopefully this will help others in the forums too :)

roshodgekiss roshodgekiss, 3 years ago

Hi blogjunkie, thank you so much for sharing your fix with us - it's super helpful! :D Keep up the awesome work!

Get in touch with us on Twitter:
We're also on Facebook:

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

Create an account