Phone Number Link – Change Color? – Themeco Community

Phone Number Link – Change Color?

mousie — Thu, 22 Jan 2015 23:32:00 +0000

I have a section on my website with a dark background, and I wrote some text in white. I also wrote a phone number, in white text.

I was doing some testing on iPhones and iPads, and the phone number automatically shows up as a link (so the user can click on it and the phone will call). I like that, but the number shows up in black text (which is hard to see).

How can I change the text so it remains white if it becomes a link? I’m not an html expert so I am not sure what to do.

Using Visual Composer, I have the text in a Custom Headline field (set to H2), and in the Style field I added “color: #ffffff;”

Is there an html code that I should wrap around the text? I hope this made sense.. thanks!

Reply To: Phone Number Link – Change Color?

Kory — Fri, 23 Jan 2015 17:52:52 +0000

Hey there,

Thanks for writing in! While I can’t see the specific example on your website, you could try some inline styling on your link like this to change the color of the link:

Link Text

The thing to focus on here is the style attribute and that you can add inline CSS this way. Simply copy and paste that and place it into your link’s opening tag and you’ll be good to go.

Thanks!

Reply To: Phone Number Link – Change Color?

mousie — Sat, 24 Jan 2015 02:02:03 +0000

Hi.. I don’t think that will work for my situation. The phone number isn’t really a link, and it shows up correctly as white font on computers and tablets. On some phones (such as iPhone), the phone number becomes a link and it seems the color is no longer white. Is there a way I can make it white if it turns into a link? I hope that makes more sense.

Reply To: Phone Number Link – Change Color?

mousie — Sat, 24 Jan 2015 07:27:37 +0000

This reply has been marked as private.

Reply To: Phone Number Link – Change Color?

Christian — Sun, 25 Jan 2015 10:24:12 +0000

Hey Mousie.

In that case, please give us access to your WordPress admin and FTP. But before that, please ensure you’ve cleared all caches and have cleared your browser history.

Thanks.

Reply To: Phone Number Link – Change Color?

mousie — Mon, 26 Jan 2015 05:44:52 +0000

This reply has been marked as private.

Reply To: Phone Number Link – Change Color?

Christopher — Mon, 26 Jan 2015 16:39:03 +0000

This reply has been marked as private.

Reply To: Phone Number Link – Change Color?

mousie — Tue, 27 Jan 2015 17:53:30 +0000

Hello. I tried the code for issue# 1 and it didn’t work. I borrowed a friend’s iPhone and the phone number still shows up as black text on both webpages.

For item #2, it looks like the a tag you gave me worked. The link is blue now. Is there a way to also change the hover color? I tried the css code but the link on the webpage is still the same color blue no matter what color I try to change it to.

Finally, is it possible for you to change your previous reply to a private post? I don’t think my friend wanted their URLs posted in a help forum (thanks for understanding).

Reply To: Phone Number Link – Change Color?

Zeshan — Wed, 28 Jan 2015 12:26:09 +0000

Hi Mausie,

#1: Please use this CSS code instead:

a[href^=tel], a[href^=tel]:hover{
    color: #fff;
    text-decoration: none;
}

#2: Yes, you can use following under Custom > CSS in the Customizer:

a.contact-us:hover {
   color: #000 !important;
}

Replace #000 with your desired color name or value (you can generate hex color codes from here).

#3: Sure, I have made that post private.

Hope this helps. 🙂

Thank you.

Reply To: Phone Number Link – Change Color?

mousie — Wed, 28 Jan 2015 15:53:34 +0000

Hi.. for #1: it didn’t work. I tried the css code and the phone number still shows up as black text.

And thank you for #2 and #3.