Magento – Where to place Magento 2 Theme customizations

cssless-cssmagento2theme

I installed Magento 2 via Composer and it does not have a directory for theme in frontend. I tried to create a new theme in app/design, every time I create registration.php I get an error.

Question
Is it possible to edit the CSS file in vendor/Magento/theme-frontend-blank? Will the changes take in effect on front-end?
I am confused to where should the theme customization should be done. When I use Firebug I see that the location of the CSS files are directing me to pub/static/

Best Answer

In Magento 2, there is a term called static content deployment. You see js/css files links coming from pub/static/ directory because Magento deploys js/css files to this directory from your theme/module directory and whenever a user visits website, static files and referred/shown from pub/static/ directory.

Initially you will be developing your frontend theme in app/design/frontend/ and you can deploy static content to pub/static/frontend/ using command php bin/magento setup:static-content:deploy. During development you should delete everything inside pub/static/, var/cache/, var/page_cache/, var/generation/ and deploy you content using above command.

Here is basic theme configuration example which goes inside app/design/frontend/MyStore/MyAbstract/

theme.xml

<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
<title>Mystore</title>
<parent>Magento/blank</parent>
<media>
    <preview_image>media/preview.jpg</preview_image>
</media>
</theme>

registration.php

<?php
\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::THEME,
    'frontend/MyStore/MyAbstract',
    __DIR__
);

Put preview image preview.jpg (you can change name is theme.xml) inside media directory and you should see your theme in admin section store configuration.

Related Solutions

Magento – magento2 theme development process step by step

Make sure you have inherit theme from parent theme luma.

Create theme directory app/design/frontend/MySite/MyTheme
Create theme.xml file under app/design/frontend/MySite/MyTheme and configure it using following content:

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

Add registration.php file in theme directory (MyTheme) and content of this would be

 <?php

\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::THEME,
    'frontend/MySite/MyTheme',
    __DIR__
);

Login to admin panel, Go to Store->Configuration->design. Select your theme and save it.
Refresh magento cache, it will work.

How to override/modify css file

You can modify the style(css) of your theme by 2 ways. Method 1 - By overriding _theme.less file in your theme. Method 2 - By including custom css file in your theme.

Method 1 - To overriding _theme.less file in your theme, you need to copy _theme.less file of your parent theme. Then add your style or override class/id of style sheet. Path of _theme.less file in your theme should be app/design/frontend/MySite/MyTheme/web/css/source/_theme.less.

Method 2 - Create new custom css file (mystyle.css) in your theme (app/design/frontend/MySite/MyTheme/web/css/mystyle.css). Then to include it in all pages, you need to modify default_head_blocks.xml file of Magento_Theme module. Extend the Magento_Theme module in your theme, and including the required stylesheets in this file. Your custom default_head_blocks.xml file path should be app/design/frontend/MySite/MyTheme/Magento_Theme/layout/default_head_blocks.xml. Content of your default_head_blocks.xml file should be like: -

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <css src="css/styles-m.css" />
        <css src="css/styles-l.css" media="screen and (min-width: 768px)"/>
        <css src="css/print.css" media="print" />
        <css src="css/mystyle.css"/>
    </head>
</page>

Note: Clear your magento cache (Flush Magento Cache)

Magento – static content deploy not working for custom theme

You must have add web folder from parent theme into your theme. After add this folder into your theme you have to run command for deploy.

php bin/magento setup:static-content:deploy

Best Answer

Related Solutions

Magento – magento2 theme development process step by step

Magento – static content deploy not working for custom theme

Related Topic