Child theme in Porto for Magento 2

[rintoug]

Hello,

I have started my Magento 2 project with the Porto theme. I have created a child theme for Porto and started working on it. But now my main problem is, not sure about the best practices when using a child theme especially a third-party theme. I have these questions in mind

1. Which CSS file I should work on - keeping upgrade in mind?
2. Which files I should not touch?

Please advise

[digitalstartup]

The following articles would be a good place to start with your research, as I fear my asnwers may raise more questions:

• Frontend Developer Guide
• Theme inheritance
• Create a new storefront theme
• Simple ways to customize a theme’s styles
• Less Functions

But to touch on your questions:

• Only edit files in your Child Theme. Baring in mind some CSS files are to “extend” and others are to “override”. This is talked about in the aforementioned links
• Don’t touch anything in the Parent Theme

If you’re considering Magento 2 Frontend Development as a career, you should consider enrolling in Official Magento Training (which will soon be migrating to Adobe Digital Learning Services.

[rintoug]

Thanks Craig for the reply. I will go through the articles.

But my main concern is the following lines of code in the head.phtml in Porto.

This hardcoded lines seem final CSS for the theme. So if I use the _extend.less or any other method it won’t override the changes as the Magento default styles loads before this. They’ve given a text box in the admin customization section to add the additional customization for the CSS, but it doesn’t look professional. Is there any other way to override the CSS

Thanks

[digitalstartup]

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.

Head.phtml

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 custom.css to 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.

Porto Settings

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.

Summary

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.

[rintoug]

Thanks Craig for the time you’ve spent.

You are 100% right. They designed this CSS files arrangement in a bad way to be honest. I would try to move these CSS from the text boxes to relevant files in the theme-Magento way- as it make more sense. Thanks for pointing me in this direction. This theme is for the people those who doesn’t want to touch anything, but just install, change the logo, and run a shop.

[digitalstartup]

Agreed. Porto was definitely built for the end-user and not the developer.