3

EDIT: I should mention that the layout was done with tables. I've even tried styling the parent <td> element to get the desired appearance. Still, no bananas.

How do you change the font color of text in an HTML email in AOL's client?

I've tried the following code:

<td>
<span style="color:#FFFFFF;">My Text</span>
</td>

After some suggestions from the community, I've also tried the following approach:

<td>
<font color="white">My Text</font>
</td>

Unfortunately, the text color doesn't change at all. In fact, when viewing the computed styles in Firebug, it doesn't show any color being applied to the element.

I'd expect this to work since all other inline styles work fine and the email is rendered beautifully in every other major client.

Thanks in advance for your help.

elucid8
  • 1,412
  • 4
  • 19
  • 40
  • aol still exists? people still need training wheels to get onto the internet? – Marc B Sep 07 '12 at 20:12
  • 2
    @MarcB: Grandma and Grandpa still need to use the internet sometimes. – Wesley Murch Sep 07 '12 at 20:13
  • You're telling me, man. I'm designing a mass email for my client at the moment, and I've got to make sure that it is going to render correctly across all of the major email clients. AOL qualifies as "major" apparently. – elucid8 Sep 07 '12 at 20:33
  • 1
    You might find this link helpful if you have to support all "major" clients: http://msdn.microsoft.com/en-us/library/office/aa338201(v=office.12).aspx Microsoft totally destroyed a 1 time descent rendering capabilities in Outlook by replacing it with the rendering capabilities of Word which means MSFT hates web developers and we need to code like it's 1999 – scrappedcola Sep 07 '12 at 20:43
  • Yeah, using the MS Word engine to render HTML in Outlook was a horrible idea. I've been cursing Microsoft for quite some time for that little snafu. – elucid8 Sep 07 '12 at 21:04

5 Answers5

3

Try using the <font> tag. This site doesn't list <span> as a supported tag.

<font color='#FFFFFF'>My Text</font>
scrappedcola
  • 10,423
  • 1
  • 32
  • 43
  • I was thinking something like this might be the trick, but forgot about the `` tag. Might as well go all out with old school HTML: `` ;) – Wesley Murch Sep 07 '12 at 20:16
  • Sorry guys, that doesn't seem to work. I've tried using the `` tag inside the `` element and the `` element. Any other suggestions? – elucid8 Sep 07 '12 at 20:39
  • @elucid8 What do you mean you are using the font tag on the td and span? You should replace the span with the font tag representation. AOL probably is replacing any tags it doesn't like. – scrappedcola Sep 07 '12 at 20:41
  • @scrappedcola That's exactly what I mean, I replaced the `` element with `` to no avail. Essentially, I've tried this: `My Text` and `My Text`. Neither approach is achieving the desired results. – elucid8 Sep 07 '12 at 20:42
  • You might create an email using the AOL application, change some text colors, and send the email to yourself. Save it down then open in IE or FF. Then inspect the changed text. Maybe you can replicate how they do it in the email you are composing. – scrappedcola Sep 07 '12 at 20:47
  • @scrappedcola Hey, that's a great idea. I'll try that really quickly. – elucid8 Sep 07 '12 at 20:48
  • @elucid8 Also you can try a standard color word like "red". It *might* be filtering out the color code. – scrappedcola Sep 07 '12 at 20:51
  • @scrappedcola I just tried using the word "white" in the color attribute. Still nothing. In fact, when I view the computed styles in Firebug, it doesn't show _any_ type of font-color being applied to the element. – elucid8 Sep 07 '12 at 21:03
  • @scrappedcola Oddly enough, after composing an email in that dreadful client and sending it to myself, I see that they are using `` tags to control text color. They just don't want to render the same. Quid pro quo my ass. – elucid8 Sep 07 '12 at 21:08
  • Is there maybe a setting in your client that prevents html mail from outside sources? – scrappedcola Sep 07 '12 at 21:10
  • I'm using AOL's web client. I can look into that, though. I'll return shortly. – elucid8 Sep 07 '12 at 21:29
  • 1
    I used http://www.emailonacid.com to render all of this up, and it turns out that my styles were being stripped because it didn't like the way I was setting some attributes. I resolved the warnings it showed and viola, using the `` tag worked liked a charm. Thank you gentlemen! – elucid8 Sep 10 '12 at 14:49
1

font tag is one option, but if possible in your layout, you might want to break out the text into a td and call something like <td style="color:#FFFFFF;">My Text</td>

defau1t
  • 10,593
  • 2
  • 35
  • 47
1

AOL provides a format icon. Click on that and use the eyedropper on the Format Banner to select color for your text.

Michael Fargo
  • 11
  • 1
0

try <td><span style="color:#990011;">Text</span></td> (eg. uses some shade of red to stand out)

josh1978
  • 698
  • 7
  • 19
Teena Thomas
  • 5,139
  • 1
  • 13
  • 17
0

<a style="text-decoration: none;" href="{$shareWithFriendsLink}"> <span style="text-decoration: none; color: #ffffff;"> htt<span></span>{$shareWithFriendsLink|substr:3} </span></a>

Empty <span></span> prevent mail client for recognizing string as link. |substr:3 are in use for Smartys variables for cut off first 3 symbols (htt) added before manually.

Allen
  • 1
  • 1