magento

CMS >> Magento >> Magento2 >> How to create custom theme

How to Create Custom Theme

By ukmodak | March 31st 2024 10:37:45 AM | viewed 862 times

Create a theme directory in the location: app/design/frontend/ as follows:

   app/design/frontend/ukm/modaktheme

Copy all file from the location: ..\vendor\magento\theme-frontend-luma\ and pass in the location: app/design/frontend/ukm/modaktheme/

Edit the file registration.php from the location:app/design/frontend/ukm/modaktheme and edit as follows:

	 <?php
		/**
		 * Copyright © Magento, Inc. All rights reserved.
		 * See COPYING.txt for license details.
		 */

		\Magento\Framework\Component\ComponentRegistrar::register(
		    \Magento\Framework\Component\ComponentRegistrar::THEME,
		    'frontend/ukm/modaktheme',
		    __DIR__
		);

Edit the file composer.json from the location:app/design/frontend/ukm/modaktheme and edit as follows:

	{
    "name": "ukm/modaktheme",
    "description": "N/A",
    "require": {
        "php": "~5.6.5|7.0.2|7.0.4|~7.0.6",
        "magento/theme-frontend-blank": "100.1.*",
        "magento/framework": "100.1.*"
    },
    "type": "magento2-theme",
    "version": "100.1.10",
    "license": [
        "OSL-3.0",
        "AFL-3.0"
    ],
    "autoload": {
        "files": [
            "registration.php"
        ]
    }
   }

Edit the file theme.xml from the location:app/design/frontend/ukm/modaktheme and edit as follows:

	
<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
    <title>Modak Theme>
    <parent>Magento/blank>
    <media>
        <preview_image>media/preview.jpg>
    </media>
</theme>

Edit the file default_head_blocks.xml from the location:app\design\frontend\ukm\modaktheme\Magento_Theme\layout and add as following code: to overwride css

	 <head>      
		<css src="css/ukmoverwrite.css" order="100" /> 
		<css src="css/ukmoverwrite-l.css" order="100" /> 
		<css src="css/ukmoverwrite-m.css" order="100" /> 
      </head>

create a css file ukmoverwrite.css,ukmoverwrite-l.css,ukmoverwrite-m.css in the location:app\design\frontend\ukm\modaktheme\web\css\ and add the following css code

.panel.wrapper {
	background-color: red !important;
	}

.copyright {
	background-color: red !important;
	color: #fff;
	display: block;
	padding: 10px;
	text-align: center;
	}

.header.content {
	padding: 5px 20px 0;
	}

h1 {
	font-size: 18px;
	margin-bottom: 16px;
	}

Login as administrator and flush cach from the location:system->cache management->flush magento cache or run the following command:

  htdocs/project>php bin/magento setup:upgrade
  htdocs/project>php bin/magento cache:flush

Note:do not disable cache at first.If do this, your site will be slow

If see modaktheme in the location: content->theme , then theme installation is ok

To set up theme details(fevicon icon,site name. logo,watermark etc) go to location content->configuration , then input necessary info

Latest Tutorial