TechQA.

Gmail blue links in email

4.4k views Asked by At

I can't figure out how to change these blue links Gmail is adding to the email I'm trying to code.

I've searched online and implemented their fixes but to no avail.

See here

Here's my code.

<th class="small-12 large-6 last columns text-right show-for-large" valign="middle" style="Margin:0 auto;color:#fff;font-family:'Open Sans',sans-serif;font-size:16px;font-weight:400;line-height:1.3;margin:0 auto;padding:0;padding-bottom:16px;padding-left:8px;padding-right:16px;padding-top:16px;text-align:right;width:274px">
    <a href="https://website.com/wealth" style="Margin:0;color:#fff!important;font:inherit;font-family:'Open Sans',sans-serif;font-size:10px!important;font-weight:400;line-height:1.75;margin:0;padding:0;pointer-events:none;text-align:left;text-decoration:none!important">​Wealth</a>&nbsp;&nbsp; 
    <a href="https://discover.website.io/" style="Margin:0;color:#fff!important;font:inherit;font-family:'Open Sans',sans-serif;font-size:10px!important;font-weight:400;line-height:1.75;margin:0;padding:0;pointer-events:none;text-align:left;text-decoration:none!important">​News</a>&nbsp;&nbsp; 
    <a href="https://website.com/contact" style="Margin:0;color:#fff!important;font:inherit;font-family:'Open Sans',sans-serif;font-size:10px!important;font-weight:400;line-height:1.75;margin:0;padding:0;pointer-events:none;text-align:left;text-decoration:none!important">​Contact Us</a>&nbsp;&nbsp;
</th>

css html-email zurb-ink
Original Q&A
3

There are 3 answers

1
Peekay On BEST ANSWER

I added a <span> tag around the links to get it working per Alon's suggestion in the comments.

1
gj-wes On

You'll want to change the colours the 6 digit values, I don't think any email clients support 3 digit colours. I'd also remove all the inline styles on the a tags apart from color & text-decoration, also drop the !important. The font styling will all be inherited from the th.

An overall css fix I use in all templates is below. You'll also need to add an id="body" to your <body> element.

    u+#body a,
    #MessageViewBody a {
      color: inherit;
      text-decoration: none;
      font-size: inherit;
      font-family: inherit;
      font-weight: inherit;
      line-height: inherit;
    }

(#MessageViewBody a will remove blue links from Samsung Mail too, no need to add that ID into your code though. A handy fix to have.)

0
AC007 On

So for gmail in order to pick up the an actual style for a hyperlink anchor ( ) you have to use the following inline css to set the colour and remove the underlining : style="color: #FF0000; text-decoration:none; cursor:text; pointer-events: none;"

This is how a complete tag would look like : <a href="http://www.google.com/" style="color: #FF0000; text-decoration:none; cursor:text; pointer-events: none;">Click here to go to Google</a>

This works as of date answered : 19/09/2019

Related Questions in CSS

Related Questions in HTML-EMAIL

Related Questions in ZURB-INK

Popular Questions

Popular Tags

javascript python java c# php android html jquery c++ css ios sql mysql r reactjs node.js arrays c asp.net json

Trending Questions