So, what you’ve stumbled across is something I really don’t like about the Porto setup. They don’t 100% use a conventional structure. Kinda lazy coding IMO.
Anyway, in the case where you have
css/custom.css in the Porto Parent, this relates to a file somewhere in
pub/static/css/ (I think). I would say it’s safe to edit this
custom.css file. But if you want to be super-safe the override the
head.phtml file by putting it in your Porto Child and then change the name of the from
something.css and create a new file for it in the
pub/static/css/ folder. That would be totally upgrade proof.
Alternatively, just don’t use the
custom.css file and make your CSS changes it the appropriate documents as per the Magento Documentation.
Next, there’s the Custom Styles in the Porto Settings. These boxes create another CSS file (
settings.css or something like that). This file loads last when a page is generated, therefore overrides any existing CSS. There’s a couple of issues with this too:
- It’s a sticky-plaster solution when you can’t be bothered to make proper changes to CSS files
- It’s harder to find CSS because it’s another place to look
- Because it relies on an extra CSS file loading after everything else, it’s actually having a negative affect on page-load times.
I’m not perfect… I still have CSS in the Porto Settings Style box. However, I do have it on my TODO list to remove all CSS from these boxes and put in the appropriate files. As I’ve noticed that I have loads of CSS that overrides each other. For example, I might have a
<h1> Tag as
font-size: 16px, but then is being overridden by another file that says may it
font-size: 14px, but another file might say
font-size: 20px. Not sure if any of that makes sense.
Anyway, in a perfect world I would avoid putting CSS in both
custom.css and Custom Styles - And move any existing CSS in those locations to the appropriate files. But it’s not a perfect world, so I appreciate this might not happen. But it’s definitely something I want to change in my own project.