Magento Expert Forum - Improve your Magento experience
Magento template design and development - Part 1 - Introduction
The first step in any magento customization is design changes (both CSS and HTML Changes). Magento comes with a default theme, but usually people require some changes in their theme depending on their websites. Minor text add/edits, layout changes and other changes are usually required.
Magento template system is very powerfully, it gives you the ability to change almost anything. The template system consists of layout xml files, css files and phtml files. In a typical PHP application, we have HTML/PHP and CSS files where we create/edit the design/layout of the website. But in magento we have .phtml files to do the job html files. Magento follows MVC architecture and .phtml file do the job of VIEW. phtml are meant only for creating the structure of a page through html/php. They can be used to write complex php codes as well, but generally magento doesn’t follow this standard.
The default folders in magento which contain css and phtml files are:
- CSS: skin\frontend\default\default\
- PHTML: app\design\frontend\base\default\template\
- Layout: app\design\frontend\base\default\layout\
Before going into magento development we need to remember few things (general good practices to follow, not compulsory):
1. We should never to change magento core files. The reason being, whenever magento is updated all core files are overwritten. So if you make changes in core files those changes will be lost. Core files means, files that come with default magento package. All php, xml and .phtml files where magento code is written.
2. Always remember to turn of magento cache before starting development work. If cache is Turned On, your latest change might not show up in magento. To turn off cache you need to go to magento admin. From top menu go to System -> Cache Management. Then select all cache types and disable them. See image below:
Now let’s start with a very simple task: We will simple remove the default magento logo from the header.
To do this, first we need to know which file to make the changes. For this, magento has a system called Template Path Hints. After enabling temple path hints, you need to refresh your magento home page, you see red color boxes, with paths of phtml files in them. Basically, magento tell you from which file has the current content on the page is coming from. So as you can see from the hints, that header comes from the phtml frontend/base/default/template/page/html/header.phtml , we can simply edit this file and remove the logo.
But, since as a general we should not edit any magento core files, we will create our new theme. In this theme we will do our edits and tell magento to use our theme instead of default theme.
To create a new theme in magento, open magento admin and go to System->Configuration->General->Design->Themes
Follow steps below to create a new theme
1. Let say our new theme name is “newtheme”. To implement the theme make entries like show in image.
2. Next need to first create folders for our theme. For the PHTML files, create folder named “newtheme” in app/design/frontend/default/ and copy the contents of app/design/frontend/base/default into it. See Screenshot
3. And for CSS files, create a folder name “newtheme” in skin/frontend/default/newtheme and copy the content of skin/frontend/default/default into. See Screenshot
To test your new theme, enable template path hints again and see if files from your theme are shown there or not. You can now make changes to your theme instead of default theme.
So to remove the magento logo, go to the header.phtml file in your new theme and remove the HTML for the logo.
View more threads in the same category:
Last edited by jaredovi; 16-04-2013 at 02:33 AM.
Very useful to start with magento template coding, thanks.
this guide is really very helpful for those who are fresher to magneto designing & development.
Got a question: is it possible to use a Joomla Template in Magento?
I'd like to use this one http://themeforest.net/item/proma-jo...mplate/3897027
The thing is, I like the theme very much and want to use it in a Magento store.
Really helpful information.. I will use it now. I will start to design websites in magento. I am designer work at fast recruitment website company.
Great share for the startup...!!!
Currently, many design and development shops for Magento exist around the globe. You can locate these via a simple Google search. However, if you want a specific development and design for Magento, it is recommended that you describe your requirements exactly. You can also go with http://www.contus.com/magento-development.php..., who can assist you further.
will have a perfect day with light front Magento
Last Post: 22-07-2016, 10:48 AM
Last Post: 13-11-2015, 03:40 AM
By flamefox15 in forum Joomla
Last Post: 18-03-2015, 08:09 AM
By phuc2x in forum HTML, XHTML, CSS, Design Questions
Last Post: 04-03-2014, 10:17 AM
By rocker in forum Programming & Development
Last Post: 29-04-2013, 02:37 AM
Tags for this Thread