• 0

phone numbers changing to unwanted gray color on iphone and ipad


Question

Posted · Report post

Hi,

 

I have the latest versions of Framework and Wordpress. Everything works great. However, when I view the website on an iPhone or iPad the phone number in my masthead (and the phone numbers in all other places throughout the site) changes from black to a gray color. I have tried to fix using the Browser Specific CSS plugin--I was able to change other elements in the Masthead but whatever is overriding the phone number to change it gray won that battle.

 

I am trying to figure this out because I want to use DMS to improve my site, including adding some blue full width background sections. Of course, I'd want the phone number to remain black, white, etc. or else it's barely viewable on a blue background.

My website is brownelaborlaw.com.

 

Thanks in advance for any ideas you may have.

 

P.S. I am trying to upload a 172kb iPad png screenshot but have unable to do so on either forum updater (advanced and basic).   

 

Thank you.

Share this post


Link to post
Share on other sites

4 answers to this question

  • 0

Posted · Report post

Hi, an update to my previous post.

 

The gray color was the color I chose for links. So that explains that. I still want to put a white text phone number in my header, on top of a blue colored background. However, if I do this, the links throughout my site will be white, which I don't want. Thanks in advance for any ideas you may have.

 

The related issue is that the google voice for chrome extension automatically turns any phone number into a blue Google color, with a blue underline underneath it. Does anyone know how to combat that?

 

To sum it up, I'd like my links to stay gray, phone number in masthead to turn white, and for Google Voice not to take over the white phone number in the masthead and turn it blue and underlined.

 

Thanks in advance for any ideas you may have.

 

Thank you!

 

--David

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

David,

 

You need the Browser Specific CSS plugin, and need to set the link color to your desire for the header area only.

 

Do you have Firebug for Firefox or use Chrome's Inspection Tool?  If so, use either of those to indentify the CSS for that link, and scroll through the levels of CSS so that you can get the right one. You can also wrap the link into a custom class in a div, so that you can specifically style that link only. You can then make it work only for mobile browsers using the Browser Specific CSS pluign.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Rob, Thank you for your reply. I apologize I haven't been able respond earlier. I was away for a few days.

 

I actually tried using the Browser Specific CSS plugin before I made the initial post. For example, the following turns the phone number in my highlight-subhead to red when viewing in chrome--

 

body.chrome .section-highlight .highlight-subhead {
    color: red;
}
 
It is important to note that without adding the above custom css, the phone number is white in chrome, which is the color I chose for it. There is no gray link color to be seen on chrome for this element.
 
However, on an iPad or iPhone, the link color gray overrides my white command for this element. So the following, whether I choose red, white, etc. is overridden by the pesky gray link color--
 
body.iphone .section-highlight .highlight-subhead {
    color: white;
}

 

One of the issues is that I am not sure how to inspect the CSS for that link on a desktop, because no link shows up on a desktop and it works fine. Do you know how I can inspect the grayed link that only appears on an iphone or ipad?

 

Thanks for any ideas you may have.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now