A Complete Guide On Building A Joomla Template

In order to convert PSD to Joomla, one needs to have enough time, experience and patience at hand. It is a time consuming process and involves a number of steps.

One has to convert the PSD to HTML/XHTML or PSD to CSS first and then begin with converting PDS to Joomla. This is detailed tutorial on building a Joomla template. It discusses everything from design to deployment of a complete Joomla template theme, including core override and template option parameters that you can use in the most optimum way.

If you like this article, you might be interested in some of our older articles on Joomla Apps for the iPhone, PSD To HTML Tutorials, Cutting Edge PSD to HTML Tutorials, and ECommerce Web Design PSD Files.



PSD is the beginning point. You need to modify the PSD design files first. Make sure that you have enabled the auto select layers in Photoshop. Make a note of all the images you will require. It is better to first concentrate on those parts that you cannot or do not want to duplicate, via CSS. This may include actual imagery, logo, or perhaps the buttons. You can select shadows and gradients on your own. You can achieve the effects with the help of CSS. For example- you can use gradients to make a field of color seem less boring. You can create the illusion of the space with the help of gradients and drop shadows.

Click on the logo to highlight its corresponding layer in the layers panel. Move the cursor to the thumbnail and option+click it to auto select the entire layer. Click copy and create a new file. The height and width will be automatically set. So next just press enter and paste. You have the logo now. Turn off the background layer. Now save it as a .png file. This will preserve the transparency. Make sure to give it a relevant name like ‘logo’ etc. This way you are done with the first image. Just repeat the same procedure for all the images you have.

However, it can be tricky doing button dots used for the slider navigation. The easiest way is to copy the layer or group that makes up one of the dots, and then put it into a new file, bigger than its actual size. Next step is to turn off the background layer, go to trim in the edit menu, and get rid of the transparent pixels and make the size precise. Now edit the image canvas such that the size is 200% height and copy the layer or group and drag it down to duplicate it. Make the required changes and you will have an active state. Save this new image and the buttons are ready. After gathering all the pictures, drop them into a folder, named images. Now it is time to move on to the HTML part.



Once you are done with the design and images, it is time to focus on the code. To begin with, you need to add logo and navigation sections. For this, you need to make changes inside the header_container. You can also make the required and desired changes to change the text and image links to suit your own setup.

Next comes the image section. You should include the rel attribute on the image links inside of the figure tags. In the end, outside of the closing section tag for the footer_container, paste in the lower copyright area that includes the link to jump back to top.

CSS Styling


Let us now move on to the CSS part. To begin with styling, drop in the base inside the style.css file. It contains a reset and basic setup of the elements, and of course, the ubiquitous clearfix. Next you should pay attention to styling the top region. In the menu part, set the positioning and text sizing, as well as handling multi-level lists. You can also add a little curve to the bottom part of the drop down list with the help of CSS3. Configure the footer section next. And finally style some of the main text.

Now comes the Javascript. You can make use of plug-ins here. You can use plug-ins to build the slider. For lighboxing, you can make use of plug-ins like PrettyPhoto plug-in and @scaron. After downloading the required plug-ins, you need to include them within the code. One important point to be noted here is- in order to limit the number of HTTP requests, try to group the scripts into one file at the time of production. You can add bullet navigation for the slides, and setup the duration and easing parameters.

Using CSS, you can also use images for navigation buttons. For example, you can make the page more visually appealing by using images in navigation buttons. Besides this, you can also use CSS to produce “roll-over” buttons that change as the user selects the button.

In the menu part, add appropriate code to make sure that the sub menu is hidden on page load, and then sets up the animations to take place when one hovers over the corresponding menu items. You should check the page and make sure that all the functions and JavaScripts are working as expected. Next combine the multiple files properly.

Now it is time to begin with Joomla. After you get the fully functional static HTML site, you need to add Joomla templates. You need to pay attention to the standard file structure of Joomla. Create a folder structure first and make sure you include all the required files in it. Start with component.php file. This is a structure template that Joomla uses to display content called with the component parameter. Index.php is the main file and nearly everything will take place in here.

Template_thumbnail.png is an image of the template itself that will show in the admin section of Joomla, and template_details.xml is the main control file that Joomla reads to install your template. It contains basic information about the file structure of your theme, as well as template parameters and module position names. You should also ensure that Params.ini file is included. It will, however, remain blank for now. You need to store the files in the HTML folder to override the default Joomla behavior for certain display types, such as the frontpage.

You can make some dynamic parameters to change the theme that PrettyPhoto will use. For this, you can create a new section label and a drop down list to choose the available themes. The value returned will be a string that corresponds to the parameter PrettyPhoto expects.

Install Template


All you are left with now is to install the template. Zip up the folder and install it to your Joomla installation. Next, go to the template manager and set your new template as the default. To finish with, you need to pick a style and add some copyright text. Then, pick your images and set some captions for the slider. Then save it and click preview. This finishes the procedure of building a Joomla template.

Sharing is Caring

Leave a Reply

Your email address will not be published. Required fields are marked *

Comment Rules

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i><q cite=""> <strike> <strong>

Kindly use a valid Name and Email address. Spam or unrelated comments will be deleted

If you are a regular commenter, be sure to check our Comment Contest.