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 5 2013

    A guide for converting PSD to Joomla template in 6 simple Steps

    Security, customizability, and a good community support have made Joomla a favorite content management system of a number of hardcore web developers and programmers. However the most enticing feature of the CMS is its ability to change the look, feel, and the functionality of the site through a simple change of a template. Creating such a custom template however even from an existing design is not that easy a task. Most non-programmers, non-Joomla users, and even some professional web developers hire a professional PSD to Joomla template conversion service that does the entire job for them. Rest try to code it themselves but have no idea where to begin and how. For people like them and for amateur Joomla users, here we present a 6 step guide on converting PSD to Joomla, which will greatly help you in creating your own Joomla site.

    Step 1 :- Slicing

    The first step in any PSD to CMS conversion process is the slicing of the design image file. Here slicing means cutting and dividing the design file into its component parts such as buttons, menus, backgrounds, and other website features. Since the innovation of layered image design files in Photoshop and other image editing software, most designers create individual components in individual layers and thus drastically reduce the slicing step. However there are still some old school designers and it is important to learn the basics of slicing.

    The most important thing to note about the process of slicing is that it is imperative to respect the width and length of the component down to the single pixel. This is important for creating a pixel perfect design and is the reason behind crediting slicing as a difficult step. If pixel perfect is not possible it is important to make sure that at least the length and width ratio remains the same to avoid squishing and squashing of the design component.

    Now even though slicing requires cutting the design components separately, it is generally preferred to create as much part of the site dynamically as possible to increase page load speed. But since some components, such as custom buttons, logos, icons, etc., can’t be rendered dynamically, slicing is required for them.

    Step 2: HTML and CSS

    The next step is creating HTML and CSS file of the sliced design. Now most will argue that the step is not required as theoretically you can directly create a template file from the sliced components. However most professional developers that work on PSD to Joomla conversions first code a basic framework of the website in HTML and CSS framework and then implement it in the Joomla content management system. This basic framework in most cases dictates only the look and feel of the template and does not implement functionalities; we have Joomla CMS for that.

    The main aim of this step is to only place design component in the place where they should be with the basic frontpage content. CSS is used to implement font size and type, background color and nearly every graphic aspect of the site including buttons and menus. A thing to note here is that some website use static front page from where users go to visit the dynamic home page, however using Joomla to create this static page is a little difficult task when compared to HTML. This HTML page then can be integrated in the Joomla website easily. Since CSS dictates whether a site is responsive or not, this is also the step to make the site responsive with either the fluid layout or fixed layout.

    For those who don’t have much experience with HTML or CSS here are a few good places to learn about them.

    • W3Schools:- One of the best resources to learn CSS HTML, PHP and anything related to web development. The site has many detailed examples and an online compiler to practice and test codes online itself
    • TutsPlus:- A tutsplus premium course that aims at teaching CSS and HTML to non-programmers and it is available for free.
    • CSS Basics:- A good resource to start learning CSS. This site focuses mainly on developing CSS basics which are necessary for learning advanced topics.
    • A step-by-step tutorial to learn HTML, CSS, PHP, and JavaScript.

    Step 3: Arranging file according to the Folder structure of a Joomla

    Before we start Joomla template conversion, it is important to understand the folder structure of the create the folder Every Joomla template goes inside a folder named Template that is inside the main Joomla CMS folder. To know more about the folder structure of Joomla CMS, refer to this post. Inside the template folder every template enjoys a separate folder that can be named as per the developer’s choice but the common practice is to name it according to the template. Here we are using the template name as ‘template_name’. A typical Joomla template can contain many different types of files depending upon the developer and the requirements. But for creating even a basic Joomla template you would need at least these two files

    • Index.php
    • templateDetail.xml

    You may have guessed it but in modern web-development no template is made without at least a CSS file so we have a folder named ‘css’ that contains all the style sheets associated with the template. In addition there are many inbuilt Joomla components, plugins, and modules that are to be used in the template; they go in a folder named HTML inside the main template_name folder. So our basic template_name folder will look like

    folder structure

    Here JavaScript folder contains the main JavaScript code that is used inside the template, images folder contains the main images that would be used in the template, language folder contains files that helps in translation of content from one language to other, component.php contains the PHP code that displays only the component parameters, and template_thumbnail and template_preview are image files that are shown in the admin area of the Joomla CMS. The main use of index.php and templateDetail.xml are discussed below.

    A thing to note here is that the HTML folder is also the place where you keep files that override the behavior of Joomla CMS especially for displaying custom pages such as front page. Also the built-in components, modules, plugins and languages that are used in custom template are for the template alone. They cannot be used outside the template folder. For that you have to include them in the extension specific folder inside the Joomla CMS folder.

    So now that we have become familiar with the folder structure of Joomla template, the next step is to put everything that we have made according to the folder structure. Place the CSS in css folder, place all the JavaScript files, if any, in the javascript folder, all the images in the image folder, and place the main HTML files in the HTML folder.

    We will break up the HTML file according to the Joomla template structure in next steps. Another point to be noted is that for security purposes, place a blank index.html file in every folder and root folder of the template. Just write a simple doc declaration like below and save it in the file.

     As said above index.php and templateDetail.php are the most important files so let’s just create these two files and leave them blank for now. Also take a snapshot of your HTML rendered page and save it in little resolution as template_preview.png and in a smaller thumbnail resolution as template_thumbnail.png

    Step 4:- Creating index.php

    After creating the template folder and placing the necessary files where they belong, it’s now time to actually code the necessary files and start shaping the functionality of the theme. Here I assume that you are proficient with PHP and HTML and are just new to Joomla only. The first sting that we have to make is index.php. I will be giving the PHP code that goes into the file to perform basic functions and how it works. Most of these functions require additional extensions to make them work

     Till now we have created the module map and declared some additional parameters. I have also included the code for calling a sample JavaScript file before doc type declaration.

     This is how you will start the doctype declaration and include the CSS files. Here I have also show how you can make the site responsive by calling Bootstrap CSS framework. The last few lines depict how we can call JavaScript and jquery files in the header.

    The next is to start the body part of the index.php

     This piece of code creates the header of the page

     Now we have created a navigational bar. After this comes the main content and modules of Joomla website. From here we will focus in declaring the module positions and the content. Once again I am using Bootstrap framework which is combined with a fluid layout to give a responsive content area.

    For module position 14, 15 and 16 is the middle area of the page and the above piece of code allows Joomla to assign modules to these positions. You can add these modules from the Joomla administrator page. In addition to making these positions and modules responsive I have also assigned their size through <div class = “span4”> declaration. In a similar way you can declare the use and size of module positions and 9, 10 , 11, and 12 as per your choice.

     The module positions 8 and 7 have been used for assigning a slideshow and the top left area of the page repectively, and we have included another module position (module position 13)in the footer of the index.php file. Now comes the part about including the bootstrap JavaScript file declarations and closing the php file.

     Including the JavaScript files in the end improves the page load speed at the time of rendering. In the end we have also included the debugging module for debugging the Joomla template if required.

    With that we can now close and save the index.php file. Granted that this step is very large, time consuming and difficult, it is also the most important as we are practically creating the main part of the template in this step. A fair warning here is that the above code may not work if you copy and paste it as it is. You have to work out the code as per your requirements.

    Step 5: Creating the templateDetail.xml

    After creating the index.php the next step is to create the templateDetail.xml file. This is also a very important file without which the template will not work. This file tells the Joomla CMS about the basic template information such as author name, version, template name, copyright information, license information, and template description, the module positions that we will be using in the template, all the files and folders that the Joomla CMS should find in the template folder to make the template work, and the logo, wrapper, and the advanced template options. Here is a sample templateDetail.xml code

     The code in <files></files> tags describe all the folders and files that are there in the template, the code in tags describes all the module positions, and the code in <positions></positions> the tags declares all the module positions, and the code in the <language></ language > tags declares the language files that would be used to translate the content from one language to another. The most important part of this file sin in <config></config > tag and this piece of code takes the values of advanced options from the Joomla template manager and uses it for the website rendering.

    Joomla template manager

    As said before this XML file is also used for telling about the author and template description to the Joomla CMS, as evident from starting few lines of the file.

    Step 6: Activating the template and configure the modules

    The last step is the easiest one. Just login to the admin panel of Joomla and use the template through the template manager panel. Add necessary extensions and arrange the necessary modules and you will have a working Joomla website using a custom template.

    Posted by ajeet Posted in: Joomla Comments: 0