How to keep visited links from changing color to the default color (blue) in Outlook 10

Workflow of website template development on widescreen computer monitor. Slim wireless keyboard and mouse near it. Content on display: Web browser, CSS editor and FTP software.

Challenge
I had to create a template that had a Call to Action text link. The link had to keep its original color after being clicked on and not to change it to the system’s default blue. The reason for maintaining the original color was that Outlook’s default blue clashed horribly with the designer’s page colors.

Problem
Visited links with assigned color, in my case it was yellow (#fbf6a5), are changing it to blue after being clicked on and when viewed in Outlook 10.

Solution
In order to create such a link, I assigned the color (#fbf6a5) inside of <td> cell and <a href> hyperlink using inline styles. Then I used <span> element with attribute “class” inside of the head section (internal style sheet). See examples below.

See it on GitHub https://github.com/vikaw/email_development/blob/master/link_color_yellow

Example:
<style type=”text/css”>
@-ms-viewport {
a.yellow_link:link {color:#fbf6a5;}
a.yellow_link:active {color:#fbf6a5;}
a.yellow_link:visited {color:#fbf6a5;}
}

<table width=”100%” bgcolor=”#ffffff” cellpadding=”0″ cellspacing=”0″>
<tbody>
<tr>
<td style=”color:#fbf6a5;  background-color:#bbac95; height:32px; text-align:center; font-family: Helvetica, Arial, sans-serif; padding-top:2%; padding-bottom:1%;  letter-spacing:1px;  font-size:1.3em;” align=”center”>

<a href=“#” style=”color:#fbf6a5;  text-align:center; font-family: Helvetica, Arial, sans-serif; padding-top:2%; padding-bottom:1%; letter-spacing:1px; text-decoration:none; “>

<span class=”yellow_link”>THIS IS THE LINK</span>

</a>
</td>
</tr>
</tbody>

 

Leave a Reply

Your email address will not be published. Required fields are marked *