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, 5 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, 5 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, 5 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, 5 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:

See why 200,000 companies worldwide love Campaign Monitor.

From Australia to Zimbabwe, and everywhere in between, companies count on Campaign Monitor for email campaigns that boost the bottom line.

Get started for free