2

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 ?

Improve this question
1
  • Do you know any tutorial where 'parent' theme is not used?
    – Tomash Khamlai
    Commented Mar 14, 2018 at 1:45

4 Answers 4

Reset to default
3

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)

Improve this answer
3
  • I think you are missing part of the question, how do you modify/override css file? In magento 2 docs says add _theme.less to the 'frontend/MySite/MyTheme/web/css/source/ folder. But it does nothing, even if i delete cache from the Admin "Flush Static Files Cache" option, even if I run grunt clean:MyTheme then grunt exec:MyTheme then grunt less:MyTheme, nothing works. All i want is to modify .logo style for example as display:none.
    – crashtestxxx
    Commented Dec 29, 2015 at 23:38
  • @crashtestxxx Check my updated comment. Add .logo{display:none} in your custom css file (mystyle.css) or add it in extended _theme.less file.
    – Bal Singh
    Commented Dec 31, 2015 at 11:59
  • Bal Singh thank you, Method 2 is what Im using for Luma as a parent theme. Problem I having now is that I constantly have to reload my Varnish cache after each mystyle.css update. Even tho I am running it in the developer mode, even after I flush the static cache, including magento cache:(clean/flush). Does anyone having a same issue, or its somewhere in my varnish setup that I missed?
    – crashtestxxx
    Commented Dec 31, 2015 at 16:33
1

The doc should be a good start... http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/bk-frontend-dev-guide.html

Improve this answer
1
  • I have refer that and I had register theme successfully but not able to override whole theme. after activate theme home page content not display
    – Mage2 Developer
    Commented Dec 7, 2015 at 8:57
1

Cleaning cache didn't work for me too, instead before running commands like grunt less:YourTheme, I had to delete files inside these directories manually: pub/static/frontend/YourVendorName/YourTheme/, var/cache/ and var/view_preprocessed

Also see http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/css-topics/css_debug.html

Improve this answer
0

Add a new theme in the Magento2 steps are the following:

Step : 1 Create a directory for the theme under app/design/frontend/<your_vendor_name>/<your_theme_name>

My Current <vendor_name> -> Magento & <theme_name> -> Apple

Step : 2 Add a declaration file theme.xml and optionally create etc directory and create a file named view.xml to the theme directory.

app/design/frontend/Magento/Apple/theme.xml

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

Step : 3 Add a composer.json file.

app/design/frontend/Magento/Apple/composer.json

{
    "name": "magento/theme-frontend-apple",
    "description": "N/A",
    "require": {
        "php": "~5.5.0|~5.6.0|~7.0.0",
        "magento/theme-frontend-luma": "100.0.*",
        "magento/framework": "100.0.*"
    },
    "type": "magento2-theme",
    "version": "100.0.2",
    "license": [
        "OSL-3.0",
        "AFL-3.0"
    ],
    "autoload": {
        "files": [
            "registration.php"
        ]
    }
}

Step : 4 Add registration.php app/design/frontend/Magento/Apple/registration.php

<?php

\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::THEME,
    'frontend/Magento/Apple',
    __DIR__
);
?>

Step : 5 Create directories for CSS, JavaScript, images, and fonts. app/design/frontend/Magento/Apple/

Step : 6 Configure your theme in the Admin panel.

enter image description here

Improve this answer
1
  • Thank you for explaining what Magento 2 docs already have, captain obvious. It seems that Yogesh was already be able to register his theme. The first question he had is how to modify the css file. In my case adding _theme.less to the frontend/Magento/Apple/web/css/source/ folder does nothing even after clearing all the cache, see my comment above for -Bal Singh.
    – crashtestxxx
    Commented Dec 29, 2015 at 23:46

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.