\n<\/a>What is the difference between them, and what do design areas have in common?
\n<\/a>What are design areas used for?
\n<\/a>How can design areas be utilized for custom themes or customizations?<\/a><\/p>\n
In terms of frontend, the Magento 2 areas are components that determine which modules and resources will be shown in particular area.<\/p>\n There are 3 types of areas in Magento 2:<\/p>\n If we address the differences between these areas, we can identify some files from Basic (base) that can be used in adminhtml and frontend. However, the adminhtml files cannot be used in the frontend. What is more, UI components can be used in adminhml, but not in the frontend. One thing that they have in common is their structure. I have already addressed the folder structure in Magento 2 on our blog.<\/p>\n Areas most commonly used in adminhtml<\/strong> and frontend<\/strong>:<\/p>\n Design areas can be used for:<\/p>\n In addition to that, let’s look into how to create a theme for admin panel.<\/p>\n To begin with, create a folder for the theme itself. I use the command line, but you can use your file manager for that purpose. Enter the following code in the command line:<\/p>\n Now we go to our folder and create the files with the following content:<\/p>\n registration.php, theme.xml.<\/strong> theme.xml:<\/strong><\/p>\n Let’s also create a module for the application of our theme. Write the following in the command line (make sure you do it in the root directory of Magento 2):<\/span><\/p>\n Create the following structure:<\/p>\n <\/p>\n Now let’s consider each file individually:<\/p>\n <\/p>\n <\/p>\n Now we can customize our theme a little, particularly change the logo. Create the following structure:<\/p>\n As you can see from the structure, the logo is located in the web\/logo.svg folder. You can read more on folder structure in Magento 2 (link) in my previous article. For now we are interested in the admin_login.xml<\/strong> file.<\/p>\n
\n![\"backround](\"https:\/\/belvg.com\/blog\/wp-content\/uploads\/2018\/11\/backround-3.png\" "\\"Magento")
<\/a><\/p>\n<\/a>Types of design areas in Magento 2<\/span><\/h2>\n<\/div>\n
\n
\n
<\/a>What is the difference between them, and what do design areas have in common?<\/span><\/h2>\n<\/div>\n
<\/a>What design areas are used for?<\/span><\/h2>\n<\/div>\n
\n
<\/a>How can design areas be utilized for custom themes or customizations?<\/span><\/h2>\n<\/div>\n
\n
mkdir -p .\/app\/design\/adminhtml\/BelVG\/theme<\/pre>\n
\nregistration.php:<\/strong><\/p>\n<?php\r\n\\Magento\\Framework\\Component\\ComponentRegistrar::register(\r\n \\Magento\\Framework\\Component\\ComponentRegistrar::THEME,\r\n 'adminhtml\/BelVG\/theme',\r\n __DIR__\r\n);\r\n<\/pre>\n
<theme xmlns:xsi=\"http:\/\/www.w3.org\/2001\/XMLSchema-instance\" xsi:noNamespaceSchemaLocation=\"urn:magento:framework:Config\/etc\/theme.xsd\">\r\n <title>BelVG Backend<\/title>\r\n <parent>Magento\/backend<\/parent>\r\n<\/theme>\r\n<\/pre>\n
mkdir -p .\/app\/code\/BelVG\/Theme\r\n<\/pre>\n
![\"the](\"https:\/\/belvg.com\/blog\/wp-content\/uploads\/2018\/11\/the-structure.png\" "\\"Magento")
<\/a><\/p>\n\n
<?php\r\n\\Magento\\Framework\\Component\\ComponentRegistrar::register(\r\n \\Magento\\Framework\\Component\\ComponentRegistrar::MODULE,\r\n 'BelVG_Theme',\r\n __DIR__\r\n);\r\n<\/pre>\n
\n
<?xml version=\"1.0\"?>\r\n<config xmlns:xsi=\"http:\/\/www.w3.org\/2001\/XMLSchema-instance\" xsi:noNamespaceSchemaLocation=\"urn:magento:framework:Module\/etc\/module.xsd\">\r\n <module name=\"BelVG_Theme\" setup_version=\"1.0\">\r\n <sequence>\r\n <module name=\"Magento_Theme\"\/>\r\n <\/sequence>\r\n <\/module>\r\n<\/config>\r\n<\/pre>\n
\n
<config xmlns:xsi=\"http:\/\/www.w3.org\/2001\/XMLSchema-instance\" xsi:noNamespaceSchemaLocation=\"urn:magento:framework:ObjectManager\/etc\/config.xsd\">\r\n <type name=\"Magento\\Theme\\Model\\View\\Design\">\r\n <arguments>\r\n <argument name=\"themes\" xsi:type=\"array\">\r\n <item name=\"adminhtml\" xsi:type=\"string\">BelVG\/theme<\/item>\r\n <\/argument>\r\n <\/arguments>\r\n <\/type>\r\n<\/config><\/pre>\n
![\"create](\"https:\/\/belvg.com\/blog\/wp-content\/uploads\/2018\/11\/create-the-following-structure.png\" "\\"Magento")
<\/a><\/p>\n
![\"logo](\"https:\/\/belvg.com\/blog\/wp-content\/uploads\/2018\/11\/logo-at-the-login-page.png\" "\\"Magento"){kind=logo}
<\/a><\/p>\n