How To Edit Joomla Templates

Latest Template

Home

How To Edit Joomla Templates - part 1

We've been getting a lot of questions on how to a edit a joomla template, so here's an explanation on how to do this. This article will be in 2 parts. This first part will explain how to edit a Joomla template. It's the theoretical part of the explanation. The second part will show an example where you will see how you can change the look of a template completely within minutes.

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

Make a copy

A smart 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:

Open the zip-file of the original template and open the file templateDetails.xml
In this file you will find something like template_name. Change this name to whatever you want to name your template
Open the file index.php from the zip-file
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).
make a new zip-file
install this template

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

Change the images

If you use a template, you will almost always want to change 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. So all you have to do is replace these images with your own, make a new zip-file and install that template. Of couse you can also overwrite the images directly on your server.

If you replace images, then the best thing to do is to replace them with images of the same size. It's less work to change your images to the right size, then it is to change the template to match your images.

As a sidenote 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 completely seperated. 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 a number of

elements with a part of the content inside it. To change this, first select the template, choose the edit button and then click on 'Edit HTML'.

Edit the template 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 change name="left" to name="right", the modules on the right position will now be shown on the left position. Once you understand the html basics, you can change here anything you want.

A nice 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 change 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 have more then one stylesheet. There are no real conventions on how to split the CSS code in different files and how to name them, so you will have to examine them to know what is part of a certain CSS-file. Just select one of the CSS-files and hit the 'Edit' button.

Edit the template css

Now you can change 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 article are about. Just 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 change the CSS and one tab where you see the template. If you're not experienced with CSS, always do just one change and then verify the result.

Now it's time to see it all in action with an example...but that will be covered in the second part of this article.

Part 2: Change a template in minutes

Bookmark

Email This

Trackback(0)

TrackBack URI for this entry