Page 1

For the next step, we'd like to change the design of the header area a bit, including changing the graphic. Here's the site as it looks now.

  Click on the image for page view.

Page 2

We'll change the template files using FileZilla. (You can use whatever method you normally use to change files on your server). Here is the site opened in FileZilla. Note that there is a folder named templates that you uploaded as part of Joomla.

  Click on the image for page view.

Page 3

Here we've opened the templates folder, and you can see that there is a folder called skyline.

  Click on the image for page view.

Page 4

Here we have opened the skyline folder. There is a folder inside it named images. We want to change the picture at the top of the page, so we need to upload the new image to this folder.

  Click on the image for page view.

Page 5

Now we're viewing the images folder. In the left pane, we've navigated to a folder holding the new image we want to upload.

  Click on the image for page view.

Page 6

Here we've uploaded the new logo file by dragging it from the left pane to the right. (If you have problems uploading, you could have a permissions problem. See the previous tutorial where we added a new template, but first had to change settings in Joomla to set file and folder permissions.)

  Click on the image for page view.

Page 7

Now we have uploaded our new logo file, and we need to edit the template to point to it. Here we are back in the Joomla admin page.

  Click on the image for page view.

Page 8

Click Site - Template Manager - Site Templates.

  Click on the image for page view.

Page 9

Here is the Template Manager.

1. Select the skyline template
2. Click Edit HTML

  Click on the image for page view.

Page 10

The Template HTML editor shows. This shows the HTML of the templates index.php file.

  Click on the image for page view.

Page 11

Let's take another look at the files in FileZilla. Here again is the folder containing the skyline template. You can see that there only a few items here:

1. css folder - contains the template CSS stylesheet
2. images - contains the template images
3. index.php - the main template file
4. template_thumbnail.png - a thumbnail view of how the template looks
5. templateDetails.xml - some info about the template, such as author and creation date

  Click on the image for page view.

Page 12

The index.php file in the template folder is the location of the file that determines the positioning of modules and content on the site. Let's take a look at it piece by piece.

The index.php file basically contains an HTML page with some PHP instructions. The HTML determines how the page will display. It basically has two parts: the HTML HEAD element and the HTML BODY element.

Page 13

The HTML in this file might look complicated, but it is actually pretty simple, because a large part of the file consists of things we don't need to worry about. In fact, right now we only need to look at the BODY element. Scrolling down, you can see where the BODY element starts.

  Click on the image for page view.

Page 14

Let's take a look at the site again. We want to change the main image (with the bridge).

  Click on the image for page view.

Page 15

In FireFox, we can right click on the image and choose Properties.

  Click on the image for page view.

Page 16

This shows us the file name of the logo image (header.jpg).

  Click on the image for page view.

Page 17

Now we return to the Template HTML editor. Scrolling down, we locate where the header.jpg filename appears in the template.

  Click on the image for page view.

Page 18

We've just changed the file name to our new logo name, plus changed the height and width.

  Click on the image for page view.

Page 19

Click Save.

  Click on the image for page view.

Page 20

Here's the site as it looks now. The header graphic has been changed.

  Click on the image for page view.