Blog

Dissemination of views, information and knowledge without any cost or ado was made possible after blogging dawned upon us. Lets take a look at some of the burning topics, general discussion, innovations and techniques from our Editor’s desk

  • Apr 2 2013

    A Definitive Guide to Learn PSD to Magento Conversion – Part 1

    Magento is one of the most popular shopping platforms, which makes it easy to setup an eStore within a few hours if not minutes. However, some people find it difficult to understand. And that is what we are going to discuss with this two step guide where we will be covering the structure of a Magento theme in the first part and the PSD to Magento Conversion process in the second part.

    But before we move ahead, we must tell you that to understand the structure and conversion process better, you must possess certain technical skills like how to install Magento, and how to Code a web page using HTML and CSS, and other programming languages like PHP, ASP.NET, etc. Once you are through with this two step process, you would be able to understand how Magento works and the how you can make a Magento template for which a Photoshop design file is converted into an HTML, then into a Magento compatible theme. In short, you can call it as a PSD to Magento Conversion process.

    So let’s understand the Magento Theme Basics first.

    Magento Theme Basics

    Making a Magento theme is not as tough as it looks at first sight. However, it is not as simple as WordPress or Joomla. And one can become an expert in Magento Theme Conversion within a short period of time, but before that one needs to know what it takes to make a complete Magento Template.

    A Magento Theme is a set of PHTML, CSS, and JavaScript files, which are then re-called through XML files. A PHTML file is nothing special; in fact, it is just a regular HTML file which consists of PHP codes.

    In addition to this, there’s one more thing that is different in Magento i.e., it has separate skins for the front end and the back end.

    Magento Theme Directory Structure

    Magento Theme Directory

    In order to let Magento work flawlessly, you need to execute the PHP codes by placing them separately from the static assets, for which a separate skin directory is provided in Magento. Though this may sound a bit unusual at first, but once you’ll get used to the workflow, you’ll begin to feel how it secures the installation process.

    Meanwhile, here’s how a theme is split into different parts.
    • Layouts – root/app/design/frontend/default/ThemeName/layouts
    • Templates – root/app/design/frontend/default/ ThemeName /templates
    • Skins – root/skin/frontend/default/ ThemeName

    Layouts

    Layouts is altogether a new concept in Magento. It lets you define any of your existing webpage’s structure via precisely formed XML tags. This eventually means that you can state which section of the desired page goes where by modifying just a number of attributes in the XML file. Additionally, each view or module has its layout defined by its own XML file.

    Templates

    Templates is generally encompassed PHTML files which contain PHP codes merged with regular HTML markup codes. It is almost identical to WordPress, where we use a few predefined coding techniques to get the desired output. And similar to other popular content management systems, vital sections of a webpage such as the header, footer and the sidebar are stored separately in their own files and re-called whenever required.

    Moreover, in Magento, it is quite possible to have different templates for each page of Magento, which eventually means that you can have a different set of codes to make a checkout page rather than keeping a similar look for your entire shopping site.

    Skins

    In Magento, Skins are nothing but the CSS files, JavaScript files, images and other resources that are used to create the design by defining them in the code markup. In short, it means that all of your non-PHP based files will go inside Skins. For example; SVG, Fonts for Embedding, PDF, SWF or Flash files, must be placed in the Skins folder.

    Blocks

    Blocks are the essential building blocks of a Magento theme, which lets us construct a flexible theme keeping all the defined standards. Blocks are also a part of layouts, and can also be termed as the spinal chord of Magento’s powerful templating system. The positioning of Blocks can be changed using the XML described above to transform the look of a web page.

    However, Blocks should refer an appropriate template file so that Magento can re-call the obligatory file whenever needed. Blocks are divided into two different categories, namely; Structural Blocks and Content Blocks, which we have described below.

    Structural Blocks

    A structural block states the crucial structure of a webpage made using Magento. It is made specifically to present the header, left column, footer, and main column in a visual manner. It almost acts like the new tags introduced in the HTML5 Standard, such as header, aside, footer, etc.

    Content Blocks

    A Content block is identical to the regular container/wrapper DIV element that is used in a web page. In a webpage, each content block holds a particular functionality or purpose for which it employs the necessary template files to produce XHTML, which is then required to be inserted into its parent structural block. To understand the Content Blocks better, here’s a break up of a webpage; a menu bar in the header, a callout in the left column, and the footer, all are defined in separate content blocks.

    Crucial Locations to Store your PSD to Magento Theme Converted Files

    If you have seen a content management system before, then you might be aware of its complex file structure, and it’s no different with Magento either. However, while converting a PSD into Magento Theme, you should keep your focus on certain crucial locations stated below.

    The locations you’ll be working on while creating a theme:
    • root/app/design/frontend/default – This is the default interface folder.
    • root/app/design/frontend/default/YourTheme – This would be the folder for your theme.
    • root/skin/frontend/default – This is the default interface folder for skins.
    • root/skin/frontend/default/YourTheme – This is the folder where you will be placing all assets of your template except PHTML files.

    Magento File and Folder Structure Explained

    Magento File and Folder Structure
    • .htaccess:-This file consists of mod_rewrite rules, which are crucial for the SEO friendly URLs. Additionally, here you may also find a standard web server and php commands which can help your website to perform better on the internet.
    • .htaccess.sample:- This would be the backup file of the actual .htaccess file, and whenever you make any changes in actual files due to which the website starts behaving unusual, this file will come handy to set the default settings.
    • 404 (directory):- This is the folder where you would be placing the default 404 template and skin for your Magento based eStore.
    • App (directory):- This is the folder, where you would have to place all the modules, themes, configuration and translation files. Additionally, there would be certain template files, which help in default administration of the theme and the installation.
    • cron.php:- a Cron Job should be setup with this file. The execution of this file on a preset time period will make sure that the complicated Magento caching system will not have any negative impact on the overall performance of your website.
    • downloader (directory):- This folder is used as the place of storage for the web downloader files, which are used for the installation and upgrading of Magento via browser.
    • favicon.ico:- This is the default Favicon for Magento.
    • index.php:- This is the main index file for Magento.
    • index.php.sample:- This is the backup of the default index file. It can be used to go back to the default settings in case you get any error while or after modifying the index.php file.
    • js (directory):- This folder contains the pre-compiled set of JavaScript files that comes included in Magento.
    • lib (directory):- This is the folder where the core code of Magento is located. It comprises of the Magento’s PHP libraries.
    • LICENSE_AFL.txt:- This file contains the Academic Free License under which the Magento software is released and distributed.
    • LICENSE.txt:- This file contains the Open Source Software License under which the Magento software is released and distributed.
    • media (directory):- This is the place where all Magento media files are placed. For example; Slider images, thumbnails and product images. It is also used as a source folder to store the images imported via mass import/export tool.
    • mage (before version 1.4.2.0 it was called as pear):- This file takes care of the auto update via the downloader script and SSH. It controls the update of each existing Magento module.
    • php.ini.sample:- This file comprises of the sample php directives which can be used to modify the PHP setup of your eStore. However, if at any moment you feel the need to modify the default setup, just edit the file and save it as php.ini.
    • pkginfo (directory):- This directory consists of files with essential info on changes made while upgrading the modules.
    • report (directory):- This directory comprises of the skin of the Magento error reports.
    • skin (directory):- This is where you will be storing certain files associated with your themes, such as images, JavaScript files, CSS files, Flash files.
    • var (directory):- Cache, sessions, database backups, data exports and cached error reports can be found in this directory.

    Till now we have covered the entire Magento theme structure, and now we will be heading to the second part where we will learn how to code a Magento theme from a PSD file.

    Posted by ajeet Posted in: Magento Comments: 0