I am working on theming my Magento 2.2.1 store. I have purchased, installed, and activated the Porto theme. I have a phone number in the header that I need to change the color, but nothing I do seems to change it.
In my header, I have the following line:
<span style="margin-top:4px;color:#ffffff;display:block;">CALL US NOW<br><b style="color:#D92A2E;font-size:18px;font-weight:600;display:block;line-height:27px;">+1 XXX-XXX-XXXX</b></span>
The "CALL US NOW" text is displayed properly, but I can't get the phone number to change colors. I have changed D92A2E
to several other colors, but it never makes a change. However, changing the font size or text itself works fine.
I thought maybe the text color for the phone number is being overwritten elsewhere in Porto's settings, but I can't find anything that makes it change.
I am posting here on the off chance that someone knows something about why a "color" tag in CSS would just be ignored like this.
Any help is appreciated.
EDIT: I have "fixed" the issue by changing the telephone number from text to a link using an anchor tag and setting the color there. The line now reads (edited for privacy):
<span style="margin-top:4px;color:#ffffff;display:block;">CALL US NOW<br><b style="font-size:18px;font-weight:600;display:block;line-height:27px;"><a href="tel:XXX-XXX-XXXX" style="color:#FFD800">+1 XXX-XXX-XXXX</a>
After some searching though, I believe I found where the text color might be getting overwritten. In the backend, under Stores > Config > Mageplaza Extensions > Porto > Porto - Settings Panel > Customization Settings > Custom Style 1
, there is css that sets the style of the header, and I believe this to be where it was overwritten, although since changing the text to a tel link, I have not tweaked it enough to confirm this. I hope this will help anyone else facing a simliar issue.
Thanks to all who have answered this question for your help!
!important
rule e.g.color:#D92A2E !important;