Inline CSS not working in Magento theme

Question

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!

Answer 1

If your other changes are working it sounds like a CSS specificity issue, to confirm this try adding !important like Bare Feet mentioned in the comments.

Inline styles and the use of !important are generally bad practice so I recommend actually extending/overwriting the theme's CSS rather than using inline styling.

Edit

It looks like an admin change as on the demo theme it already contains inline styling:

<span style="margin-top:4px;color:#787d7f;display:block;">CALL US NOW</span>

So what I suspect is happening is you're adding your inline styling and it's being overwritten by the values in the admin? There are colour customisation options with the Porto theme so you'll need to change it there.

Answer 2

Since adding !important did the job, that means the color hex code is set from somewhere automatically. Try finding settings for changing theme colors from your Magento Admin theme settings section.

Answer 3

Porto has extensive user-friendly settings available under the 'Smartwave' menu item in the admin area of Magento. This will be controlling the colour via a SASS variable which will overwrite the inline style unless !important added to inline CSS.

Many customisations are available for Porto from the theme's settings, but to really take control, you should investigate Magento's command line interface (CLI) and NPM. This is where it comes into its own and will take your knowledge of Magento and Porto to the next level. Porto is hugely popular so it's especially important to keep it up to date. Once set up in the CLI, you'll be able to apply security patches very quickly, protecting your work and saving hours/days.