Converting a PSD to a Joomla template is not as hard as you think. In contrary to the belief that you will be stuck with a very “vanilla” look with templates in Joomla, you have the flexibility to create and integrate any layered PSD as your Joomla theme.
We will start with producing a simple template (header, navigation on the left, content on the right, footer); it won’t be a captivating layout as what we are interested is in understanding the technique.
Only five easy steps and you can create and use your Joomla template.
Step 1: File and Folder Structure of template
Prepare your template using HTML and css. The basic structure of Joomla Template folder is as follows:
The template folder whose name is the name of template itself (in our case it is inspiration). It contains:
- A file named “index.php”.
- A file named “templateDetails.xml”.
- A folder as css which will contain our style sheet named “template.css”.
- A folder named “images” which will contain our template images.
Fig A – Joomla Template Structure
Step 2: Putting your HTML code in index.php
Rename your index.html to index.php and replace the HTML code before the body tag of your HTML file with this code:
Fig B – index.php file structure
Change “your_template_name” to the name of your template, “your_css_directory” to name of your css directory, and the last, change “your_css_file.css” to the name of your css file. If you have more than one css file, you should declare them one by one.
If you have some javascript files, you should declare them with the same way.
Step 3: Positioning Joomla Modules
The default Joomla template has a few module positions such as breadcrumb, left, right, top, user1, user2, user3, user4, footer, debug, and syndicate. The Joomla module positions are shown below.
Fig C – Positioning Joomla modules
To create a module position, we need to place this code ‘<jdoc:include type=“modules” name=“your_module_position_name” />’ to appropriate position. The name attribute is the module position name. The snippet code to create a module position is:
Fig D – Snippet code to create a module position
After that, you need to place a component. The code is shown below.
Fig E – Snippet code to place a component
Step 4: Configuring TemplateDetails.xml file
Create a manifest file. This file can contain many data relative to the template; we will insert only a few, the obligatory ones. Our file will be composed like this. If you don’t create it, it will cause error while installing your template. Here is the sample of a manifest file:
Fig F – Configuring TemplateDetails.xml file
As you can see, the first part contains general information relative to the template, some of which can be found on the choice screen. It is important that the value of “name” is equal to the folder name. Subsequently, we find another important element that is the positions. In this section we define the available positions where to insert the various modules.
Don’t forget to enlist all your files used in your newly made template inside files tag. If you missed, the files won’t be copied to Joomla template directory during installation process. Position tag is used to declare the position name used in your template.
Step 5: Packaging
Package it. You may create a thumbnail of your template before packing it. It should have 206px width and 150px height and finally compress your template to a zip file and your templates are ready to go. It is always a good idea to cross-browser test all your designs so don’t forget to test it before sharing it.
