2

I'm new to Magento I try to create 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 want load the css and javascript

I create this 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 any one help me to solve the problem?

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

enter image description here

  • what is the problem you are facing? It's not clear to me – Marius Jan 5 '16 at 11:23
  • The Theme want load the css and javascript it seam to be it did not inherit from magento/blank – Salim Jan 5 '16 at 13:47
4

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

  • Thanks guys for your help I did all of that and I have the same porblem – Salim Jan 5 '16 at 14:45
0

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.

  • Thank you guys for your help but when I run grunt clean:Theme I get this message ----------------------------------------------- /var/www/html/magento/dev/tools/grunt/configs/themes.js:56 TestTheme: { ^^^^^^^^^ Loading "Gruntfile.js" tasks...ERROR >> SyntaxError: Unexpected identifier Warning: Task "clean:TestTheme" not found. Use --force to continue. Aborted due to warnings. ----------------------------------------------- – Salim Jan 5 '16 at 14:40
  • are u able to run other commands ? if clean isn't working, then simply go to pub/static/frontnend/<Vendor> folder and delete your theme's folder from there if it exists. then proceed with rest of the commands – Reena Parekh Jan 6 '16 at 5:43
  • Hi Reena Parekh Thank you for your time I found out the couse of the problem was this code in dev\tools\grunt\configs\themes.js file ---------------------------------- TestTheme: { area: 'frontend', name: 'TestVender/TestTheme', locale: 'en_US', files: [ 'css/styles-m', 'css/styles-l' ], dsl: 'less' },*/ ---------------------------------- – Salim Jan 6 '16 at 9:33
  • when delete it the grunt clean:TestTheme work but I get different error ------------- Running "clean:TestTheme" (clean) task Verifying property clean.TestTheme exists in config...ERROR >> Unable to process task. Warning: Required config property "clean.TestTheme" missing. Use --force to continue. Aborted due to warnings. Execution Time (2016-01-05 05:14:14 UTC) loading tasks 156ms ▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇ 95% loading grunt-contrib-clean 3ms ▇▇ 2% clean:TestTheme 5ms ▇▇▇ 3% Total 165ms ------------------ – Salim Jan 6 '16 at 9:34
  • do you know why I get this error – Salim Jan 6 '16 at 9:35
0

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.

0

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
-1

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.