Your Site Builder Editor may automatically create links from phone numbers, especially on iPad and iPhone. This can render phone numbers invisible if your default link color closely matches the background on which the phone number appears. This article explains how to use link color styles and SPAN tags to make the phone number visible again.
In the examples below, the white phone number text in the first column is invisible because the iPad editor converted the phone numbers to links, which happen to be the same color as the background. (Links look like this on a white background.) The phone numbers in the second column are also white text, but we used some tricks with HTML code to make them visible.
| Phone number link color is the same as the background color |
Phone number color changed to white using style and span tags |
| 555-222-2222 (phone # is at left) |
555-222-2222 (phone number link uses style="color:white") |
| 555-222-2222 (phone # is at left) |
555-222-2222 (<span> </span> tags surround part of phone number text) |
To correct this problem using link color styles (retains the phone numbers as links):
- Edit the section that has the "invisible" links.
- Click the SOURCE button in the editor toolbar to display the HTML source code.
- Locate text that looks like this (areas that you will change are highlighted here in red):
<a href="tel:555-222-2222">555-222-2222</a>
- Add a style="color:white" tag before the > to the left of the phone number. You may use any hexadecimal color code or a standard color name in place of white. See examples below (#FFFFFF is the code for white):
<a href="tel:555-222-2222" style="color:#FFFFFF">555-222-2222</a>
<a href="tel:555-222-2222" style="color:white">555-222-2222</a>
- Save your changes. Magically, the hidden linked phone number text will appear.
To correct this problem using SPAN tags (removes the link altogether):
- Edit the section that has the "invisible" links.
- Click the SOURCE button in the editor toolbar to display the HTML source code.
- Locate text that looks like this (areas that you will change are highlighted here in red):
<a href="tel:555-222-2222">555-222-2222</a>
- Delete the <a href="tel:555-222-2222"> and </a> codes.
- Insert a <span> tag just before the FOURTH, FIFTH, OR SIXTH DIGIT from the end of the phone number and place a </span> tag at the END of the phone number. When you have finished, SPAN tags will block the editor from interpreting 7 or 10 digits as a phone number. See examples below:
555-222-<span>2222</span>
555-22<span>2-2222</span>
555-2<span>22-2222</span>
- Save your changes. The hidden text will reappear and the phone number will no longer be linked.
