0

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!

3
  • try adding the !important rule e.g. color:#D92A2E !important;
    – Greg
    Jan 2, 2018 at 16:55
  • Great :) Glad it did work.
    – Greg
    Jan 2, 2018 at 17:09
  • as its a custom theme from third party ( i used the porot theme in Wordpress there are few theme option created in admin panel as wel) you can check in admin panel first, otherwise extend the theme
    – inrsaurabh
    Jan 2, 2018 at 18:44

3 Answers 3

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.

4
  • Yeah, I was worried about using it too but I think I'll use it until I get a more concise answer about this issue. Thanks for your help.
    – k.x
    Jan 2, 2018 at 17:26
  • It isn't so much an issue, it sounds like the CSS in the theme is using !important as that is more specific that inline styling. If that is the case the only fix is to either use !important yourself or to remove it from the theme's CSS.
    – Ben Crook
    Jan 2, 2018 at 17:40
  • @k.x I've just updated my answer, after looking at one of the Porto demo theme it appears to be an admin settings - newsmartwave.net/magento2/porto/demo1_en
    – Ben Crook
    Jan 2, 2018 at 19:34
  • 1
    Hi Ben. I believe you are correct. I have edited my question to show exactly where I believe the setting to be located in the Porto settings and accepted your answer. Thanks again for your help.
    – k.x
    Jan 3, 2018 at 15:11
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.

2

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.