Menu icon Foundation
!Important on Outlook

I'm testing an email on Litmus. Everything's pretty much OK except link colors.
I've setup a color on ink.css of #e74c3c (a, a:visited, a:hover, a:active) that also has the !important tag added.

For some links, I don't want that color, so I've added another class to that particular link, like an anchor tag with class="menu" and also added .menu { color:#ffffff !important; } but that doesn't work on Outlook.
The links look blue, as if there wasn't any color.

Anybody knows how to solve this? I know the !important tag is necessary on the generic links (a, a:visited...) so I can't remove it.

Thanks!

inkOutlook

I'm testing an email on Litmus. Everything's pretty much OK except link colors.
I've setup a color on ink.css of #e74c3c (a, a:visited, a:hover, a:active) that also has the !important tag added.

For some links, I don't want that color, so I've added another class to that particular link, like an anchor tag with class="menu" and also added .menu { color:#ffffff !important; } but that doesn't work on Outlook.
The links look blue, as if there wasn't any color.

Anybody knows how to solve this? I know the !important tag is necessary on the generic links (a, a:visited...) so I can't remove it.

Thanks!

Tim Hartwick about 4 years ago

Hi Santiago,

That's strange that it isn't properly applying Outlook. One thing to double check is that your CSS rule is in a format supported by Outlook. (For instance, Outlook doesn't support E:hover selectors.) You can see a compatibility chart here: https://www.campaignmonitor.com/css/

If you're still getting problems, upload some of your code and we'll take a look at it.

Thanks!

Santiago Valdes about 4 years ago

Hello Tim, thanks for your answer. After using the Inliner tool, this is the result (only regarding this particular element):

HTML output:

<a href="[link]" class="menu-link" target="_blank" style="color: #303535 !important; text-decoration: none; font-size: 11px;">COMO FUNCIONA</a>  

This is the CSS output. The element .menu-link (that has the same key-value pairs as the :active, :visited and :hover) is somehow erased on the CSS. I assume this is because it's now embedded on the HTML.

a.menu-link:active {
font-size: 11px; color: #303535 !important;
}
a.menu-link:hover {
font-size: 11px; color: #303535 !important;
}
a.menu-link:visited {
font-size: 11px; color: #303535 !important;
}  

This is what doesn't look good on Outlook but on other platforms it looks good.

Thanks!

Tim Hartwick about 4 years ago

Hm... I whipped up a Litmus test and I was able to get the link working. Check out the results here: https://litmus.com/pub/910fca9/screenshots

Here's what I did:
1. Used the "basic.html" template from the Ink Docs.
2. Added the rule: ".menu-link { color: red; }" on line 777 ( the last CSS rule).
3. Added the class "menu-link" to the "Click It" link.
4. Inlined it with Ink's inliner: http://zurb.com/ink/inliner.php
5. Tested on Litmus.

There might be an issue with where that rule falls in your stylesheet. Maybe, try moving to down to the last rule in your stylesheet?

Let me know if that works!

Santiago Valdes about 4 years ago

Tim, thanks! It worked.

I believe the issue was because I was defining the CSS with every variant (a.class, a.class:hover, a.class:visited, a.class:active). Removing the other variants and leaving only a.class worked out. Also removing the !important tag seem to influence. Even thought it doesn't look good on HTML testing version, when I pass it on Litmus it looks good. When it's only HTML (direct browser testing) the !important tags have preference.

Thanks again, it looks great on every platform. Great solution to email marketing.