SOLVED

How to stop a hyperlink from turning blue in email editor

Go to solution
Anonymous
Not applicable

How to stop a hyperlink from turning blue in email editor

Hi,

I've created an email and I want the text to remain in a white colour but whenever I highlight the words and turn them into a hyper link, the formatting changes and the text colour changes to blue but I want it to remain white.

I've tried editing the HTML but haven't had any luck yet.

Any ideas?

Cheers,

Chris

Tags (2)
1 ACCEPTED SOLUTION

Accepted Solutions
Joe_Reitz
Level 10 - Champion Alumni

Re: How to stop a hyperlink from turning blue in email editor

if you need the text it to stay white, try using an !important declaration to override any other styling. Text-decoration will keep it from being underlined, but color is a different property. And remember, most email clients like Gmail, Yahoo, etc. prefer seeing in-line CSS... It's painstaking, but it will help ensure your emails look the same across a variety of clients.

For example, for the Learn More text inside this 100% CSS button we use looks like this:

<a style="text-decoration: none; color: #ffffff !important; font-size: 18px; font-family: Arial, Helvetica, sans-serif;" href="https://info.stanleycss.com/2015PerimeterSecurity.html">LEARN MORE</a>

Screenshot 2015-10-07 12.30.27.png

If it doesn't look cool, you're probably doing it wrong.

View solution in original post

3 REPLIES 3
Andy_Varshneya1
Level 9

Re: How to stop a hyperlink from turning blue in email editor

Hi,

That is happening because of text-decorations. If you want to modify just a single link, you can do it by adding the styling to the HTML for the link like so:

<A HREF="page.html" STYLE="text-decoration: none">Huh</a>

Otherwise if it's a global change, you'll need to update the css style, as shown here CSS text-decoration property

Andy

Joe_Reitz
Level 10 - Champion Alumni

Re: How to stop a hyperlink from turning blue in email editor

if you need the text it to stay white, try using an !important declaration to override any other styling. Text-decoration will keep it from being underlined, but color is a different property. And remember, most email clients like Gmail, Yahoo, etc. prefer seeing in-line CSS... It's painstaking, but it will help ensure your emails look the same across a variety of clients.

For example, for the Learn More text inside this 100% CSS button we use looks like this:

<a style="text-decoration: none; color: #ffffff !important; font-size: 18px; font-family: Arial, Helvetica, sans-serif;" href="https://info.stanleycss.com/2015PerimeterSecurity.html">LEARN MORE</a>

Screenshot 2015-10-07 12.30.27.png

If it doesn't look cool, you're probably doing it wrong.
Andy_Varshneya1
Level 9

Re: How to stop a hyperlink from turning blue in email editor

Good catch, Joe.