How to change the font color for unsubscribe and manage preferences

Hi there @GoodVibes123,

Thanks for posting to the Community! Hope to provide some info regarding editing the unsubscribe/preference links. 

To change to font color of the unsubscribe link, because it it set to a default color when you use the tag, there is a bit of code that needs to be added to override the default color. To do this we need to update the code within the Source of your Text block to the following:You will actually need to click into the text block with the unsubscribe tag. Go into the source code by pressing the 'source' button on the upper left of the editor, and use this line of code: 

<a href="LINK" style="color:#HEXCODE !important;">Link Text</a>. Of course, change the #HEXCODE portion to the color code that you want to appear.

For instance <a href="{% unsubscribe_link %}" style="color:#?????? !important;">Unsubscribe</a>

​All you have to do is add it to your Source code, change the code color, and add it to a live send.

The above HTML with inlined CSS snippet ensures that we are overriding the link color to black with the !important tag. The URL we are using can be referenced from our Template Tags doc.

I think the hardest part about implementing HTML and CSS is ensuring that all the syntax is correct when pasting it over and making sure you are adding it to the right areas.

We also have documentation regarding how to Customize a List's Unsubscribe Page that is worth checking out.

Let me know if that helped!
Alex

@alex.hong thank you for the help. I tried your source code and it worked however it didn’t work for the Manage Preferences tag that I have next to the Unsubscribe tag. See screenshot below. What is the source code if I want to have both of these tags side-by-side with the color #D3D3D3? 

Here’s the code I used: 

<a href="{% manage_preferences %}" style="color:#D3D3D3 !important;">Manage Preferences</a> | <a href="{% unsubscribe_link %}" style="color:#D3D3D3 !important;">Unsubscribe</a>

Here’s the end result preview:

I’m experiencing a similar issue as above.

When I use the following: <p><a href="{% manage_preferences_link %}" style="color:#454545!important;">Manage Preferences</a> | <a href="{% unsubscribe_link %}" style="color:#454545 !important;">Unsubscribe</a></p>

The links don’t function properly and show 400 bad request and the source is updated to: <p><a style="color: #454545 !important;" href="https://www.klaviyo.com/email-template-editor/{% manage_preferences_link %}">Manage Preferences</a> | <a style="color: #454545 !important;" href="https://www.klaviyo.com/email-template-editor/{% unsubscribe_link %}">Unsubscribe</a></p>

Then alternatively when I use the tag, I can’t seem to change the color from blue. 

I would like to just have a unsubscribe link in the correct color but can’t seem to manage it. 

Please help. 

Hey there @BriaTekla,

I would say that the code seems correct and the formatting looks accurate. Please double check for any additional/latent formatting issues that might be coming up. By chance, is there anything else playing with the code and what hex color they are using that could cause any disruption with how this code is being interpreted and injected into your form? It’s pretty easy to miss some minor syntax issues elsewhere that could disrupt the entire thing.

My recommendation is still to double check the code as it should pass correctly. If not, please reach out to a Klaviyo Partner to get some contracted developer assistance or to Support for a more in depth analysis into your account setup. 

Thank you!

Alex