Fast, Easy and Free Website Creation

The Official Terapad Blog

Customise your Terapad Site Part 2.

		By Joshua Davidson in Terapad how-tos Published: Thursday, 06 March 08 - 02:04 PM (GMT) Last Updated: Thursday, 06 March 08 - 11:13 PM (GMT)

How to Change your Footer Image

This is the second in a series of step by step guides that will demonstrate simple ways of changing the appearance of your Terapad site.

The footer image appears at the bottom of your website and is another way of illustrating the general content of your site.

It is possible to edit your Terapad site on a PC or a Mac and using any Internet Browser. However this guide assumes that you are using a PC and a version of Internet Explorer. This guide makes use of Terapad’s ‘Resurrection’ template. Before you can change your footer image you will also need access to an image editing programme. If you don’t have one that you are familiar with on your computer you can download Paint.net for free.

This guide transforms http://before.terapad.com into http://after.terapad.com. Feel free to visit both sites to get an idea of the changes.

Step 1: Save your current Footer Image

First visit your site and right click on the existing footer image. Then select ‘Save Background As’. A box will appear that asks you to name the file and decide on a location to save it to. The image is currently called feather.jpg. It will normally be saved into your 'My Pictures' folder but make sure you take note of the exact location you’re saving the image to, as you will need to locate it in the next step.

Step 2: Edit your Footer Image

There are many ways of creating your new footer image and the help file of your chosen graphics editing programme will be able to provide you with tips and hints. The two most important tasks are:

a.) Resizing an image to the exact size of the original footer, which in the case of the resurrection template is 103x51 pixels.

b.) Saving the image as a JPEG file and at a resolution of 72dpi. You must name the file so that there is no g a p s, I have called mine footer2.jpg

Step 3 uses Paint.net and is one possible method of creating your new footer image. If you want to use your own programme, simply follow the instructions above and skip to Step 4.

Step 3. Paint.net

Load Paint.net on your computer and select ‘File’ and then ‘Open’ from the top navigation bar. Browse your computer and select the existing footer image that you have just saved. You need to know the size (in pixels) of your footer image in order to replace it. Once the image is open its exact size (in pixels) will be displayed at the bottom right of the Paint.net interface. In the case of the resurrection template the image is 103x51 pixels.

Now that you know the exact size of the original footer image, you are ready to create your new one.


When choosing the image please remember that you’re new footer will have exactly the same dimensions as the original footer. So you will need to use an image with similar dimensions.

Once you have chosen an image that you wish to use, open it in Paint.net the same way as before.

Use the Rectangle Select tool from the vertical tools box and then click and drag to highlight the area of the image that you wish to become your new footer image. Once you are happy with your selection click ‘Image’ in the top navigation bar and then ‘Crop to Selection’.

You now need to resize the image. Click ‘Image’ again but this time select ‘Resize Image’. A box will pop up displaying the current size of the image. First deselect the Maintain Aspect Ratio by removing the tick from the box. Now change the dimensions of you footer image to the size you noted down earlier. The resolution of the image should be set to 72dpi.

If you are happy with your image return to the top navigation bar and select ‘File’ and then ‘Save As’. Save the file with a new name and as a JPEG, making sure that you don't include any spaces in the image title. Remember where you save the file as you will need it in the next step. A box will pop up asking you to confirm the quality of the image you are saving, simply keep it at 100% and click ‘Ok’.

Step 4: Upload the Image to your Assets

You now need to upload your new footer image. Go to your 'Assets' tab within the Terapad control panel. Click on the folder called 'images' and then 'Browse' your computer to find your newly saved footer image. Once you have found it, click 'Open' and the window will close. Now press 'Upload' and it will appear on the screen.



Once it appears, click on the blue globe under the file. You will be directed to a page which displays two lines of text. You need to copy the text in the top box as indicated in the picture above. Click in the box several times until all of the text is highlighted in blue. Then press Ctrl+c to copy it. Your computer will now remember this line of text.


Step 5: Replace the Existing Footer

Select the Layout tab in your control panel and then click on Edit CSS.
You are now going to edit the 'CSS Body'. The screen shot above shows you the section of text that you require. It is called ‘Extra DIV Element Specifications'
You can either search through the text manually or press Ctrl+f and then type in feather. If you are using a different template you will need to type in the name of the footer image that you first discovered when you right clicked and saved background as. Press ‘Enter’ or click on the 'Next' button to automatically search through the text to the places where the word appears.

Once you have found the ‘Extra DIV Element Specifications’ section look below it and locate the background URL.

It will look like this,

background: url(/csses/resurrection/images/feather.jpg) no-repeat 50% 0;
}

You only need to replace the text within brackets. Change it so that it now reads,

background: url(/resources/11744/assets/images/footer2.jpg) no-repeat 50% 0;
}


Remember to save the change you have made and now return to your website.

Step 7: Admire your Work

If your site doesn’t appear to have changed press Ctrl+r, this reloads the site. Congratulations you now have a completely unique web presence.

To see the results of following this guide you can visit http://after.terapad.com/ and see how it differs from http://before.terapad.com/

There are many more examples of people changing their footer image. Here is just a selection of our favourites:

 

4 Comments so far:

Leave a comment

How to eliminate footer image?	Kris	03/28/08
Hey, you would simply delete the line of (...)	Justin Dean	04/18/08
Thanks so much Justin. I did find a solu (...)	Kris	04/23/08
guestbooks	agnes	07/13/09

Top | Reply to this Title: How to eliminate footer image? Author: Kris Date Posted: 28 Mar 2008 11:35 PM (GMT) Hello,  Rather than replacing the footer image, which I tried to do without success, how do I just remove it instead?
	Top | Reply to this Author: Justin Dean (http://justindean.terapad.com) Date Posted: 18 Apr 2008 09:51 AM (GMT) Hey, you would simply delete the line of css code that refers to the footer.jpg ... then nothing will display hope it helps
Top | Reply to this Author: Kris Date Posted: 23 Apr 2008 05:00 PM (GMT) Thanks so much Justin. I did find a solution finally.
Top | Reply to this Title: guestbooks Author: agnes Date Posted: 13 Jul 2009 10:01 PM (GMT) How do i install a guest book on my website

Have your say on this article:

Name:

Email address:

Comment title:

Your comment:

Your homepage:

  I want to be notified by email of all further comments posted in this topic.

<-- Back