In this article, we will create a custom theme in Magento 2. We cover a few things like Magento theme declaration, registration, applying it in the admin panel, creating directories for CSS, JavaScript, images, and fonts, etc.
<!-- /** * Created By: Dolphin Web Solution Pvt. Ltd. */ --> <theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd"> <title>Dolphin 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/preview.png</preview_image> <!-- the path to your theme's preview image --> </media>
Note: Make sure you added preview.png file at app/design/frontend/Dolphin/custom_theme/media/ directory location.
In order to register a theme in the system, in the theme folder you should create a registration.php file at app/design/frontend/Dolphin/custom_theme/ and paste the below code :
<?php /** * Created By : Dolphin Web Solution Pvt. Ltd. */ \Magento\Framework\Component\ComponentRegistrar::register( \Magento\Framework\Component\ComponentRegistrar::THEME, 'frontend/Dolphin/custom_theme', __DIR__ );
You can create a _extend.less file at app/design/frontend/Dolphin/custom_theme/web/css/source/ like as below code:
& when (@media-common = true) { p { font-size: 16px; } }
Your theme directory structure will look like below.
app/design/frontend/<Vendor>/ ├── <theme>/ │ ├── etc/ │ │ ├── view.xml │ ├── web/ │ │ ├─css/ │ │ │ ├─source/ │ │ │ ├─_extend.less │ │ │ │ │ ├─Fonts/ │ │ │ ├─font.ttf │ │ │ │ │ ├─images/ │ │ │ ├── logo.svg │ ├── registration.php │ ├── theme.xml
php bin/magento s:up php bin/magento s:s:d -f php bin/magento c:c
Now, check your theme is added to the theme list or not.
To apply your custom theme :
That’s it!
I hope this technical blog will help you to find what you were looking for.
For more related to this blog is here:
That’s all, If you have any further questions about Magento 2 theme development or if need any help from our Magento 2 expert, contact us now for a free consultation.
Bookmark it for your future reference. Do comment below if you have any other questions.
P.S. Do share this note with your team.
Do not miss a chance to grab exciting offers on Magento Development at Dolphin Web Solution. We are providing discounts on various Magento services this season. Go and grab yours today at our Magento Store.