CV
5
How to Prevent Gmail From Changing Font Color for Phone Numbers, Address & Dates?
Has any encountered an issue where Gmail is changing font colors for phone numbers and address? Also, Gmail is adding a dotted white border below that dates, upon hovering over the dates it gives an "Add to Calendar" option. Can we prevent Gmail from doing this? Thanks!
Oh, I saw a fix for this a while ago, but I don't know the resource offhand. I believe you can fix it by enclosing your phone numbers with <a> link tags, then using inline style to force Gmail to keep the colors that you want. For example:
I don't remember if you have to have the href attribute, or if you can leave it empty. I'll update post if I find the original resource...
EDIT:
So I still haven't found that resource, but I did some testing. I'd read somewhere that you could insert HTML markup numeric entities (such as ) to "trick" Gmail, but they've gotten smart about it and that no longer works. I tried the following, but all end up as phone links:
I also tested my <a> links, as first posted above, and found that if you leave the href attribute blank (href=""), then it will convert to plain text. If you insert href="tel:8002346000", then it will change it to a genuine link. In other words:
I haven't tested any dates, but I'm assuming that the <a> tags would work on anything Gmail auto links. If anyone finds out otherwise, let me know!
Bump for my edit above!
This worked perfectly. You are a Genius!
This appears to be still be a valid workaround. Do you know if there is a way to customise the 'add to calender' link, at present the link creates the event from the subject of the e-mail even when that may not be related to the event itself - is it possible to specify the subject and any other related event information to help gmail create a more appropriate event?
Solution that has worked for me:
So basically just do an anchor tag without the href and add a style to show the normal text cursor. This method can be used for addresses, phone numbers and perhaps for dates as well. :)
Seems this works for dates too. Whichever you’re using it for, make sure that none of your header styles give away the link. Adding inline !importants will ensure this.
This worked!
I've found putting in this HTML entity works perfectly for me:
​No extra styling required, but placing this in an email address, phone number, etc, will stop it from being auto-linked.
Question for you guys: Turning addreses, phone numbers, and dates into links are added functionality, not only for Gmail, but also mobile devices that improve functionality, allows someone to easily map an address, call a number, make an appointment, all with a simple click. Why would you purposefully remove this functionality and make an email message by default harder to action upon?
I don't think people are trying to remove these functionality features, but trying to override Gmail's ugly CSS instead. Say you have a beautiful email design with orange serif-type links and Gmail gives you underlined blue sans-serif instead; it's not going to look good...
I still style the links, I just override the blue color in the cases where I am not using the default link color in the email.
That's what I usually do. But the tip given of inserting an HTML entity to make the system not see it as a link is breaking the functionality.
Agree with Abby and Melanie, but also in my experience, it's having to do things which are against my better judgement to appease those around me. Sometimes, no matter how much you fight, you just gotta choose your battles :/
Except when you put ​ into a URL link (for the email) you now have created a condition that matches antivirus malware detection criteria and so your email gets blocked as using an URL trick.
Hi Jaina, thanks for that. Would you please be able to send me the full link I need to put in for my UK mobile or London landline? Codes makes me crazy. Unknown word for me & the client has requested the feature.
Have anyone tried with dates?
Hi Coye,
For phone numbers (or email addresses), Abby's example of re-styling an <a> tag is the best way to go, because it removes client-added styling but it does retain the clickable functionality for smartphone users.
<a style="color: #010101; text-decoration: none;" href="tel:18007652747" target="_blank">1-800-POLARIS</a>For addresses and dates, I use a class in the head styling...
.nolink_010101 a {color: #010101; text-decoration: none !important;
}
...and wrap an inline span around dates or addresses.
Join us <span class="nolink_010101">January 1-2, 2018</span> for the event...<span class="nolink_010101">2100 Highway 55, Medina, MN 55340, USA</span>This also ensures that the dates and addresses can be selected/copied (or on some phones, still tapped) but without the client-added styling showing.
You might want to try out this fix Campaign Monitor has suggested for the Gmail link colors: https://www.campaignmonitor.com/blog/post/3648/gmail-turns-your-links-from-black-to-blue/
I recommend if you don't want the phone number to look like a link when hovered over, try
cursor: pointerin addition to the other cssWhat i do for my emails are i place a
<a href="tel:8002346000" style="text-decoration:none;color:#000001;">800-234-6000</a>.Since gmail doesnt like #000000, setting the color to #000001 still gives the links a black color.
The above allows me to show the number as part of the surrounding text and if a user with a smart phone taps on the number they get the option to make a call.
Hi Mohammed,
thank you for your reply. I have tried your link but this doesnt resolve
anything as the linked number (see below) is in black not in grey colour as
the rest of the signature. The colour was selected from colours on offer
inside signature settings.
Are you saying the colour can be only black & not any other?
Best,
Mischa
Hi Mischa,
I tried Josh's code and it works fine in gmai.
Please post the code for that specific section and maybe we can help.
Cheers
it might even help to double up on styles. my normal go to is
i always find that the duplicate style declaration on top of just using a class in the span never lets me down...especially now that ios has fudged up the support for ~ css selectors in the latest release.
Zach I have pasted the code as follows
With my number edited, but sorry I dont believe you that your link DOES NOT turn black because it does. I DONT WANT black I want my own signature colour which is GREY. And dont understand why I get replies that it works because it doesnt. Its NOT right code???
at this point the best thing would be to see the actual code youre working with. something would have to be going on in the template for this to not work. every example posted has been a proven technique. but any of us would probably be more than happy to look it over.
For the phone numbers make it a "tel" hyperlink and over-ride it with inline styling:
<a href="tel:5555555555" style="color:#123456;">(555) 555-5555</a>For physical addresses, I found it best to just make it a google maps link, but Gmail was still ignoring the color I specified in the hyperlink so I had to add span tags inside of it instead.
For addresses, just add an address tag of your own and style accordingly inline. Google adds its own address tag if you don't have one in place.
@rynne <address> has global support from html4 > current, but its always just safer to stick to the really basic tags
You can try by this
800<span>-</span>234<span>-</span>6000HI Md, thanks for your reply. What is the full code I can try, incl. London landline? (code - dummy). Thanks :)
Because of the sheer number of instances in Gmail and iOS where these sorts of links are inserted, I put a set of declarations at the beginning of my style sheet that completely removes any formatting from any links. Then I define a class with formatting I wish for links that I wish to be styled and apply that class to my links.
Thanks Danielle. The link colors in my email are not black so I don't run into the issue described in Campaign Monitor. Gmail is changing the font color for phone numbers to blue. And it's adding a dotted line below the dates/time. For example, Monday–Friday, 9AM–5PM EST is being changed clickable calendar event. Is there any workaround for this? Thanks in advance.
I don't think there is a fix for this. I remember putting a span wrapper around those and putting a style for those spans in the head but so far I remember it wasn't working in all email clients / devices. Good luck and let me know if you have found a fix.
It looks like the span class name in gmail is aBn for spans that hold dates.
So you'd style both for the class and put styling on the span yourself- redundancy will probably be key here.
is what shows if you inspect element from gmail (I tried it on a few different emails to see if the class name changes, it doesn't seem to and was the same in all the ones I inspected).
Great call Melanie. The same trick works for GoogleVoice links where class="gc-cs-link".
This GoogleVoice links still works but the color and styling are customizable.
Thanks Alex, where do I place UK number or London landline?
Did this work for you? Gmail, to my knowledge, strips out all embedded CSS...
THANK YOU! I dont understand why I am getting replies it WORKS because it DOESNT. You either get blue underlined phone or black. How absurd is this in year 2016 where branding is so important & so called technology is advanced (not) that we cant do such a trivial request as make my own choice & specify the colour of my linked numbers. I think I am going to check my calendar, as it seems we are in st. BC with technology.
We're not an exception I think. It's not working for me to and it's annoying.
Abby, I've tried your link at it doesn't work. I'm still stuck & the colour keeps on changing do default black. I'm using 'small, Tahoma text in #999999 and I would like to get the mobile & landline looking like that. Could you help?
This is all you need for gmail:
<a href="tel:8005555555" style="color:#999999;font-family:Tahoma;text-decoration:none;"><span class="#999999">800-555-5555</span></a>and yes, that isclass="#999999"in the span. Let me know if that works.Hi Josh, thanks for taking time to reply. Apologies for my late reply, I have been out of country.
I seriously dont know what Im doing wrong, but I have 1. selected number 2. clicked to create a link 3. pasted your code 4. changed to my number & still number appears black not light grey. I dont want the number to be black. My colour scheme is light grey. Would you know how to resolve this?
Thanks a millions :)
on top of making sure that you have the proper class set in the head (which won't do much anyways) insert the same link style on the span...so the span becomes <span class="#999999" style="color:#999999">###-###-####</span>