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