Community Forum

Over the years we have built up a community of email marketers, coders and designers that live and breathe email.

Use the Email on Acid Forum like your virtual water cooler: Stop by to discuss email code, quirky clients and fixes and post your issues (with an example of the code) for our community to offer its assistance.

 
   
Yahoo mail now highlighting key words in content

thumbslinger

Newbie
Total Posts:  11
Posted: 06 August 2010 02:29 PM

Not good. Evidently, one cannot override the coloring syntax that Yahoo mail is doing.

We have an email and in the header is the word/phrase “expense ratios” and Yahoo mail is linking those.


Terrible policy.

Is there any known way to avoid having key phrases not underlined by Yahoo mail?


 

acidadmin

Avatar
Administrator
Total Posts:  43
Posted: 06 August 2010 03:27 PM
[ # 1 ]

This is a great question!

Yes, Yahoo(new)‘s Shortcuts can make a big difference in your text formatting.  They add this linked style:

.yshortcuts { color:#366388}

Then they insert links where they think it is necessary.

On top of that, they add a <span class=“yshortcuts”> inside each of your links.

For example:

<a href="#">Link</a

Gets converted to this:

<a href="#" rel="nofollow"><span class="yshortcuts">Link</span></a

Your best option is to overwrite the class using embedded CSS:

<style type="text/css">
.
yshortcuts { color#33F}
</style

If you have a header and you don’t want it to get affected by Yahoo(new), you could do something like this:

<style type="text/css">
.
yshortcuts { color#33F}
.header .yshortcuts {color#fff; font-size: 18px; text-decoration: none}
</style
<class="header">Header</p

We will add the Yahoo Shortcuts plug-in to our simulation and follow up with a blog post about this issue.  Stay tuned…


 

thumbslinger

Newbie
Total Posts:  11
Posted: 09 August 2010 07:38 AM
[ # 2 ]

Ok, this sounds good. But what if there are links in both a reversed state as well as normal state?

It seems the css selector might get a little complicated for html emails?


 

acidadmin

Avatar
Administrator
Total Posts:  43
Posted: 09 August 2010 08:16 AM
[ # 3 ]

Thumbslinger

I completely understand that you don’t want to have to make a rule just for Yahoo, however in this case it is unavoidable.  We actually recommend that you create a standard embedded css script to use on all your emails in order to overwrite the various quarks.

Nevertheless, here is what is happening: CSS properties will always trump the Font “size” and “color” attributes.  When Yahoo finds something they think is interesting, they insert CSS into your code - which makes it impossible not to write a special rule to overwrite their CSS.  Take this for instance:

<font face="arial, helvetica, sans-serif" size="4" color="#ffffff">
    <
span class=".beat"> and $0 online trade commissions,<br>
      
the new blahblah.</span>
  </
font

That might get converted to:

<font face="arial, helvetica, sans-serif" size="4" color="#ffffff">
    <
span class=".beat"> and $
      
<span class="yshortcuts">online trade commissions</span>
    ,<
br>the new blahblah.</span>
  </
font

So you really have no choice but to create an embedded instance for yshortcuts.

You bring up a good point for the link colors as well, to be super safe, you might want to add to my original embedded suggestion:

<style type="text/css">
  .
yshortcuts,
  .
yshortcuts a,
  .
yshortcuts a:link,
  .
yshortcuts a:visited,
  .
yshortcuts a:hover 
  {color
#33F}
</style

 

acidadmin

Avatar
Administrator
Total Posts:  43
Posted: 09 August 2010 08:28 AM
[ # 4 ]

Haha, I can see that you deleted your post because it broke our forum page.  I was fixing the CSS issues with our forum as you where deleting your post - no worries, from now on, just break up your code snippets with carriage returns so it doesn’t get cut off. Nevertheless I fixed it so that it won’t break the page next time.

Back to the subject at hand: Since .yshortcuts is not a universal selector, it will only affect the elements that yahoo inserts into your code after the fact.  It will not affect the rest of your document, nor will it cause any adverse side effects in any other email client.


 

thumbslinger

Newbie
Total Posts:  11
Posted: 10 August 2010 08:55 AM
[ # 5 ]

Just a final note from this camp. They also add an ID with dynamically generated numbers so those will never be able to be targeted but with specificity and in the end the !important hack, you can avoid just about anything they are currently adding.

Their position seems to be one of “It’s a free service so we’ll do what we think is beneficial for our users.”

Thanks for the insight. You saved an email campaign from looking like an ad!


 

acidadmin

Avatar
Administrator
Total Posts:  43
Posted: 07 October 2010 08:22 AM
[ # 6 ]

Another fix is to send a test of your email to yahoo in order to determine which words are linking against your wishes. Then, add the following tag around each word:

<a name="date" style="text-decoration:none; color:#000000">
<
span style="color:#000000;">WORD</span>
</
a

This fix is particularly useful if you have specially formatted headers or buttons that are getting interfered with. You’re basically treating each word like a link, but changing “href” to “name”.

Unfortunately there are no known workarounds for deactivating this plug-in.