How to Create Custom Theme

By | December 9th 2018 02:05:24 AM | viewed 297 times

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


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:

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


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": [
    "autoload": {
        "files": [

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

<theme xmlns:xsi="" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
    <title>Modak 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

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

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


Total : 9170

Today :12

Today Visit Country :

  • Vietnam
  • United States
  • Russia
  • Bangladesh
  • Germany