[mousieParticipant]

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!

[KoryKeymaster]

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:

<a href="#" style="color: #fff;">Link Text</a>

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 <a> tag and you’ll be good to go.

Thanks!

[mousieParticipant]

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.

[mousieParticipant]

This reply has been marked as private.

[ChristianModerator]

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.

[mousieParticipant]

This reply has been marked as private.

[ChristopherModerator]

This reply has been marked as private.

[mousieParticipant]

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

[ZeshanMember]

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.

[mousieParticipant]

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.

[mousieParticipant]

Follow up: for the iphone phone number, I found this code:

a[href^=tel] { color: inherit; text-decoration: none; }

It worked perfectly on the homepage, but the font still shows up as black font on the About Us page.

Thoughts?

[Paul RModerator]

Hi,

You can add this under Custom > CSS in the Customizer.

.page-id-2 a[href^=tel] { color: inherit !important; text-decoration: none; }

Hope that helps.

[Author]

Posts