CODEWITHSUNDEEP
htmlemailhtml-emailmailchimp
MitchEff
MitchEff

Reputation: 1557

MailChimp just, always puts "color: inherit !important" on links, turning them blue in Outlook

I've tried everything I can think of, but no matter what I do, MailChimp demands any <a> with an href has color: inherit !important; text-decoration: inherit !important and, because Outlook is absolute garbage, means all my links are coming up blue and underlined.

In this example, I can put in a link, and it'll just turn blue:

<td style="color:#27646a;font-family:Georgia, serif;font-size:16px;font-weight:bold;" mc:edit="button">
    READ MORE
</td>

In this example, if I put in a link, it'll just ignore my <a> and add another one adjacent:

<td style="color:#27646a;font-family:Georgia, serif;font-size:16px;font-weight:bold;">
    <a mc:edit="button" style="color: #27646a; text-decoration: none;">
        READ MORE
    </a>
</td>

I can put this in my CSS, but obviously MailChimp decides to ignore it:

td a {
    color: #27646a !important;
    text-decoration: none !important;
}

I don't really know what my other options are, and I swear I don't remember MailChimp arbitrarily deciding everything must look like crap in Outlook - is there something I'm missing?

Upvotes: 0

Views: 1917

Answers (3)

Dylan
Dylan

Reputation: 11

In case others are finding this, it is possible to set hyperlink colours in Mailchimp templates that will be respected by Outlook without styling each link inline.

I'm using a custom HTML template in Mailchimp, using the classic builder.

It does seem like it's necessary to specify the link styling for each type of content block that you have in your template. In my case, my editable content blocks are always div tags. In my template code, within the body tag:

<style type="text/css">
    div a{
            color:#000000 !important;
            text-decoration:underline !important;
        }
</style>

The style would need to also be defined for all tables, p, or whatever else you are using to contain text. I've tested the result in Outlook 365 and it works.

I remember reading somewhere that mailchimp won't allow hyperlinks to be too similar to the background colour (because the unsubscribe link must remain visible) so that's a possible issue as well.

Upvotes: 1

user2958788
user2958788

Reputation:

You should be explicitly declaring colours and text-decoration:none/underline on every single <‌a‌> tag. Mailchimp will then avoid adding these fallback styles.
I've always declared mc:edit on the table cell wrapping the <‌a‌> tag as that is the foolproof way of editing the url and keeping the styles.

Here is the code I use. There are a tonne of other styles added and that is simply because I use the border technique of building buttons, but the issue is the same. I have mc-edit on this tag and have made sure to declare text-decoration and colour and my client uses this every week without issue.

<td align="center" valign="middle" style="padding:14px 20px;" mc:edit="button">
<a href="#" target="_blank" style="font-family:Questrial, Helvetica, Arial, sans-serif;font-size:14px;line-height:14px;font-weight:400;letter-spacing:normal;text-align:center;text-decoration:none;color:#ffffff;text-transform:uppercase;">Button</a>
</td>

Try that. Hoping that will work out for you

Upvotes: 0

Paul
Paul

Reputation: 3

I have used two methods for generating emails in MailChimp: 1) Foundation For Emails and 2) a MailChimp drag and drop email template.

In Foundation, it takes my source CSS code:

.item-link {
    color:#0C3C80;
    font-family:Helvetica;
    font-size:16px;
    text-decoration:underline;
}

and generates the inline style like this for links with class "item-link":

<a href="*|ARCHIVE|*" style="Margin:0;color:#0c3c80;font-family:Helvetica,Arial,sans-serif;font-weight:400;line-height:1.3;margin:0;padding:0;text-align:left;text-decoration:underline"><span style="font-size:12px">View this email in your browser</span></a>

This produces the correct color in Outlook.

In the drag and drop template, I use the "Design" tab -> "Body" -> "Body Link" of the editor to assign the link color. It also appears correctly in Outlook.

The difference may be that in two of your examples you assign the color in the td tag style, and in the third, you designate it as a button to the MailChimp editor, so the style for the button is probably overriding the style you want.

I hope this helps.

Upvotes: 0

Related Questions