[Google Voice] Override the default style ?

Hi,

About Gmail, is there a css tip/hack to override the default Google Voice style on phone number ?
For now, I've got a template with a phone number styled with a <h2>tag. My simple css :

a { text-decoration:none; }
h2, h2 a { color:#4E85C5 !important; }

No way, google underline every phone number and give them a blue color...
Any idea to fix this ?

Cheers,

roshodgekiss roshodgekiss, 5 years ago

Hi Vlanzoiz3, welcome to the forums! Wow, you're the first to mention something like this in regards to Google Voice. Our friends at Litmus have had similar issues with phone numbers on the iPhone - here's their fix.

Failing that, another option is to break up the numbers with <span> tags - this is how I've stopped things like URLs being turned blue in Gmail. An example is: <span>(02) 1234</span>5678

Annoying fix, I know. Let us know if this resolves it, though!


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
Vlanzoiz3, 5 years ago

Hi Ros,
Thanks for your answer. Here's the result :

1) The Litmus fix
It doesn't work or maybe I've made a mistake. Google still underline the phone number and give the blue color. I tried :

<style>
a             { text-decoration:none; }
h2, h2 a            { color:#4E85C5 !important; }
.googlevoice a     { color:#4E85C5 !important; text-decoration:none; }
</style>

... in the html ...
<h2><span class="googlevoice">Tél +32 (0)68 28 15 12</span></h2>

Here's the result :
http://mourin-cie.be/img/mourin-cie/screen1-googlevoice-overridestyle.jpg


2) Your fix
Breaking up the phone number with a <span> tag work, but it also break the phone link. The good thing : as Google doesn't "see" it as a phone number, the style is not overrided. The bad thing : the link has disappeared and the Gmail user loose the possibility of calling.

<style>
a             { text-decoration:none; }
h2, h2 a            { color:#4E85C5 !important; }
</style>

... in the html ...
<h2><span>Tél +32 (0)68 </span>28 15 12</h2>

Here's the result :
http://mourin-cie.be/img/mourin-cie/screen2-googlevoice-phonenumberbreak.jpg

So, for now I have two bad choices :

- let Google override the phone number style, but still offer the possibility to call
- break the phone number to keep it in style, but also break the call link

Any other idea ?

Cheers,

Edit : The results here above are the same on IE9, Chrome 13 and Firefox 3.6.21

roshodgekiss roshodgekiss, 5 years ago

Hi Vlanzoiz3, I've found that if you wrap the phone number in your own link, you can take control over styling AND still allow calls to be made by clicking on the link in Gmail and on the iPhone. Here's the code:

In the head:
<style type="text/css"> h2 a, h2 { color:#4E85C5 !important; text-decoration:none; } </style>

In the body:
<h2><a href="tel:+32068281512" value="+3268281512" target="_blank" cm_dontconvertlink>Tél +32 (0)68 28 15 12</a></h2>

As you can see, I've added cm_dontconvertlink to prevent the link from being converted to a tracking link - this allows the tel: to be parsed by Google Voice and Mail on the iPhone. In email clients that don't support tel:, the above link should in some cases appear as formatted text. In others (Apple Mail), a 'No associated application can be found' error or similar may appear. I haven't tested this approach extensively enough yet to determine how each client behaves.

If you're really serious about this approach, you can also provide an alternate Skype link in this format: <a href="skype:+32068281512"...

Using either tel: or skype: isn't the perfect solution, as this article illustrates. You can't track this link, either - not that you could initially, anyway.

Thanks for your patience, Vlanzoiz3 - I hope this sorts out the phone number dilemma for you :)


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
Vlanzoiz3, 5 years ago

Hi Ros,
Thank you so much for your answer. Even if it isn't "perfect" (as the article you link says) it's still the best solution for me now. So easy : no special css, just a targeted link and a "cm_dontconvertlink" ; which I would have forgotten without your help :-)

Because more and more email are seen on mobilephone, I was thinking it could be cool to create some "call me" action directly from the html, just by clicking on the phone number. Even it doesn't work for now for all desktop users.

I'd like to thank you and all the support team for the great work you provide.
It's a real pleasure to rely on a super team like yours. It really help getting always forward.

Have a nice day,

V.

Edit : some test results :

Hotmail (webmail) : Numbers have the right style. Link is active but when clicking, nothing happens : even not a short loading.
YahooMail (webmail) : Numbers have the right style. Link is not active. No possibility to click.
GMail (webmail) ; Numbers have the right style. Link is active and launch the GoogleVoice mini-window with the phone number already loaded. If GoogleVoice is not installed before, Gmail prompt you with their licence acceptation pop-up.
--
Outlook2007 : Numbers have the right style. Link is active to the phone number. I do not have some voip program installed on my computer so when I click the link it prompt me with an "incorrect value" pop-up.

Maybe other members can test this on their system and post the result here, I think it could be usefull for everyone ;-)

Here's a quick code to copy-paste

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test my phone number</title>

<style type="text/css">
    a        {    text-decoration:none; }
    h1, h1 a {    color:#232481 !important; font-weight:bold;}
</style>  
</head>
<body>
    <h1>    <a href="tel:+32123456789" value="+32123456789" target="_blank" cm_dontconvertlink>Click to call</a></h1>
This email was sent to [email]. If you are no longer interested
you can  unsubscribe instantly [unsubscribe].
</body>
</html>

Thanks everyone

roshodgekiss roshodgekiss, 5 years ago

Thanking you for your kind words! I'm actually planning to write a blog post on this topic, which will feature more test results (on top of the ones you've mentioned here). I really appreciate you taking a pro-active approach - this thread is going to be of great benefit to other customers. For one, I learnt a lot from your experiments! :D


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
Richard.Wendon Richard.Wendon, 5 years ago

Good post... will be trying this out myself.

Richard.Wendon Richard.Wendon, 5 years ago

I have the same issue with OL2007 - getting an incorrect parameter result...

In the latest Yahoo, styles are accurate, but there doesn't appear to be a clickable action (i.e no hand symbol)

In Hotmail, the same as above but it understands it is a link... but doesn't do anything on click.

Which are kind of acceptable in my opinion... I've noticed that Google Voice only picks up on a number say... +44 or whatever the int code is, or has tel / telephone in it... as it ignored a perfectly good number that was prefixed with Call:

More experimentation required.

roshodgekiss roshodgekiss, 5 years ago

Hi Vlanzoiz and Richard, thank you so much for your notes here! I've actually done a bit of testing myself and drafted up my findings for an upcoming blog post. Let me know if there's anything here that I've gotten glaringly wrong, or think I should expand on :)

I have the same issue with OL2007 - getting an incorrect parameter result...

In the example I've used in this post, I've deliberately disabled the link in desktop clients for this reason. The errors are really unfriendly :/

I've noticed that Google Voice only picks up on a number say... +44 or whatever the int code is, or has tel / telephone in it...

If you apply your own tel: link, GV will take anything... Including a mix of letters and numbers. Otherwise, it's selective over what it picks up, as you've mentioned here :)


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
Vlanzoiz3, 5 years ago

His Ros,
Just come back on the forum after few days in hollydays, and waouw : your post is awesome !
It's just what I was looking for : good implementation for mobile and Gmail users, no disturbing for others, and ... so easy to implement.

Thank you for spreading the words,
Cheers,

V.

PS : and thanks for mentionning my post (I'm pretty glad :-))

roshodgekiss roshodgekiss, 5 years ago

Haha, thanking you V for the inspiration and testing! We'll have it up in the blog shortly. Hope you had a relaxing holiday, by the way :D


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor

Join 200,000 companies around the world that use Campaign Monitor to run email marketing campaigns that deliver results for their business.

Get started for free
1-888-533-8098