How to change link text color on NEW email template

Was this fixed - as I’m having this issue??

Hi, I am having a similar issue form the other side - our links are defaulting to a grey nearly invisible color and I cannot seem to edit them no matter what I try - please help!

Tried making the text bright red just to test
 

Link still doesn’t come through - tried editing it in the code and it looked like it was working
 

I really don’t get it, the same issue was happening with the unsubscribe link but this code snippet fixed it in the footer, maybe because this is a dynamic link Klaviyo is struggling to let me style it?

Please help :)

Hey @Jakub,

At present, I’m not aware of any system options to adjust those specific hyperlink colors.

Although an !important tag is often used to make it so the style of an object cannot be overridden, inbox providers won’t always adhere to this. This is to make it so that these sensitive links/hyperlinks stand out as as a measure of spam prevention - making it easier for users to unsubscribe or manage their preference. 

Using these workarounds is great to have these important hyperlinks align with your brand design, but in practice may not be the best. 

In my opinion, I rather have a highly visible unsubscribe or manage preference link that’s easily identifiable. Else, the next option for users when they don’t see these options is to mark your email as spam. Or, they’ll simply ignore and delete the email going forward without interacting with any of your future email outreaches. In either cases, this would impact your overall sending reputation. I’ve definitely caught myself doing both before. 

I hope this clarifies some things!

David

<span>{% unsubscribe '<span style="color: #000000;"><u style="text-decoration-color: #000000;">Unsubscribe</u></span>' %}</span>

This really helped :)

thanks - will give it go

Does this bug extend to metric variables as well? In those cases the info (email or phone number) cannot be stylized, but are still blue in gmail.
The styles are set to a color and the variable is enclosed in a span tag

For example
If “{{ event.person.email }}” returns “name@domain.com” the email will be blue
Email: name@domain.com

Hey @WhlM and @MBrown,

As you may have noticed, the provided workaround for hyperlinks by overriding the CSS typically wouldn’t work for email addresses. Unlike hyperlinks, Gmail and some other inbox providers will actually automatically see email addresses, telephone numbers, and sometimes street addresses as “functions” to launch a compatible app or software. Because of this, inbox providers will typically have much stricter CSS weight to them that would oftentimes not allow you to override them. 

David

Hello,

I’m having the same issue so fixed it with the code above for the Manage Preferences and Unsubscribe link but how do I fix for an ‘email’ link (example below)? Could someone pls supply the source code to change this from blue to the colour of my choice (this goes blue when I send the email)?

<span>{% unsubscribe '<span style="color: #000000;"><u style="text-decoration-color: #000000;">Unsubscribe</u></span>' %}</span>

Hey @wernstrom,

So close! Looks like you’re actually using the default manage preference variable as opposed to one that generates a link. Instead of using {% manage_preferences %}, you’ll want to use {% manage_preferences_link %} to create this hyperlink experience. More details on using different forms of the variable tags can be found in the Guide to Template Tags and Variable Syntax Help Center article.

Awesome to hear you’re heading in the right direction! 

David

Hi @David To I haven’t had any luck implementing this solution, could you please provide a bit of extra context?

My previously working block contained:

<p style="text-align: center;"><span style="font-size:14px;"><span style="color:#d4d4d4;">Update&nbsp;your email&nbsp;preferences:</span> <strong><span style="color:#F5A623;">{% manage_preferences %}</span></strong>.</span></p>

<p style="text-align: center;"><span style="font-size: 14px;"><span style="color:#d4d4d4;">No longer want to receive any marketing emails?</span> <span style="color:#F5A623;"><strong>{% unsubscribe %}.</strong></span></span></p>

<p style="text-align: center;"><span style="color:#FFFFFF;"><span style="font-size:14px;">{{ organization.name }} {{ organization.full_address }}.&nbsp;</span></span></p>

I’m not super familiar with html… is this how the the <a href> tag is supposed to be added? because this doesn’t seem to work and I’m sure I’m probably missing something:

<p style="text-align: center;"><span style="font-size: 14px;"><span style="color:#d4d4d4;">No longer want to receive any marketing emails? </span><a href="{% unsubscribe %}" style="color: #F5A623 !important;">Unsubscribe</a> </span></p>

Thanks!

Hey @Kathleen and @wernstrom,

Are either of you by chance testing this through a Gmail inbox provider? Although Gmail is most prominent for this, a variety of inbox providers will override the styling when it comes to an unsubscribe or manage preference link as Litmus explains in both their Frustrated by Blue Links in Email? Conquer Them for Good and How to Fix Gmail Blue Links for an Email Dream Come True blog articles. 

You can typically combat this by using a tag to provide only the URL for your unsubscribe link and wrapping it within <a href></a> tags similar to what is mentioned in the How to Add an Unsubscribe Link to Klaviyo Emails Help Center article. For example, if I wanted to force the unsubscribe link to display as black I can use <a href ="{% unsubscribe_link %}" style="color: #000000 !important;">Unsubscribe</a>. 

David