How To Edit Joomla Templates

First you have to ask yourself the question: what do you need to adapt? If you're making a single web site, you have a great looking template and you only want to replace some image, then this article will be enough for you. If you need to adapt more, like how the titles look, changing the size of a part of your template, etc. Then this article will only point you in the right direction. In this case you will have to learn at least the basics of css & html. There are tons of online tutorials accessible for this. I would recommend the one from w3schools. That's a great site, I still use this quit often. You will find there not only tutorials, but also a complete reference, lots of examples and even a quiz.

Make a copy

A clever thing to do is to make a copy of the original template. This way you can easily compare your changes with the original template. Here's how you can do this:

1. Open the zip-file of the original template and open the file templateDetails.xml
2. In this file you will find something like template_name. Adapt this name to whatever you want to name your template
3. Open the file index.php from the zip-file
4. In this file, scan for the template name and replace it with the name of your template. You will probably find it as part of a path to the css file(s).
5. make a new zip-file
6. install this template

Now you should see your new template in the Template Manager.

Replace the images

If you use a template, you will almost always want to replace some of the used images and logo's with your own. It's easy to do this. If you open the zip-file of the template, you will see a folder called 'images'. This contains all images used in the template. All you have to do is replace these images with your own, make a new zip-file and install that template. Of course you can also overwrite the images directly on your server. Note that you really have to replace the files with a diferent image, but with the same name.

It's also best to replace the images with images of the same size. It's less work to adapt your images to the right size, then it is to adapt the template to match to the size of your images.

As a side note I would say that in my opinion, replacing images should be made easier. It should be possible to replace the images directly in the Template Manager, so people without ftp access don't have to make a new zip-file and reinstall the template each time they replace an image.

Changing the content

In Joomla templates, the content and the design has been separated. The content is present in the file 'index.php', the design is in one or more css-files. The index.php contains (or should contain) not much more then some elements with a part of the content inside it. To adapt this, first select the template, hit the edit button and click on 'Edit HTML'.

Now you see the contents of the file index.php. You will find there lines like:

This is nothing more then a element that will contain all modules on the left position. If you adapt name="left" to name="right", you will select the right modules in stead of the left once, but they will still be shown on the left position. Once you understand the html basics, you can adapt here anything you need.

A fun experiment you can do is to look for the lines in the index.php file where you see css-files included. If you remove these lines and then check your site, you will see what I mean with content only. All you will see is plain text. If you don't understand the purpose of css-files, this experiment will make that crystal clear for you.

Changing the style

You can adapt the css files in the same way. Only this time you select 'Edit CSS' in stead of Edit HTML. Now you will see a list of CSS files. If you're lucky, there will be only one. A lot of templates however will have more then one stylesheet. There isn't a real convention on how to split the CSS code in different files and how to name them. This means you will have to examine them to know what is part of a certain CSS-file. If you select one of the CSS-files and hit the 'Edit' button, you will see the content of the css-file.

Now you can adapt the style sheets any way you like. I won't go into more detail here, that's what the CSS tutorials I mentioned in the beginning of this story are about. One more tip: most browsers now have different tabs which makes it easy to switch between different sites. Use this when you're changing css-files. One tab where you adapt the CSS and another tab where you see the template. If you're not experienced with CSS, always change one line and then verify the result.

If you find this a bit abstract and you want to see it in action with a practical example: Check out Ulti Joomla =>
http://www.ultijoomla.com/