How To Edit Joomla Templates - Part 2

In part 1 of this article, it was explained how to edit a Joomla Template. It was the theoretical explanation and if you're new to Joomla, it might be a bit abstract. In this second part, I demonstrate this with a practical example, as looking at an example is often the best way to learn something. Once you have done this a few times, you will be able to change a template to your needs within a couple of minutes.

Let's start with picking a template. For this article, I took the October Template of Ulti Joomla. 

Suppose I want to use this template for a site about my golf club. The first thing I will do, is change some images. I want to put some golf elements in the template, like the logo of the golf club and a picture about golf. In the figure below, you can see where I want to put these.

I just open the zip-file of the downloaded template. I take a look at the folder called 'images' and there I find the two images I want to replace. I just have to replace these images with my golf images. Before I did this, I first resized my golf images to the same size as the original images and renamed them to the same name. Now I just create a new zip-file and install this template. This looks already more like a golf template.

Now I want to do something about the colors. The colors of my golf club are green and blue, so let's put some blue in it. In the backend of my site, I go to the Template Manager, choose to edit the just installed template and then I edit the css-file. Now I want the background outside the content borders to be blue. Looking at the images that are used to show the current background, it's easy to see that I have to replace bodybg.jpg and wrapbg.jpg.

I will not replace these images with another background image, but just with the color #3333BB;

I will change the color of the headers also. Looking in the css-file, I easily find back the color of the headers.

So I replace this also with the same blue color #3333BB. Note that if you don't understand the code above, you should learn the css-basics first. There's a link to a great tutorial in the first part of this article.

Finally I will put the column on the right, on the left side. This requires a closer look in the code. But once you know a bit of html and css, you'll find it easy to discover where the place of the first and second column is located in the css-file.

I swap these two, just by changing the float:left to float:right and vica versa.

Here's my final result:

If you compare this with the original template, you'll see that just a few changes can change the look of your template a lot. If you've never done this before, it will require some practice before you get the hang of it. If you want to become more familiar with this, I would advice you to install somewhere a testsite, and just experiment and have some fun with it!

TrackBack URI for this entry

Comments (0)

Subscribe to this comment's feed

Name

Email

Website

Title

Comment

smaller | bigger

Write the displayed characters

Add Comment