Install a Template

So far we have just worked with the main content areas of Joomla. We still have the default template and style. To change these elements we need to install a template extension. 

Templates, in Joomla, act as a design framework for a web site. They includes such things as color schemes, font styles layout grids and accessibility functions. A good template will give your site a consistent and functional style.

Joomla templates vary hugely in the the way they can be customized. Some templates offer very little flexibility while others include ways to customize almost every element of your website. 

Security Warning: Templates, and extensions in general, have the potential to introduce harmful code to your Joomla installation. Only use extensions from reputable sources and install them on a test installation of Joomla before using them on a live site. Keep them up to date.

For this class we are going to use the Gantry Template Framework. Templates are installed just like any other extension, in the Extension Manager.

You can read about Gantry at

Notice that there are several different ways to install extensions via the Upload Packages File, Install from Directory, and Install from URL. tabs. Note that not all methods may work with all extensions on on all platforms. So its handy to have alternatives.

For Gantry we should be able to install directly from the URL. Click on the Install from URL  tab in the Extension Manager and copy and past the following URL into the Install URL  field:

Click Install. Wait for the extension to install (or for it to report an error). This may take a minute or two.

Once Gantry has been installed it can be configured as our default template for the site. To do this go to Extensions - Template Manager

First we are going to duplicate the Gantry Template Style. This will enable us to go back to the default style if we need to.

Click in the check box next to the Gantry entry in the style list and click Duplicate on the top tool bar.


Now we can make this override style template our default. Click on the duplicate Gantry Override in the template style list to open its editing console. Enter a name in the Style Name field and click Save.


Click Close to return to the Template Manager: Edit Style window 

Click on the star in the Default column for the Gantry Override template. The page should reload and the star will change color to yellow, indicating it is the default template.


View your site to see the changes.




Gantry Layouts

To adjust the layout of your style open your styles editing console from the Template Manager: Styles  window. Click Layouts



Scroll down the page and click in the Main Body Positions  check box.



You can now use the slider to adjust the size and positioning of the side bar A (sa) and main body (mb) positions.

In the same way you can adjust the other positions in the template. Try adjusting the relative layout of the Header Positions where the menu and logo are placed.

To view the module positions for the template go to the Template Manager:Styles  page and click Options. Set Preview Module Positions to Enabled.


Click Save and Close. In the Template Manager:Edit Styles window click on the preview icon next to your template style.



You should now see an overlay with the names of the module positions.


Change the Logo

For this tutorial we are going to need an image to be used as a logo in your site. The logo should be sized no bigger than about 500px wide by 100px high and saved as .gif, .jpeg or .png. You can use any image editing software, such as Photoshop, to create your logo. See the useful links section for a list of open source image editing programs. If you do not have a logo you can just use a sample image for the purposes of this tutorial.

Click on the Gantry override in the Template Styles list. (remember the override not the master).

select gantry

This will open its editing page. Click on the Style tab. Place a tick in the check box next to Logo in the list and in the type options list select custom.


Place a tick in the checkbox next to Custom Logo and click Select. This will open the media manager popup. Scroll down to the bottom of this popup, under Upload Files click Choose File. Navigate to where you saved your logo file and select it. Click Start Upload.


Once the image has uploaded you should see the upload complete message. Now in the inner pane of the media manager pop up (you may need to use the inner scroll bars to see it) select the uploaded image and the click Insert.


You should be returned to the template Manager - edit styles page. Click Save in the top right.  A message box should appear telling your your changes have been saved. 

More Articles...

  1. Modules