In this blog We will discuss how to create custom less theme in Magento2 ?
Step 01 : Create Directory Structure in Magento 2 Theme Development
Magento 2 themes are located in the /app/design/frontend
folder. First, Itβs necessary to create a Vendor folder and then create a theme folder inside of it.
For example: /app/design/frontend/V4U/Samplelesstheme
.
V4U is a vendor, Samplelesstheme is a theme folder.
Step 2: Declare Your Magento 2 Theme
Now you need to create the theme.xml file under app/design/frontend/V4U/Samplelesstheme/theme.xml
and use the code below:
<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
<title>V4U Sample Less Theme</title>
<parent>Magento/luma</parent>
<media>
<preview_image>media/logo.png</preview_image>
</media>
</theme>
In the <title>
tag insert theme name, in the <parent>
tag you have to define the parent theme name here I have added Magento/luma
as a parent theme. <preview_image>
tag is the tumbnail image to show the theme page for preview purpose.
The thumbnail image is located in app/design/frontend/V4U/Samplelesstheme/media/logo.png
Step 3 : Magento theme registration
To register your theme in the Magento system, you need to create a registration.php
file in your theme directory: app/design/frontend/V4U/sampletheme/registration.php
<?php
\Magento\Framework\Component\ComponentRegistrar::register(
\Magento\Framework\Component\ComponentRegistrar::THEME,
'frontend/V4U/Samplelesstheme',
__DIR__
);
Step 4 : Add Magento 2 Theme a Composer Package
To add composer package, you need to create a composer.json
file in your theme directory: app/design/frontend/V4U/sampletheme/composer.json
{
"name": "magento/sample-module-less-theme",
"description": "N/A",
"require": {
"php": "~5.6|~7.0|~7.1|~7.2|~7.3|~7.4",
"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 5 : Declaration of Theme Logo & Add Custom CSS
To declare a theme logo, create Magento_Theme/layout
directories and add the following code to a default.xml
file. The default.xml
file path is /app/design/frontend/V4U/sampletheme/Magento_Theme/layout/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">
<head>
<css src="css/custom.css"/>
<!-- <link src="js/custom.js"/> -->
</head>
<body>
<referenceBlock name="logo">
<arguments>
<argument name="logo_file" xsi:type="string">images/vp.png</argument>
</arguments>
</referenceBlock>
<remove name="report.bugs"/>
</body>
</page>
Step 6 : Add CSS file
To add custom css, create web/css
directories. The custom.css
file path is /app/design/frontend/V4U/sampletheme/web/css/custom.css
@media screen and (min-width: 768px){
.logo img{
width: 100px;
height: 100px;
object-fit: contain;
}
}
Step 7 : Import & Add Less File
To add custom less, create web/css/source/
directories. Add _extend.less
file here to add less. The file path is /app/design/frontend/V4U/Samplelesstheme/web/css/source/_extend.less
.
@import 'samplelesstheme/samplelesstheme.less';
Create samplelesstheme
directories. The less file path is /app/design/frontend/V4U/Samplelesstheme/web/css/source/samplelesstheme/samplelesstheme.less
.
h1{
color : green;
}
p{
color : blue;
}
Step 8 : Add Logo Image
To upload logo, create web/images
directories. The logo image path is /app/design/frontend/V4U/sampletheme/web/images/vp.png
Now run the following commands :
php bin/magento setup:upgrade
php bin/magento setup:static-content:deploy -f
php bin/magento cache:clean
Now You can set New Theme from Admin Panel Content->Design->Configuration->Edit->Default Theme->Applied Theme->Select Your New Theme->Save Configuration
.
DevDocs
Home
Happy Coding. Keep Liking & Sharing