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.
open full sized image
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.
open full sized image
Page 3
Here we've opened the templates folder, and you can see that there is a folder called skyline.
open full sized image
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.
open full sized image
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.
open full sized image
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.)
open full sized image
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.
open full sized image
Page 9
Here is the Template Manager.
- Select the skyline template
- Click Edit HTML
open full sized image
Page 10
The Template HTML editor shows. This shows the HTML of the templates index.php file.
open full sized image
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:
- css folder - contains the template CSS stylesheet
- images - contains the template images
- index.php - the main template file
- template_thumbnail.png - a thumbnail view of how the template looks
- templateDetails.xml - some info about the template, such as author and creation date
open full sized image
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.
open full sized image
Page 14
Let's take a look at the site again. We want to change the main image (with the bridge).
open full sized image
Page 17
Now we return to the Template HTML editor. Scrolling down, we locate where the header.jpg filename appears in the template.
open full sized image
Page 18
We've just changed the file name to our new logo name, plus changed the height and width.
open full sized image
