Create a Custom Theme in Magento
A Magento theme is a combination of template files, CSS, and js files which all together create a visual experience of your Magento store. These files are located under these two folders.
1.) The “Skin” Folder – It has the CSS, Js, and Images.
/YourMagentoRoot/Skin/
2.) The “Design” Folder – It has the template files which display the HTML content.
You will learn the basic folder structure at the end of this blog in detail.
Step 1: Folder Creation
Go to the location where Magento is installed and then create these folders
- -> app/design/frontend/mss_package
- -> app/design/frontend/mss_package/default
- -> app/design/frontend/mss_package/default/layout
- -> app/design/frontend/mss_package/default/template
- -> skin/frontend/mss_package/default
Step 2: Copy all folders as well as files from
skin/frontend/default/blank/
To
skin/frontend/mss_package/default
Step 3: Configure in the Admin
Login to your Admin and go to System->Configuration->Design
In the package tab add our package name (mss_package) to Current Package Name field.
NOTE: The name in the “Current Package Name” field should be the same as the package you created in Step1 or else it will get the default package in Magento :
app/design/frontend/mss_package
If you want to confirm that you have setup the folder and files for new package properly then
Go to Admin->System->Design
Click on the “add new design” button
Open the Custom Design Dropdown to see the options
You will see that your package will be listed in the option. See below image.
You Can Select the package of your custom theme from here and click on the “save” button.
Step 4: Now go to Front-end and check.
It will look as follows:
Wow, you have created your 1st custom package for Magento. You can update the template files and add your custom blocks to your package. For more information about adding a custom block to your package click here.
