iOS automatic styling of telephone numbers issue

how can I somehow get this happening for phone numbers on iOS?


iOS automatically puts a blue colour on my telephone #, which happens to be very similar to the background colour it’s on. Can someone explain the header attachment for me? I thought I might be able to inject some html into the page, but that doesn’t seem to be the case. I don’t see a way in blocs to set color:inherit, or target the “tel” protocol. I’m probably over-thinking it, but whatever the case is, it can’t stay how it is right now, its super ugly/illegible.

Have you already tried adding the CSS to the page via:

Page Settings

Page Settings > Add Code > Header > CSS

<style type="text/css">
a[href^=tel]{ color:#FF00FF; text-decoration:none;}

yes, it doesn’t work.

Even when exported and viewed directly in a browser?

Does this link help?

I put it on the server. Still the blue link. The link is pretty much what you already gave me. Except for the meta. Which I wanted to try before, but you can’t put that in css can you? Seems like you can’t inject HTML.

Just to be clear the above code works fine when added into the page head and viewed outside of Blocs.

However if the URL link you posted is the page in question, then it appears it has no tel: href present on the page and only a mailto: href. So there is nothing for the above CSS to reference. Also the way you are trying to setup and use the “phone.css” is incorrect.

I’ve added the following code to my pages:

<style type="text/css">
a[href^=tel]{ color:#FF00FF; text-decoration:none;}
<meta name = "format-detection" content = "telephone=no">

Now non-URL telephone numbers appear normally are not clickable, and URL numbers function normally. Thanks to @Blocs_User and @MartinC for the tips.

The reason I thought it would work is because iOS automatically recognizes phone numbers. So how do you do the phone.css thing properly? And do you use the html widget? I obviously don’t understand the header addition, or how to make html tweaks.

How did you add that?

I used the “add code” function in the page settings to add your style code. I still get a blue telephone # in iOS. Was that how I was supposed to add that?

Hi. I just added the whole block to the page using “Add Code” to the Header section.

I have a line of text that slides in over top of the header graphic. This line has a phone number that used to get converted to a link by IOS. Also have a phone number in an address section the footer section. I changed to foot number to a tel: URL and left the header graphic untouched.

Works well now.

<meta name="format-detection" content="telephone=no">

OK I am SO confused now. I just want a telephone number than can be clicked in iOS to make the call, and which I can control the colour of. There are too many details I could be getting wrong to troubleshoot it. I have this code in my page via “Add code”

<style type="text/css">
a[href^=tel]{ color:#FF00FF; text-decoration:none;}
<meta name = "format-detection" content = "telephone=no">

I’ve tried using a label with interaction for the number. I can’t seem to be able to select the anchor after it’s created, so that was frustrating. Now i’ve used a para and text link, “navigate to url”, and the “url” i put in is tel:306-370-7009. Sometimes blocs confuses me as far as what’s assumed. Does it assume <a href="tel:123-123-4567">123-123-4567</a> in that url box? Then i styled the anchor with “normal” and “hover” states. This shouldn’t be so difficult. It’s just a (&(&&^!! phone number! Help me Obi-wan Kenobi!

The actual URL has double quotes ""tel:306-370.7009"".

rather than pasting in “tel:306-370.7009” try pasting in just tel:306-370.7009.

Let me know if that helps.

As soon as I removed the outer quotes it worked for me.

Thanks, Norm. I didn’t find the double-quotes, but I did realize while hunting for it that I still had a link to a (now non-existent) css file. As soon as I deleted that connection, it works. It’s a link and not coloured on iphone, and even works as a facetime link on the computer. So where did you find the double quotes? I’m not sure what’s worse… being confused with it working, or being confused and it not working. :rofl:

1 Like

I found them on the live site, in the icons href. AnywY at least it’s working now :+1: