Magento – Magento 2 – Create New Theme based on the blank theme

magento2theme

I'm new to Magento
I try to create a new theme based on the Magento blank theme
and I follow the Frontend developer guide in Magento web site but I could not inherit from Magento/blank and when I open the site it wants to load the CSS and javascript

I create these folders and files

TestVender/
└── TestTheme
    ├── etc
    ├── media
    │   └── TestPreview.jpg
    ├── registration.php
    ├── theme.xml
    └── web
        ├── css
        ├── images
        └── js

and theme.xml

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

and registration.php

<?php
/**
* Copyright © 2015 Magento. All rights reserved.
* See COPYING.txt for license details.
*/
\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::THEME,
    'frontend/TestVender/TestTheme',
    __DIR__
);

and I add this to
\var\www\html\magento\dev\tools\grunt\configs\themes.js

themename: {
        area: 'frontend',
        name: 'TestVender/TestTheme',
        locale: 'en_US',
        files: [
            'css/styles-m',
            'css/styles-l'
        ],
        dsl: 'less'
    },

could anyone help me to solve the problem?

and this is how my page look like when I open it

enter image description here

Best Answer

To apply a custom theme please follow below steps

Create a theme directory

To create the directory for your theme:

  1. Go to <your Magento install dir>/app/design/frontend.
  2. Create a new directory named according to your vendor name: /app/design/frontend/<Vendor>.

  3. Under the vendor directory, create a directory named according to your theme. (e.g. mytheme)

    in theme directory structure looks like this

app/design/frontend/
├── <Vendor>/ (my)
│   │   ├──...<theme>/  (themename)
│   │   │   ├── ...etc
│   │   │   ├── ...media
│   │   │   ├── ...web
|   |   |   |    ├── ...css
|   |   |   |    ├── ...images
|   |   |   |    ├── ...js
│   │   │   ├── registration.php
│   │   │   ├── theme.xml

Declare your theme

Add or copy from an existing theme.xml to your theme directory

app/design/frontend//

Configure it using the following example:

<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
     <title>blank</title> <!-- your theme's name -->
     <parent>Magento/blank</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>

Register your theme

in your theme directory add a registration.php file with the following content:

<?php
/**
* Copyright © 2015 Magento. All rights reserved.
* See COPYING.txt for license details.
*/
\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::THEME,
    'frontend/<Vendor>/<theme>',
    __DIR__
);

Where <Vendor> is your vendor name, <theme> is the theme code.

Configure Your theme

<your Magento install dir>dev\tools\grunt\configs\themes.js

    themename: {
        area: 'frontend',
        name: 'my/themename',
        locale: 'en_US',
        files: [
            'css/styles-m',
            'css/styles-l'
        ],
        dsl: 'less'
    },

flush your cache
apply your theme from admin Store > configuration > design

Related Topic