Solved

How to change link text color on NEW email template

  • 6 November 2021
  • 37 replies
  • 2386 views

Badge +1

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.

New template link color #C88755
email campaign test run: shows blue link text color when I want #c88755



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 🍃 

icon

Best answer by David To 5 April 2022, 22:34

View original

37 replies

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)?



 

Badge

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? 

Userlevel 7
Badge +58

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)?



 

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>
 

Badge +1

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

Userlevel 7
Badge +58

Hey @gmc,

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 @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

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 @WhlM’s comment above where they provide a great workaround to convert the email into a link by wrapping it in an <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

Badge +1

thanks - will give it go

<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!

Userlevel 3
Badge +8
<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 :)

Userlevel 3
Badge +8

Will there be any system option to adjust not this workaround. Again as i was recommend some time ago if there will be color option with !important value in editor would be great 🙏

Userlevel 7
Badge +58

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

Userlevel 3
Badge +8

Hi @David To,

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 :)

Reply