Magento 2 - Create New Theme based on the blank theme

Question

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

Answer 1

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

Answer 2

You have to run the following commands in order to create symlinks for css and js files of your theme. After that these files should start loading on frontend:

First delete the current static theme files, if any, in order to apply newly added changes: grunt clean:<theme-name> This will remove all pub/static/frontend files of theme

To Republish symlinks to the source files to the pub/static/frontend/<Vendor>/<theme>/<locale> directory.

grunt exec:<theme-name>

To Compile.css files using the symlinks published in the pub/static/frontend/<Vendor>/<theme>/<locale> directory

grunt less:<theme-name>

Now clear var/cache,var/page_cache and then check.

Hope this helps.

Answer 3

Create your theme.xml as -

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

And after that copy folders Magento_Theme and web form blank to your theme.

Answer 4

After create and change theme you need to run following command in order to generate static css,js etc files

bin/magento  setup:static-content:deploy

Answer 5

Register your theme in below path

dev/tools/grunt/configs/themes.js

Like I did for my porto theme,

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

Answer 6

Locate into theme table of your database, find your theme name by theme_title column and change its type to 0 as physical theme type.