Magento – magento2 theme development process step by step

magento2theme

How to create replicate theme of luma ?

I have register theme successfully. and see css files come from public/static/frontend/My Namespace.after googling get its like front-end cache.

How can i modify css file and how can override phtml file ?

Can Any one explain how can i create theme in magento 2 ? What is the structure for that ?

Best Answer

Make sure you have inherit theme from parent theme luma.

  1. Create theme directory app/design/frontend/MySite/MyTheme
  2. 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>

  1. 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__
);

  2. Login to admin panel, Go to Store->Configuration->design. Select your theme and save it.

  3. 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)

Related Topic