Magento 2.0 Has a different theme structure than Magento 1.x.
Like Magento Module ,Magento 2.0 it must have a Namespace/Vendor name to create a theme.
Lets take a look app/design/frontend in the folder we will find a folder Name Magento which is the vendor name.
Now we will create our theme in our Vendor Name.
Lets create a directory name 'United' which is our vendor name under 'app/design/frontend'.
under the 'United' directory create the theme that you want .
lets create our theme name 'mytheme'.
So, we will create our theme 'mytheme' under 'United' directory.
Under 'mytheme' directory we will create
theme.xml,
registration.php,
comopser.json,
web and
media directory.
So, our theme folder structure will same as following.
app/design/frontend/United/mytheme/
—-theme.xml
—-web
—-etc
—-registration.php
—-composer.json
—-media
Lets describe the theme structure. If you see the root directory there is no 'skin' folder.
so the web directory will work as 'skin' where we will place css,js,images folders.
lets open the theme.xml and add the following code
Mytheme
Magento/blank
media/preview.jpg
Lets describe the code . 'title' tag is the title of our new theme and the parent them will play as base them in magento 1.x.
if we go pub/static/frontend/Magento we will find a folder name blank which we will use as our parents theme.
(note : if not located on above folder do find under vendor/magento/theme-frontend-blank)
The new feature of Magento 2.0 is we can use any theme as our parents theme.
after complete the theme mytheme we can create our another them mytheme2 using mytheme as a parents.
add a preview.jpg image in media directory for theme preview.
Now in the compser.json file we will add the following code.
{
"name": "magento/mytheme",
"description": "N/A",
"require": {
"php": "~5.5.0|~5.6.0|~7.0.0",
"magento/theme-frontend-blank": "100.0.*",
"magento/framework": "100.0.*"
},
"type": "magento2-theme",
"version": "100.0.2",
"license": [
"OSL-3.0",
"AFL-3.0"
],
"autoload": {
"files": [
"registration.php"
]
}
}
Now in the registration.php file we will add the following code.
This will register your theme in the system. so the theme.xml and registration.php will be the main file of your theme.
In etc forder you can add a view.xml
copy form pub/static/frontend/Magento/blank folder.
(or if not found there vendor/magento/theme-frontend-blank)
it has some interesting setting.
Now create 'images' folder inside 'web' folder
Example: /app/design/frontend/United/mytheme/web/images/
Add a logo image to the theme:
you need a '.svg' extension file name of logo , to convert your logo
use any online tool ex:
https://convertio.co/png-svg/
Now put your logo.svg file ex: /app/design/frontend/United/mytheme/web/images/logo.svg
Clear the cache from magneto admin panel.
Then From STORE->Configuration->Design section we will find out our theme 'mytheme' .
Select it from dropdown and save the settings.
If any issue with static content deply , follow below steps
Command to deploy static files :
php -f magento setup:static-content:deploy
note : right click
/bin then select 'Open command window here' , before using command ,you must have already installed composer in your system. If you have not installed composer ,download from here https://getcomposer.org/Composer-Setup.exe (for windows)
Now you are with your new theme mytheme !!!!.
Add our custom css file
(ref. include css :
http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/css-topics/css-themes.html)
Copy folder 'Magento_Theme' from 'vendor\magento\theme-frontend-blank\' to your theme folder
example path :app\design\frontend\United\mytheme\Magento_Theme
Remove 'web' folder from 'Magento_Theme' folder .
Now open 'default_head_blocks.xml' found under app\design\frontend\United\mytheme\Magento_Theme\layout
and add below code to section
So after adding it looks like
Now, Create 'css' folder inside \app\design\frontend\United\mytheme\web
After create a file 'customtheme.css' in the 'css' folder
example path :\app\design\frontend\United\mytheme\web\css\customtheme.css
then put required css
ex:
.page-wrapper {
background-color: #333;
}
Now, Refresh your cache from admin->config ( ir required deply static content from command line as described above .)
Now , it will show new background color .
note :
If you editing your css example inside \app\design\frontend\United\mytheme\web\css\customtheme.css,
delete 2 folders
1) 'static' folder found under 'pub/'
2) 'cache' folder found under 'var/'
Understand how magento templates,layout loads
1st default template file is vendor\magento\module-theme\view\base\templates\root.phtml
magento 2 builds html structure from xml files
next important file to build page-wrapper, columns is
vendor\magento\module-theme\view\base\page_layout\empty.xml
Then it loads files from below folder according to page request
vendor\magento\module-theme\view\frontend\page_layout
Customizing layout for our theme
Copy folder 'page_layout'
from vendor\magento\module-theme\view\frontend
to app\design\frontend\United\mytheme\Magento_Theme
Now, if you need to add our own div with class or id ,we have to declare inside files of app\design\frontend\United\mytheme\Magento_Theme\page_layout
example inside these files :
1column.xml
2columns-left.xml
2columns-right.xml
3columns.xml
ref. http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/layouts/layout-extend.html
( Note : you must clear your cache , put some block inside containers from admin Content->widget .
Consider if you editing previously created widget ,it does not work because it created for another theme .
So do create new widget by selecting our current theme . )
Also customize global containers/blocks of our theme inside default.xml
located under app\design\frontend\United\mytheme\Magento_Theme\layout\
create global container (for all pages ) ex:
So, files looks quite similar below
......
..........
..........
HTML to Magento Theme
- Copy your css files code to the file created in previous step i.e customtheme.css in our example
inside app\design\frontend\United\mytheme\web\css
- Copy your HTML template's images to app\design\frontend\United\mytheme\web\images
- Start customizing files located under app\design\frontend\United\mytheme\Magento_Theme
according to our HTML's template div, class requirements .
Here we have to add,alter containers or blocks in these files .
Explained in above steps of 'Customizing layout for our theme' .
That's it initially it took long steps but just for the first time.
If you want to create another theme having some experience , it doesn't take too much time .
Feel free to put below any comments ,I will try to reply soon .