Jump to content


Photo
- - - - -

phone numbers changing to unwanted gray color on iphone and ipad

phone number iphone ipad google voice change colors

Best Answer Rob , 08 August 2013 - 08:52 PM

The only idea coming to mind is http://docs.pageline...er-specific-css

 

 

Of course, my mind these days has gone monorail (one track).

Go to the full post


  • Please log in to reply
4 replies to this topic

#1 dbrowne02

dbrowne02

    Advanced Member

  • Members

  • 56 posts
  • Country: Country Flag

Posted 30 July 2013 - 10:58 PM

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.



#2 dbrowne02

dbrowne02

    Advanced Member

  • Members

  • 56 posts
  • Country: Country Flag

Posted 31 July 2013 - 06:40 AM

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



#3 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 02 August 2013 - 03:41 PM

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.



#4 dbrowne02

dbrowne02

    Advanced Member

  • Members

  • 56 posts
  • Country: Country Flag

Posted 06 August 2013 - 04:30 AM

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.



#5 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 08 August 2013 - 08:52 PM   Best Answer

The only idea coming to mind is

Please Login or Register to see this Hidden Content

 

 

Of course, my mind these days has gone monorail (one track).







Also tagged with one or more of these keywords: phone number, iphone, ipad, google voice, change colors