0

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

5
  • I am also using same theme, but its working for me. Where do you get the problem? Commented Dec 14, 2016 at 6:16
  • 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
    Commented Dec 14, 2016 at 6:25
  • 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
    – SNS
    Commented Dec 14, 2016 at 6:27
  • Create custom module to change the css. Below link will help you to change the css. magento.stackexchange.com/a/108785/45181 Commented Dec 14, 2016 at 6:36
  • ok we try it.. but in theme css any change in the style it not working ?
    – SNS
    Commented Dec 14, 2016 at 6:42

2 Answers 2

2

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
1
  • 1
    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.
    – Max
    Commented Sep 11, 2017 at 11:09
0

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>

Your Answer

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

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