Magento 2: How to override Luma Theme Home Page
Вопрос
I'm using Magento 2 CE Version 2.1.0 on WAMP Windows 10
I already referred
Magento 2: How to override mini-cart default template html file?
Would like to override Magento 2 Default Luma Theme
I have below folder structure
magento2
|_ app
|_ design
|_ frontend
|_ Custom
|_Theme
|_Magento_Theme
|_templates
|_root.phtml - Copy of Luma
registration.php
theme.xml
app\design\frontend\Custom\Theme\Magento_Theme\registration.php
\Magento\Framework\Component\ComponentRegistrar::register(
\Magento\Framework\Component\ComponentRegistrar::THEME,
'frontend/Custom/Theme',
__DIR__
);
app\design\frontend\Custom\Theme\Magento_Theme\theme.xml
<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
<title>My Theme</title>
<parent>Magento/luma</parent>
</theme>
I run php bin/magento setup:static-content:deploy
& clear cache as well. It's not displaying my newly created Theme in Admin -> Content -> Design -> Configuration
. Edit Dropdown List.
What I'm still missing?
Решение
When creating any new theme or module you need to define registration.php file at root of your module or theme folder.
Always use theme name in lowercase, Because Magento used this standard for theme name declaration.
You haven't any problem for keep Theme name in camelcase but use standard way is much appreciated.
You have to define registration.php file inside Magento_Theme folder, its in wrong place.
Correct diagram of theme structure will be below,
magento2
|_ app
|_ design
|_ frontend
|_ Custom
|_theme
|_Magento_Theme
|_templates
|_root.phtml - Copy of Luma
|_registration.php
|_theme.xml
Your path for registration.php is app\design\frontend\Custom\theme\registration.php
registration.php file :
<?php
\Magento\Framework\Component\ComponentRegistrar::register(
\Magento\Framework\Component\ComponentRegistrar::THEME,
'frontend/Custom/theme',
__DIR__
);
your theme.xml file path will be,
app\design\frontend\Custom\theme\theme.xml
theme.xml file :
<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
<title>Custom Theme</title>
<parent>Magento/luma</parent>
<media>
<preview_image>media/preview.jpg</preview_image>
</media>
</theme>
After all setup is completed, don't forget to run deploy command for the theme,
php bin/magento setup:static-content:deploy
Check inside your admin panel, Content -> Design -> Configuration
for set your custom theme.
Remove cache and check in the frontend.
Другие советы
you place theme.xml and registration.php in wrong place, the actual location is
app/design/frontend/<vendor>/<theme>/registration.php
<?php
/**
* Copyright © 2016 Magento. All rights reserved.
* See COPYING.txt for license details.
*/
\Magento\Framework\Component\ComponentRegistrar::register(
\Magento\Framework\Component\ComponentRegistrar::THEME,
'frontend/<vendor>/<theme>',
__DIR__
);
app/design/frontend/<vendor>/<theme>/theme.xml
<!--
/**
* Copyright © 2016 Magento. All rights reserved.
* See COPYING.txt for license details.
*/
-->
<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
<title>Vendor Theme</title>
<parent>Magento/luma</parent>
<media>
<preview_image>media/preview.jpg</preview_image>
</media>
</theme>
note: place preview.jpg in app/design/frontend/<vendor>/<theme>/media/preview.jpg
these two files enough to getting your theme list in Admin, then apply your theme.
If you would like to override luma templates for example app/code/Magento/Catalog/view/frontend/templates/product/view/addtocart.phtml
, you can make the changes of that template in app/design/frontend/<vendor>/<theme>/Magento_Catalog/templates/product/view/addtocart.phtml
Incorrect path you have used.
Follow bellow instruction for creating new custom theme.
Create theme.xml file in
/app/design/frontend/Custom/Theme/theme.xml
with below code.
<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
<title>Custom Theme</title>
<parent>Magento/luma</parent>
<media>
<preview_image>media/preview.jpg</preview_image>
</media>
</theme>
Create registration.php file in app/design/frontend/Custom/Theme/registration.php
with below code.
\Magento\Framework\Component\ComponentRegistrar::register(
\Magento\Framework\Component\ComponentRegistrar::THEME,
'frontend/Custom/theme',
__DIR__
);
copy preview.jpg from
vendor/magento/theme-frontend-luma/media/preview.jpg
add to
app/design/frontend/Custom/Theme/media/preview.jpg
Now you can see your custom theme in admin, select custom theme from admin and save it.
The magic your looking for is taught @ https://www.codextblog.com/magento-2/create-a-custom-child-theme-from-luma-theme/
in short what's missing from all answers is copy files _theme.less and _extends.less from magento-theme-luma/web/css/source/ directory to your custom theme directory/web/css/source.
Refer to: https://devdocs.magento.com/guides/v2.4/frontend-dev-guide/css-guide/css_quick_guide_approach.html for specifics on what and how to extend/override