Installing A Template

Templates, in Joomla, act as a design framework for a web site. Templates includes such things as color schemes, font styles layout grids and accesability functions. A good template will give your site a consistent and functional style. There are a huge range of free and commercial joomla templates available.

Joomla templates vary hugely in the the way they can be customised. Some offer very little whilst others include ways to customise almost every element of your website. Be prepared to experiment with a few different templates and spend time finding out how each one works.

For this example we will be looking at the 'Gantry' template.

Templates are extensions in Joomla and are installed using Joomla's 'Extension Manager'

Log into the 'Back End' of your site by typing www.yoursite.com/administrator into the address bar and typing in your username and password. Book mark this page.

Go to Extensions/Extension Manager. Ensure the 'Install' tab is active. You should see the following page.

instalExt

Notice there are 3 different ways to install extensions. the most common way is to download the zip file from the vendors site and then use the choose file option to browse for it on your hard drive. For convenience, however, we are going to install it from the following URL;

davejulian.net/ufiles/gantry-4.0.5-bundle.zip

Alternatively download the Template to your hardrive from the This URL and install using the 'Upload Package file' method.

Once we have succesfully installed the template we need to set it as the default for the site. Unless we tell Joomla otherwise, it will be the template used on all pages of our site.

To do this we go to Extensions/ Template Manager. Click in the 'Default' columm on the row of your installed template. The star should turn yellow, indicating this is now the default template. Click on 'view site' on the top right and you should see the new template.

tempMan

NEXT

Changing 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 (you probably do not want the image to be more than a few hundred kb) and saved as .gif.jpeg or .png. You can use any image editing software, such as photoshop, or software that came with your camera, to create your logo. See the usefull 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.

We change the logo by editing the style of the gantry template. When working with template styles it is a good idea to make a copy of the style first. If we make a mistake we can simply change back to the master style and not have to re-install the entire template.

In the Joomla backend (type '/administrator' after your sites URL in the address bar) go to Extensions - Template Manager. In the Template: Styles window place a tick in the checkbox to the left of Gantry - default in the list. In the tool bar on the top right click Duplicate.

Now make this duplicate, or override, the default.

tempedit

Click on the Gantry overide in the Template Styles list. (remember the overide not the master). 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. At 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 upload is complete its icon should appear in the navigation frame of the media manager popup. Click on it and its URL should appear below. You can give the image a title and brief description and choose its alignment on the page. When you are finished click Insert. You will 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. 

 

NEXT

Adjusting the Gantry Template

For the purposes of this tutorial we are going to create a test Article  and a test sidebar Module so we can explore some of the layout features of the Gantry template. Don't worry if you do not understand exactly what is going on just follow these steps. We will talk more about articles and modules later.

Go to the backend of your site by typing 'yoursite/administrator' into your browsers address bar. Go to content - article manager - add new article. Give the article a title (eg 'test').

Tick the featured check box. (this will make the article appear on the front page).

Copy and paste the lorem ipsum filler text into the article text box in the article manager. Click Save and Close.

Now we need to create our side bar module. In the back end of your site go to Extensions -  Module Manager. Click New in the tool box at the top. Click Custom HTML in the Select Module Type popup. 

Give the module a title and click Select Position. In the Select Template drop down on the top right of the popup select Gantry. This will force the popup to display only the positions available in the Gantry template. Scroll down to the bottom of the popup and click in the page navigation bar. (the positions are arranged in alphabetical order and this just happens to be the page they appear on in the popup).  Click on sidebar-a in the positions column. The popup will close and sidebar-a should appear in the positions text field.

Now copy and paste the Lorem Ipsum text into the custom html modules text box in the same way that you did for the article. Leave all the other settings as they are and click Save and Close.

Now we need to enable the sidebar- position in the gantry template. Go to Extensions - Module Manager and click on Gantry-Default(2) Overide in the list to open the Gantry editing window. 

Click on the Layout tab. Scroll down and place a tick next to Main Body in the list. In the Main Body row click on 2 in the positions field. This divides the main body position into two columns. The letters sa (standing for 'sidebar a') should appear next to mb (for 'main body'). You can use the slider to adjust the relative widths of each. Once you have made your changes click Save in the top of the Templates Manager.

Click on the View Site link in the top right to view the changes.