How to edit custom css In Magento 2 and we using porto theme

Question

How to edit custom css In Magento 2 and we using porto theme ?

I'm using this code base theme working

app/design/frontend/vendor_name/theme_name

run below command to set developer mode

php bin/magento deploy:mode:set developer

and clear cache and deploy static-content

php bin/magento cache:clean

php bin/magento setup:static-content:deploy

But porto theme not working

• Venu Joginpally: I am also using same theme, but its working for me. Where do you get the problem?
• SNS: app/design/frontend/Smartwave/porto/Magento_Theme/web/css/source/_module.less this link we change the css but not have problem not change in css
• SNS: and also we try to this link to change the css but not working app/design/frontend/Smartwave/porto/Smartwave_Porto/web/css/source/_module.less
• Venu Joginpally: Create custom module to change the css. Below link will help you to change the css. magento.stackexchange.com/a/108785/45181
• SNS: ok we try it.. but in theme css any change in the style it not working ?

Answer 1

We are using Same Porto Theme.

I recommend do not make changes in Porto Theme. Because they are upgrading their Versions. Once you upgrade to their latest version, your changes will be given.

So create your theme, by setting Porto as Parent.

magento\app\design\frontend\My\ThemeName\web\css\source\header.less
magento\app\design\frontend\My\ThemeName\web\css\source\footer.less

For how to create theme

http://devdocs.magento.com/guides/v2.1/frontend-dev-guide/themes/theme-create.html

Magento 2: How to override Luma Theme Home Page

magento\app\design\frontend\My\theme_name\theme.xml

<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
 <title>My Porto Child</title>
 <parent>Smartwave/porto</parent>
 <media>
 <preview_image>media/preview.png</preview_image>
 </media>
</theme>

At the End Run below commands

php bin/magento setup:upgrade
php bin/magento setup:di:compile
php bin/magento setup:static-content:deploy
php bin/magento indexer:reindex
php bin/magento cache:flush
chmod -R 777 var pub

• Max: Actually you don't need to static-content:deploy content if you are in developer mode. Just clear the following directories and you'll be fine to go. Note: first website call will be slow: $ rm -rf var/view_preprocessed/* var/cache/* var/page_cache/* pub/static/*. NEVER forget the *, otherwise the important .htaccess gets deleted.

Answer 2

To override LUMA consider as parent theme you need to change theme.xml file in folllowing location :

app\design\frontend\vendor_name\theme_name\theme.xml

using below code

<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
 <title>Your Theme name</title> <!-- your theme's name -->
 <parent>Magento/luma</parent> <!-- the parent theme, in case your theme inherits from an existing theme -->
 <media>
 <preview_image>media/preview.jpg</preview_image> <!-- the path to your theme's preview image -->
 </media>
 </theme>