Help needed formatting phone numbers for iOS devices

RapidWeaver Classic General
1

Hi folks,

Am after some assistance that is present ONLY when viewing on an iOS device - iPhone or iPad…

I have a new site for my local village hall on test at

bavh.lwmultimedia.co.uk

When viewing the Regular Events page on an iPhone or iPad, any phone numbers in the text are automatically rendered as links by the device so that it can be called by tapping the link. That’s all well and good but when the phone number is in white on a dark background, iOS changes the phone number to black so it can’t be seen!

When viewing on a desktop (PC or Mac) or an Android device - all is well and no changes are made.

I’ve determined that it’s not theme related as the same happens when the page is published using an inbuilt theme such as Realmac Artful or others. I have also tried using different stacks - Styled Text, Markdown and other text stacks.

I’m assuming someone must have come across this before and would love to know what I can do to force iOS devices to keep the text for phone numbers white or at least a light viewable colour.

Any ideas?

IMG_2962
IMG_29622688×1242 742 KB

IMG_2960
IMG_2960370×800 1.57 MB

2

Try the below code which will make the Telephone numbers into links. Then you should be able to control the link colour.

<a href="tel:123-456-7890">123-456-7890</a>

It’s better to use the country code also (+44), so the number would be:

<a href="tel:+447732043376">07732 043376</a>
3

Thank you I’ll give this a go - The theme controls the link colours and automatically inverts dependant on whether text is in light or dark background - I don’t change text colour manually.

Could you advise the code needed to force a colour on the link too? (Sorry I have virtually zero coding knowledge)

4

If you add the code I mentioned and publish the page, I’ll be able to see what CSS needs adding to change the link colour.

What colour do you want the telephone number links to be?

5

Thanks have done that - as expected they’re now black on all devices.

Colour wise there are a couple of buttons elsewhere on the site that on hover go from white to ‘Silver’ - 212.212.212 (D4D4D4)

6

Try using the HTML below in place of what I gave you before.

<a href="tel:+447732043376" class="tel1">07732 043376</a>

Then we’ll use some CSS to style the links.

a.tel1 {color: #fff;}

Do you know where to insert the CSS? Also, you’ve left a gap in the first telephone number. The gap will render as a “%” in the browser.

1 Like
7

Thank you Neil, have sorted the gap but will give the rest a go later when I can sit down and give it some more time.

I assume I just add the CSS to the HTML Code tab for the page so it affects all instances of ‘tel1’ on the page rather than in the stack dialog box HTML (CSS Classes). That way anything with class=“tel1” will be formatted by the a.tel1 CSS code? Is that right?

I’m hoping to get my head around ‘classes’ and other such useful stuff to effect global changes soon, just need to find a nice simple YouTube video to explain it to me. I think I’ve just grasped the difference between div and span! :wink:

8

I see that didn’t work as intended. The theme has its own unique CSS styles. Try this instead.

main.theme a.tel1 {color: #fff;}
1 Like
9

Published - Unfortunately doesn’t look like that’s doing anything either

10

Ok, let’s try this

#stacks_in_60_page16.aspen_split a.tel1 {color: white;}
11

Ah now that has worked but only on one of the three items (Family Games Night). Is it possible to not have it go black on hover but the grey we were trying for previously?

12

For the hover try this

#stacks_in_60_page16.aspen_split a.tel1:hover {color: white;}

For the others, I’ll give you the numbers you need to add to change the colours. Where its says “stacks_in_60”, you need to add more lines of CSS but just change “60” to the numbers below.

144, 239

13

Add the !important directive, like this:

There are occasions where it helps and this is one of them. Then you don’t need to target each individual instance using the Stack’s ID.

1 Like
14

Don is that in addition to Neil’s suggestion or in place of part of it?

i.e.

#stacks_in_60_page16.aspen_split a.tel1 {color: white;}
#stacks_in_60_page16.aspen_split a.tel1:hover {color: #fff;}
#stacks_in_144_page16.aspen_split a.tel1 {color: white;}
#stacks_in_144_page16.aspen_split a.tel1:hover {color: #fff;}
#stacks_in_239_page16.aspen_split a.tel1 {color: white;}
#stacks_in_239_page16.aspen_split a.tel1:hover {color: #fff;}
a.tel1 {color: #fff !important;}

or does it become

#stacks_in_60_page16.aspen_split a.tel1 {color: white !important;}
#stacks_in_60_page16.aspen_split a.tel1:hover {color: #fff !important;}

etc.

I’m guessing that the 60, 144 and 239 are line numbers in the HTML file for the page or something like that? Just trying to work this out in case I need to do the same again later on another page.

15

This:

Can be replace by this:

It will handle all instances of that class on the page, including any new instances you might add later.

16

Thanks both that last bit has sorted it.

For my own education - would adding those two lines to the Settings > Code > CSS section rather than the Page CSS then style any tel1 classes across the whole site?

17

Yes, adding them there would allow the formatting to appear on all pages.

18

Excellent - I’m learning slowly!

Thanks again to you @DLH Don and @NeilUK Neil for your assistance.

2 Likes
19

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.