Magento Expert Forum - Improve your Magento experience

Results 1 to 8 of 8

Magento template design and development - Part 1 - Introduction

  1. #1
    Junior Member jaredovi's Avatar
    Join Date
    Mar 2013
    Posts
    69
    Thanks
    2
    Thanked 11 Times in 8 Posts

    Post 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:


  2. #2
    Junior Member phuc2x's Avatar
    Join Date
    Mar 2013
    Posts
    18
    Thanks
    1
    Thanked 2 Times in 2 Posts

    Default

    Very useful to start with magento template coding, thanks.

  3. #3
    Junior Member
    Join Date
    May 2013
    Posts
    25
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    this guide is really very helpful for those who are fresher to magneto designing & development.

  4. #4
    New member
    Join Date
    Jul 2013
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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.

  5. #5
    New member
    Join Date
    Apr 2014
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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.

  6. #6
    New member arianna143's Avatar
    Join Date
    Apr 2014
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Great share for the startup...!!!

  7. #7
    Junior Member
    Join Date
    Apr 2014
    Posts
    104
    Thanks
    1
    Thanked 5 Times in 5 Posts

    Default

    Name:  magento.jpg
Views: 42
Size:  77.6 KB
    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.

  8. #8
    Junior Member
    Join Date
    Aug 2016
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    will have a perfect day with light front Magento
    thank you

Similar Threads

  1. Magento template design and development - Part 3 - Advanced Layouts
    By jaredovi in forum Template, Design, HTML, CSS, Javascript
    Replies: 4
    Last Post: 22-07-2016, 11:48 AM
  2. Magento template design and development - Part 2 - Layouts
    By jaredovi in forum Template, Design, HTML, CSS, Javascript
    Replies: 8
    Last Post: 13-11-2015, 04:40 AM
  3. Replies: 1
    Last Post: 18-03-2015, 09:09 AM
  4. How I can get started with magento template design?
    By phuc2x in forum HTML, XHTML, CSS, Design Questions
    Replies: 5
    Last Post: 04-03-2014, 11:17 AM
  5. Magento Module Development - Part 7 - Overriding
    By rocker in forum Programming & Development
    Replies: 0
    Last Post: 29-04-2013, 03:37 AM

Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •