Showing posts with label Custom theme. Show all posts
Showing posts with label Custom theme. Show all posts
Monday, 8 May 2017
Magento 2 : Create a custom frontend theme
Hello Friends,
Here is the code for how to create a custom theme for the front end in magento 2 !
Magento 2.X is a quite different process as compare of Magento 1.X, there are few easy steps for it !
Step 1 : Create a theme directory at below location,
app\design\frontend\Magento\custom
Step 2 : Now, Create 3 files inside custom directory,
A) composer (This is JSON file)
B) registration (This is PHP file)
C) theme (This is XML file)
Now, Copy/Paste below code in side related files,
Step A : composer (This is JSON file)
{
"name": "magento/custom-module-theme",
"description": "N/A",
"require": {
"php": "~5.6.0|7.0.2|~7.0.6",
"magento/theme-frontend-luma": "~100.0",
"magento/framework": "~100.0"
},
"type": "magento2-theme",
"version": "1.0.0",
"license": [
"OSL-3.0",
"AFL-3.0"
],
"autoload": {
"files": [ "registration.php" ]
}
}
Step B : registration (This is PHP file)
<?php
/**
* Copyright © 2016 Magento. All rights reserved.
* See COPYING.txt for license details.
*/
\Magento\Framework\Component\ComponentRegistrar::register(
\Magento\Framework\Component\ComponentRegistrar::THEME,
'frontend/Magento/custom',
__DIR__
);
Step C : theme (This is XML file)
<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
<title>Magento Custom Theme</title>
<parent>Magento/luma</parent>
<media>
<preview_image>media/preview.jpg</preview_image>
</media>
</theme>
Step 3 : Create directory at below mentioned location,
app\design\frontend\Magento\custom\Magento_Theme\layout
Step 4 : Inside \Magento_Theme\layout create file called default.xml
/* COPY & PASTE this code inside default.xml */
<?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">
<body>
<referenceBlock name="logo">
<arguments>
<argument name="logo_file" xsi:type="string">images/logo.png</argument>
</arguments>
</referenceBlock>
<remove name="report.bugs"/>
</body>
</page>
Step 5 : Create a media directory inside Magento\custom & upload preview.jpg file inside it !
Step 6 : Now, just run upgrade & deploy commands
A) php bin/magento setup:upgrade
B) php bin/magento setup:static-content:deploy
Here is the code for how to create a custom theme for the front end in magento 2 !
Magento 2.X is a quite different process as compare of Magento 1.X, there are few easy steps for it !
Step 1 : Create a theme directory at below location,
app\design\frontend\Magento\custom
Step 2 : Now, Create 3 files inside custom directory,
A) composer (This is JSON file)
B) registration (This is PHP file)
C) theme (This is XML file)
Now, Copy/Paste below code in side related files,
Step A : composer (This is JSON file)
{
"name": "magento/custom-module-theme",
"description": "N/A",
"require": {
"php": "~5.6.0|7.0.2|~7.0.6",
"magento/theme-frontend-luma": "~100.0",
"magento/framework": "~100.0"
},
"type": "magento2-theme",
"version": "1.0.0",
"license": [
"OSL-3.0",
"AFL-3.0"
],
"autoload": {
"files": [ "registration.php" ]
}
}
Step B : registration (This is PHP file)
<?php
/**
* Copyright © 2016 Magento. All rights reserved.
* See COPYING.txt for license details.
*/
\Magento\Framework\Component\ComponentRegistrar::register(
\Magento\Framework\Component\ComponentRegistrar::THEME,
'frontend/Magento/custom',
__DIR__
);
Step C : theme (This is XML file)
<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
<title>Magento Custom Theme</title>
<parent>Magento/luma</parent>
<media>
<preview_image>media/preview.jpg</preview_image>
</media>
</theme>
Step 3 : Create directory at below mentioned location,
app\design\frontend\Magento\custom\Magento_Theme\layout
Step 4 : Inside \Magento_Theme\layout create file called default.xml
/* COPY & PASTE this code inside default.xml */
<?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">
<body>
<referenceBlock name="logo">
<arguments>
<argument name="logo_file" xsi:type="string">images/logo.png</argument>
</arguments>
</referenceBlock>
<remove name="report.bugs"/>
</body>
</page>
Step 5 : Create a media directory inside Magento\custom & upload preview.jpg file inside it !
Step 6 : Now, just run upgrade & deploy commands
A) php bin/magento setup:upgrade
B) php bin/magento setup:static-content:deploy
Subscribe to:
Posts (Atom)