How to create custom magento theme

Magento

Posted on 30 May 15 by Vickey
  495



If you are new in magento then this blog for you.after install magento you need to change your front end design or theme according to your requirement so that you can give new look to the website.In this blog first we understand the structure of Magento theme. when you go in "app/design/frontend" you will see some default themes directory for example

app/design/frontend/default

app/design/frontend/base

these are the default themes in magento. Now go to "/skin/frontend" directory here you will see the same directory as you see in "app/design/frontend". In "/skin/frontend" directory default css and images are stored

so lets start to create new custom theme

Step 1: got to directory "app/design/frontend" and create a copy of "base" directory and rename it which name you want to give your new theme here i am renaming it to newtheme

Step 2: now open directory "/skin/frontend" and copy "default" directory and rename it with the name of your new theme now you have create your new theme

Step 3: Now login your admin pannel and open system >> Design here you will see a button "Add Design Change" click on it and you will see a form name a "General Settings" select your theme under theme package for example as i am using my custom theme "newtheme" then i will select newtheme >> defualt and save this.now my new theme has been set. But this will look like defualt theme so we need to edit this

Step 4: First go directory "/js" which is located at your magento root folder and put your all js files here.

Step 5: Got to directory "/skin/frontend/newtheme/default" and put your css and images here

Step 6: Now go to "/app/design/frontend/newtheme/default/layout/ and open file page.xml and search "page/html_head" you will see code like this

<block type="page/html_head" name="head" as="head">
<action method="addJs"><script>js/jquery.js</script></action>
<action method="addJs"><script>lib/somejs.js</script></action>

here add your theme js file like this

<action method="addJs"><script>my_new_js_file.js</script></action>

amd add your css file for new theme

<action method="addCss"><stylesheet>css/your_styles.css</stylesheet></action>

you have set your css and js files and now we will work our html part 

Step 7: Go to directory /app/design/frontend/newtheme/default/template/page/html/ and open file "header.phtml" comment old code and put your header ocde here and save

Step 8: Open "footer.phtml" and do same with footer

Step 9: Now open "1column.phtml" and make changes in html according to your design do same for "2columns-left.phtml" , "2columns-right.phtml", "3columns.phtml" if your using these for any page you can set these layout from admin pannel. for change layout go to CMS >> Pages and change your layout for different pages and now open your. when you will refresh your page you will see changes


If this post help you reduce time to develop, you can help me to maintain this website :)
www.000webhost.com