+2
Hi friends!
I assume this would be an easy answer but I can’t seem to figure it out. With the old/previous “editing templates”, I had no issues changing the Link Text details however using the new/updating editing template, looks what's happening.
As you can see I'd like to change Link Text color to #c88755 however, when I test out a campaign and view this in preview, it’s blue! How come? Thanks in advance 🍃
Best answer by David To
View original
+1
Also having issues with this in the new editor - hope Kaviyo fix this annoying issue soon.
As a temporary workaround you can use these in your templates:
{% web_view_link %}
{% unsubscribe_link %}
and then add inline styles to your a href links e.g.
<a style=”color: #c88755 !important;” href="{% unsubscribe_link %}" >unsubscribe</a>
For other regular links in text blocks you will need to go in and add: style=”color: #c88755 !important;” to your href tags.
<span>{% unsubscribe '<span style="color: #000000;"><u style="text-decoration-color: #000000;">Unsubscribe</u></span>' %}</span>
This just saved my life this morning. Thank you!
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)?
I am having this same issue! I am attempting to put an email address in the body of the email, but I do not want this to turn into a blue link. I added <span style="color:#ffffff;"> to the code, in the text block where this is included, but it is still showing as a blue link when I send the preview email in both outlook and gmail. Should I be putting this in a different spot in the code? Does the email address or link need to be wrapped in a specific code?
Hello,
I ended up fixing this by making the email into a link and it has stayed the colour I wanted (white) even in gmail. See below.
<a href="{{ email }}" style="color: #ffffff !important;">{{ email }}</a>
+60
Hey
At this time there aren’t any updates we can provide on this template behavior. However, our team is working diligently to resolving this as soon as they can!
I’ll provide an update in this thread when I hear anything from our Product Team regarding a resolution!
David
Hi everyone, I've been having this same issue for months and tried every code change and ended up with things looking fine in editor then spitting out HTML into the preview:
The default link color is a grey and invisible for our unsubscribe and web view links.
I finally found this page and changed the default {% web_view %} that the “Add Personalization” button creates to the suggested {% web_view_link %} as posted above and it is now working - but that was a lot of headache to discover and edit the code the system spits out.
After over a year of this thread’s existence…. PLEASE just update the default personalization button to spit out a functional code string so literally 100% of Klaviyo customers don’t need to fumble around your support pages to hopefully find this thread!
Having an invisible unsubscribe and view online link is not okay!
Thanks :)
+60
Hey
Thanks for that additional feedback! I’ve since gone ahead and shared your feedback and experience with our Product Team to investigate this behavior further.
At present this appears to be an unexpected behavior restricted only to the new template editor. I’ll share and provide any updates from our Product Team when made available to me!
Really appreciate you both for raising this issue and for being members of our Community!
David
+12
Hi
I'm fully agree with you, but sometimes because they are default they are invisible and to stand them out I want to change the color using workaround every time is not so smooth solution :)
+1
<span>{% unsubscribe '<span style="color: #000000;"><u style="text-decoration-color: #000000;">Unsubscribe</u></span>' %}</span>
+2
Was this fixed - as I’m having this issue??
+60
Hey
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
Hi
+60
Hey
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
OH! Duh! Thank you once again
+12
<span>{% unsubscribe '<span style="color: #000000;"><u style="text-decoration-color: #000000;">Unsubscribe</u></span>' %}</span>
This just saved my life this morning. Thank you!
This really helped :)
+2
Hi
Thanks for the response!!! I definitely did all your suggestions and still no luck.. Ad you can see in the image below the two links are completely different color. That DARN blue!! haha.
+60
Hey
This isn’t so much a bug but rather a function of many inbox providers. In case you may have missed my comment prior:
Hey
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
Since you’re surfacing an email address in your email - regardless of the method such as referencing an event variable - inbox providers will still attempt to launch a compatible app from these entries.
I would also suggest taking a look at <a href> and then overriding the color. An example of the code they used is: <a href="{{ email }}" style="color: #ffffff !important;">{{ email }}</a>
David
+60
Hey
Sorry to hear you’re being effected by this as well!
After reaching out to our Product Team regarding this behavior, it appears they are aware and confirmed that this is currently a bug causing this behavior. They’ve since escalated the case to our engineering.
We really appreciate everyone’s patience as our teams work towards a resolution to squashing this bug!
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)?
+60
Hello
Thanks for sharing your experience with the Klaviyo Community! I’ll share this insight with our Product Team!
I’ve seen this occur from time to time when the new template editor doesn’t properly save. To alleviate this I would advise ensuring you’ve clicked the Save and Return to Templates button after making your edits. This will make sure your template is saved and using the most up to date version of itself.
Keep us posted on how that works out as we are still working through some of kinks with our new editor! 
Thanks for being a part of the Klaviyo Community!
David
+60
Hey Community members,
Just wanted to provide a quick update on this bug that’s been impacting link in the new template editor always turning blue.
Our Product team is actively working on a resolution to this behavior and I look forward to updating this post when it has been resolved. In the interim,
Anna also spoke to this in the video, but also just wanted to note that this workaround will not work for the unsubscribe/web view links. You can also find the code that Anna used to paste in the Source tab of a text block below for your convenience. Keep in mind to swap in your own hex code color, link, and text!
<p><a style="color: #addhexcodehere;" href="www.google.com"> Add your text here </a></p>
Thanks for being members of the Klaviyo Community!
David
+1
Hi !
I still have this strange behavior on gmail… I also tried the fix with the # but it didn’t change anyhting… Do you have any update?
Thanks,
Hey Community members,
I know it wasn’t that long ago that I posted, but wanted to share that our Product Team did recently release a fix to resolve this behavior of links always turning blue despite what their styling was set as.
I also just want to thank everyone’s patience as our team worked towards implementing a solution for this bug.
Have a great day!
David
Hi
I’m experiencing this exact same problem now in the OLD editor. No code edits, saved and returned to templates etc. If you have any insight that would be great.
Thanks!
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 :)
Hi
My previously working block contained:
<p style="text-align: center;"><span style="font-size:14px;"><span style="color:#d4d4d4;">Update your email 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 }}. </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!
What you can do is (manually - to each template/universal content block) is change the default Unsubscribe and View Online to {% web_view_link %} and {% unsubscribe_link %} then you can add HTML parameters around it that will stick - like link text and color.
For example:
<span style="font-weight: 400;"><a href="{% unsubscribe_link %}" style="color: #999999; font-weight: 400;">Unsubscribe</a></span>.
See its really simple and not a giant design flaw effecting 100% of klaviyo users….
Enter your username or e-mail address. We'll send you an e-mail with instructions to reset your password.