Creating Joomla template from PSD

So, you are a designer and you want to sell a template for Joomla or WordPress to some customer, well this can be a very hard task for you, isn’t it? You say to yourself “I am just a designer, all I want to do is design some very cool stuff and get paid for it.

Joomla

First thing you need to do is relax… after that you have several options to accomplish your task.

1. The easiest way (but costs money) is to use the online freelancers services such as elance.com or odesk.com to get yourself a cheap programmer to create the template for you. You must understand that time is money and if you are not intending to understand this world then go for this easy solution.

The downside here is that you have to pay someone to do the job, and if you need fixes to the template it can be annoying if your programmer is lazy. Tip: find jobs that already posted on this websites and see the job description and price, this will help you understand how much money it will cost and you can use the job description to create your own job.

2. The hard way (for designers who don’t afraid of a little bit html). Learn on your own how to take a PSD and turn it into a live Joomla or WordPress template. OK, so you got this far I guess you are serius regarding this…

The first thing you need to do is get an empty template (there are a lot out there) just write on Google “blank joomla template 1.x” or “blank wordpress theme” to get the blank template you need. Besides that you will also need a text editor so you can modify the blank template and add to it your stuff.

Now what you need to do is go over to you PSD file and slice it you can watch this nice tutorial on how to accomplish the slicing and other basic stuff you need to know like the css file and the html file. Then what will have is a nice static website, but what we really want is a dynamic website so we need to convert our static index.html file into the index.php file that we can find in the root of the blank template we downloaded erliear.

So open the index.html and look for <body> tag. Copy all the content between <body> and </body> tags. Now locate the file index.php in the blank template and paste the content we copied inside the <body> </body> tags as well. OK, that wasn’t so hard now was it? The next thing we are going to do is to open the CSS stylesheet and copy all of its content.

Next will paste all of its content into the css/template.php file (Joomla) or css/style.css (wordpress). Basicly we are doing great, now we need plant directives that will be used by the CMS to dynamicly inject the texts into the template. Each version and CMS has its own directives so it will be hard for me to cover it all but in Joomla for example it looks like this: <jdoc:include type=”modules” name=”navigation” style=”raw” />.

OK, so you probably need a cup of coffee… yeah, it can be hard a little bit, also I know that some of you excepted to see here a magic that they will not need to do anything and everything will work, well, life is hard, isn’t it? The next thing we want to do is go to our images folder that we have all our images that we sliced from our PSD and copy them to the images folder in our template folder.

Now the tricky part is to find the place in the index.php and add <?php echo $tpath ?>/ before each call to load an image for example (This is a Joomla 1.7 example, in other CMS it is slightly different but the idea is the same):

You need to check if you have something like this in your index.php :

$tpath = $this->baseurl.’/templates/’.$this->template;

If you do then you are OK, if only $tpath name is different then in the next links down here change $tpath to what you have.

If you don’t have this at all then just locate: defined( ‘_JEXEC’ ) or die;

and place $tpath = $this->baseurl.’/templates/’.$this->template; after it.

Now lets see the example to the changes that we need to do to our code:

Before:  <p><a href=”#”><img src=”images/More_info.gif” alt=”picture” width=”119″ height=”39″ border=”0″ /></a></p>

After:     <p><a href=”#”><img src=”<?php echo $tpath ?>/images/More_info.gif” alt=”picture” width=”119″ height=”39″ border=”0″ /></a></p>

Now what happens is that it doesn’t metter what is the website URL is, you got the root of the template

“<?php echo $tpath ?>/” and the name of the file “images/More_info.gif”.

You will need to do this for all image links.

The final step is to create a zip file from the entire root of the template and upload it to your joomla or wordpress site, we also need need to go and set this template as the default one.

I hope this wasn’t that hard for you to understand, anyway I am here if you have any question.

Leave a Reply

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