Lesson 8: The Template

Learn how to install a Joomla 3 template and reposition your modules

Video Transcription

In this video we will install a brand new template to our Joomla 3 web site. If you click on the site name in the top left hand corner of your admin control panel you will see what the site looks like now. As you can see it's using a very plain, simple, default Joomla template. Some of your modules may be displayed but many others may not. Don't worry about that as we will deal with that later. To install the template go to your /administrator select Extensions and Extension Manager. Here, select the Choose File and navigate to where you have saved the new template on your computer. This is usually a zip file. Select it and click Open and Upload & Install. The template has now been successfully installed but it is not being used by your web site yet.

To tell your Joomla 3 web site to use this new template go to Extensions, Template Manager. Here we can see all the templates on our site and here is the one I just installed called my_template. Select that one and click Default. Once it has been set as the default style for your web site go back to your web site tab and refresh the page. You can see already that the template is there but there are no modules being displayed. This is very common because each template uses different names for the positions where you put your modules. To find out where to out the modules there are two ways. We can go to our /administrator and click on Templates and then select Options and set the Preview Module Positions to Enabled. Save & Close. Now if we scroll down to find the template we are using there is a link called Preview. Which if you click on opens your web site in a new window with highlight boxes indicating where the positions are and what their name is. Here you can see one called left and here is the one called right. But many templates also provide documentation which might be more easy for you to use. This template has its own documentation and here I can see all the positions that are being used on the template in a nice layout.

So let's go back to our web site and go to our Module Manager. You can find this under Extensions, Module Manager. Here we can see all the modules that are on our site and they've all been transferred across from our Joomla 1.5 site. But as I explained the position names are different. So I now need to go into each module and set it to be the correct position. The first one I am going to do is this one here which is my main menu. To select it, just click on it to open. Here is where I set the position. You can see it is currently in a position called hornav which isn't being displayed on our site because our new template doesn't have a position with that name. If we click on the dropdown we can now scroll through all the positions available for all the templates. Find the template you want, mine is called My_template, and then the position that you want and from the map I know the position I want is menu. Now click Save & Close. I am going to do a few more. The first one is the breadcrumbs. This one I know from the map should be in a position called breadcrumbs and currently its just in one that doesn't exist called breadcrumb. So I am going to select breadcrumbs and Save & Close.

Finally I am going to do the search module which is down here. This one used to be in a position called User 4 and it's now in a position called search. Save & Close. If I look at the module map you can see I've done the top three menu, breadcrumbs and search. If I go to the front end of the web site and refresh, you can see that I now have my top menu, my breadcrumbs and my search. And you should repeat this process for all the modules on your web site. If you have many modules that need to move from one position to the same position you can do that in one batch process. Here we can see I have three modules that were originally in position-7. If I select each one and then click on Batch. Now what I want to do is to move that module and if I select the position I want to move it to which is left and click Process. The modules have now been moved to the left position. But in the process they have been unpublished. So we need to select all three again and click on Publish. Once you have completed all of your modules to their correct new position your web site will look exactly how you want it to. There is still a few final steps and checks to make which we will cover in the next video.