Skip to main content
#
Websites & E-Commerce
LOGIN
contact & support
tutorials & help
blog
site map
search
our twitter linkdin
Precision Computing Arts / Fastwebdev Blog
Precision Computing Arts / Fastwebdev Blog

Welcome to the Precision Computing Arts / Fastwebdev blog. We use this blog to post interesting news about our Sitebuilder web hosting and content management system (CMS). As with other blogging systems, blog articles from our system are indexed in Google and other search engines within a week or two.

(Customers can set up and maintain similar blogs on any Sitebuilder websites that we host.)

Saturday, June 08 2013

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):

  1. Edit the section that has the "invisible" links.
  2. Click the SOURCE button in the editor toolbar to display the HTML source code.
  3. 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>
  4. 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>
  5. Save your changes. Magically, the hidden linked phone number text will appear.

To correct this problem using SPAN tags (removes the link altogether):

  1. Edit the section that has the "invisible" links.
  2. Click the SOURCE button in the editor toolbar to display the HTML source code.
  3. 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>
  4. Delete the <a href="tel:555-222-2222"> and </a> codes.
  5. 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>
  6. Save your changes. The hidden text will reappear and the phone number will no longer be linked.

 

Posted by: Precision Computing Arts, Inc. AT 07:34 am   |  Permalink   |  Email

​NOTE: We are now taking on new projects and website updates. Do-it-yourselfers and professional website designers are always welcome to create and maintain websites on our easy-to-use professional-quality Sitebuilder platform.

Blog Index 
Latest Posts
Categories

    Website Hosting, Shopping Cart E-Commerce Hosting, Mobile-Friendly Websites World-Wide

     

    Contact & Support: click here

    Keywords: Website Hosting, Shopping Carts, E-Commerce Hosting, Mobile-Friendly WebsitesWeb Hosting, Web Site Hosting
    Serving: Most anywhere in the world that the Internet goes!

    © Copyright 1987-2016 Precision Computing Arts, Inc. All Rights Reserved.

    © Copyright 2016- Precision Computing Arts, LLC. All Rights Reserved.

    Website Hosting & Tools By
        Precision Computing Arts / fastwebdev.com