Replacing images

Now you will replace images in the head.tpl template. First we have to determine which image files are used in the head template.

Open the head.tpl (Administration > Edit templates > head.tpl) and in the template code you can notice:

<TD colSpan=2 valign="top" width="284"><a href="/"><img src="../{ #ImagesDir# }/logo.gif" width="284" height="60" border=0></a></TD>
<TD background="../{ #ImagesDir# }/top1.gif" align=right valign=middle>

and

<TD rowSpan=3 width=99% valign=top class=TableTop background="../{ #ImagesDir# }/top2.gif" style="background-repeat: repeat-x">

The images used in the head template are: logo.gif, top1.gif and top2.gif.

Create new files with your image editor: logo.gif, top1.gif and top2.gif and upload them into your "Templates" -> "images" directory".

Old: logo.gif width="284" height="60"

New: logo.gif width="284" height="60"

Old: top1.gif width="48" height="60"

New: top1.gif width="52" height="60"

Old: top2.gif width="1000" height="24"

New: top2.gif width="1000" height="24"

Optionally you can change the orange dialog background image:

Old: dialog_bg.gif width="1000" height="30"

New: dialog_bg.gif width="1000" height="30"

This tutorial uses blue-yellow color schema and we will replace orange graphics with yellow and blue.

Tip: You can use images from this tutorial, right click on the picture and choose Save Picture As to save the picture to your local computer.

Upload skin1 image files to the server (Go to "Control Panel" -> "Templates" -> "images" directory -> upload.)

• logo.gif

• top1.gif

• top2.gif

• bg.gif

You can view the result in you browser. If done correctly, your new images will appear (do not forget to refresh the page)