Terapad in:

English Arabic Chinese Dutch French German Greek Hindi Italian Japanese Korean Russian Spanish Swedish Portugese

Customise your Terapad Site Part 1.

blogpic.jpg By Joshua Davidson in Terapad how-tos
Published: Friday, 08 February 08 - 09:08 AM (GMT)
Last Updated: Friday, 08 February 08 - 10:52 AM (GMT)

How to Change your Header Image

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

The header image can communicate what your website is about and quickly persuade people that your site is worth spending time on.  When you select a Terapad template you are given a standard design that may not represent the content of your site.

Terapad supports the industry standard for design, Cascading Style Sheets (CSS) and this allows you as a user to redesign your Terapad template, creating a unique and appropriate design.

It is possible to edit your Terapad site on a PC or a Mac using any Internet Browser.  However this guide assumes that you are using a PC and using Microsoft Internet Explorer.

“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”. 

As you can see from the illustration below this guide makes use of Terapad’s ‘Resurrection’ template. Before you can change your header 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. Visit their website and follow the instructions to download it.

This is the header image for the template Resurrection.

These steps will guide you through changing your web page header

Step 1: Save your current Header Image

First visit your site and right click on the existing header 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 header.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 Header Image

The following guide uses Paint.net and is one possible method of creating your header however there are many ways of creating your new header image and the help file of your chosen graphics editing programme will be able to provide you with more advanced tips and hints. The two most important tasks are:

a.) Resizing an image to the exact size of the original header, which in the case of the resurrection template is 770x209 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 header2.jpg

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

Step 3: Paint.net

If you have already installed Paint.net on your computer, simply load it up.  Now select ‘File’ and then ‘Open’ from the top navigation bar. Browse your computer and select the existing header image that you have just saved. You need to know the size (in pixels) of your header 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 770x209 pixels.

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


Highlighted in red are the 'File' and 'Image' buttons and Rectangle Select tool.
The image that you use to replace the existing header could be a digital photograph or any other graphic. Selecting an appropriate image to replace your header can sometimes be difficult. It is important to choose an image that compliments the colour scheme of the entire website and doesn't render the Site Name and Tag Line difficult to read. (Note: The colour of both of these can be changed when you learn more about the CSS.)

When choosing the image please remember that you’re new header will have exactly the same dimensions as the original header. 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 header. 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 header image to the size you noted down earlier.  For resurrection it is width 770 and height 209. 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 header 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 header image.  Once you have found it, click 'Open and the window will close.  Now press 'Upload' and it will appear on the screen.



Highlighted in red are the 'Browse', 'Upload' and 'Blue Globe' buttons.

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 below. 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.


  Highlighted in red is the URL you require


Step 5: Replace the Existing Header

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 'Header (wraps logo_image and logo_text)'

You can either search through the text manually or press Ctrl+f and then type in header. Pressing ‘Enter’ or clicking on the 'Next' button automatically searches through the text to the places where the word header appears. 

Once you have found the Header (wraps logo_image and logo_text) section look below it and locate the background URL.

It will look like this:

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

You only need to replace the text within brackets.

Change it so that it now reads:

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


Replace the text within the brackets so that it now looks like this.

Scroll down the webpage to save the change you have made and now return to your site by clicking on the web address in the top right hand corner of your control panel.

Step 6: 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 header image. Here is just a few of our favourites:




 
Email this  |  Submit to digg  |  Add to del.icio.us


22 Comments so far:

 Leave a comment
Centering a header Marie 03/03/08
Header Joshua Davidson 03/26/08
text in the header Devair 04/28/08
Check the settings tab in control panel Brian Price 04/28/08
changing header text colour/size etc Tim Thompson 01/09/09
HTML Color Codes Justin Dean 01/11/09
Thank You ben 06/10/08
How to Undo a mistake Diana St John-Palmer 12/07/08
Reset CSS Justin Dean 12/08/08
Thankyou JustinI have actually changed t (...) Diana St John-Palmer 12/08/08
help with logos marc 12/30/08
Hi Marc,While looking at your css, it ap (...) Ces 02/09/09
thanks Thomas 01/24/09
Image left in Header Taylor 02/06/09
Hi Taylor, You need to disable the html (...) Ces 02/09/09
casino online play it right now asa 08/30/09
Site Search Henry Hall 06/23/09
Tab Icon. Henry Hall 06/23/09
Changing Photo Alignment amarely 09/23/09
Revolving header images jbrzez 11/13/09
Revolving header images jbrzez 11/13/09
ugg boot sale,ugg boot sale ugg boots sale 11/21/09


Top | Reply to this

Title: Centering a header
Author: Marie (http://nailsbyvirginia.terapad.com/)
Date Posted: 03 Mar 2008 10:43 PM (GMT)

any help you could give me on centering the header would be great. I have tried manipulating code for a while and cannot get the header to move to the left aligned with the side navigation.

Thanks so much,

 

Marie
Top | Reply to this

Title: Header
Author: Joshua Davidson The poster of this message is a site administrator (http://www.terapad.com)
Date Posted: 26 Mar 2008 11:25 AM (GMT)

Hi Marie,
 
To centre your header you should just be able to add the 'center' tag on the end of the url of the header.
 
For example, if you have this line of code:
 
 
That tag highlighted in green font will automatically aligned the image header.
 
That should work.
 
Thanks,
 
Joshua 
Top | Reply to this

Title: text in the header
Author: Devair (http://devairpierazo.terapad.com/)
Date Posted: 28 Apr 2008 12:29 PM (GMT)

Hellow !!

 I just wuold like to chance my name in the header, chance the size and possition, and may be the font. It`s possible ? tks
 
Top | Reply to this

Title: Check the settings tab in control panel
Author: Brian Price
Date Posted: 28 Apr 2008 09:53 PM (GMT)

You can change your site name and tage name there


   
Top | Reply to this

Title: changing header text colour/size etc
Author: Tim Thompson (http://thebluehouse.terapad.com)
Date Posted: 09 Jan 2009 02:51 PM (GMT)

Hi although i can change the text in the settings tab, how can I change the colour etc? I can't see the text in the css editor.

Do I create a the text on my own JPG and upload it all?

 

Regards Tim Thompson
     
Top | Reply to this

Title: HTML Color Codes
Author: Justin Dean
Date Posted: 11 Jan 2009 03:44 PM (GMT)

In the layout Tab click on Edit CSS. Scroll down until you see the section that says /* ---------- Header Text.

 

Here you will see two blocks of code.

 

#logo_text h1 a {
    font: bold italic 23px Georgia, "Times New Roman", Times, serif;
    color: #4075AA;
    text-decoration: none;   
}

#logo_text h2 a {
    font: bold 16px Trebuchet MS, Arial, Helvetica, sans-serif;
    color: #3A3A38;
    text-decoration: none;

 

You can change the colours by changing the hexidecimal colour code. There are a few websites that contain a list of these codes. See this Google search for examples.
Top | Reply to this

Title: Thank You
Author: ben
Date Posted: 10 Jun 2008 04:01 PM (GMT)

very well explained and easy to understand. thank you


Top | Reply to this

Title: How to Undo a mistake
Author: Diana St John-Palmer (http://bulgariannorthwestproperties.terapad.com)
Date Posted: 07 Dec 2008 01:38 PM (GMT)

 Having added images to header and footer  on my websiteII can't get them off now that I have decided I don't like them. How does one remove them please?  


 
Top | Reply to this

Title: Reset CSS
Author: Justin Dean
Date Posted: 08 Dec 2008 10:43 AM (GMT)

To Reset your CSS simply go into the layout tab and choose a new (or the same) design .... Smile

 

Hope it helps....




Top | Reply to this

Author: Diana St John-Palmer (http://bulgariannorthwestproperties.terapad.com)
Date Posted: 08 Dec 2008 11:08 AM (GMT)

Thankyou Justin

I have actually changed the  design several times using the layout tab, but the flipping photos are still there.

So I don't really know what to do next apart, from deleting the whole site and starting all over again.

Thanks anyway

 
Top | Reply to this

Title: help with logos
Author: marc (http://touronp.terapad.com)
Date Posted: 30 Dec 2008 06:00 PM (GMT)

hi, well ur heading advice and guids helped me a lot, but i can not figure out how to set up a logo, i created a logo on paint, and uploaded it to my assets, i even changed the display to block but tnothing it just wont come up...can u plz help me???


 
Top | Reply to this

Author: Ces
Date Posted: 09 Feb 2009 09:53 AM (GMT)

Hi Marc,

While looking at your css, it appears that your codes for logo_image is not correct. 

Try to follow this format:

#logo_image {
    top: *;
    left: *;
    position: absolute;
}

#logo_image a {
    background: url( * ) no-repeat;
    width: * ;
    height: *;
    display: block;
}

Make sure that you replace the asterisks with the corresponding values of your logo. 




Top | Reply to this

Title: thanks
Author: Thomas (http://etoliko.terapad.com)
Date Posted: 24 Jan 2009 01:42 PM (GMT)

Tongue outthank you!!!
Top | Reply to this

Title: Image left in Header
Author: Taylor (http://mwkoachapter.terapad.com)
Date Posted: 06 Feb 2009 08:57 PM (GMT)

After I changed my header, the default picture on the right is still there. How can I remove it?


Top | Reply to this

Author: Ces
Date Posted: 09 Feb 2009 09:46 AM (GMT)

Hi Taylor,

You need to disable the html code that holds the logo.

Currently the codes for that is:

#extra_1 {
    height: 220px;
    width: 191px;
    background: transparent url(/csses/scouts_usa/images/logo.gif) no-repeat;
    float: right;
    display: block;
    margin: -20px 20px 0 0;   
    z-index: 10;
    position: relative;
}

Remove that and insert this instead:

#extra_1 {
    display: none;
}

 

 


 
 
Top | Reply to this

Author: asa
Date Posted: 30 Aug 2009 12:43 AM (GMT)

casino online  play it right now


Top | Reply to this

Title: Site Search
Author: Henry Hall (http://www.chinaafricanews.com)
Date Posted: 23 Jun 2009 04:47 PM (GMT)

Hi,

My site search seems to turn up no results when I put in words that I know figure heavily on my site.

Is it possible to put a google search tab into the site? If so how?

Thanks very much,

Henry




Top | Reply to this

Title: Tab Icon.
Author: Henry Hall (http://www.chinaafricanews.com)
Date Posted: 23 Jun 2009 04:52 PM (GMT)

Also, how do I change the Icon in the tabs at the top of the page from the blank document to one I've made myself?

Thanks very much for the help.

Henry.




Top | Reply to this

Title: Changing Photo Alignment
Author: amarely (http://ethiopianjews.terapad.com/)
Date Posted: 23 Sep 2009 02:19 AM (GMT)

Hi,

How would I change the alignment of the photos from right to left?




Top | Reply to this

Title: Revolving header images
Author: jbrzez (http://tropp13400.terapad.com)
Date Posted: 13 Nov 2009 05:54 PM (GMT)

Is there a way to change the header image so that it cycles through a folder of images every time the page is displayed? I have a Girl Scout site that I want to replace the standard header image with a series of pictures of the girls in the troop (that way no one seems like the favorite). Without having to change the image every time manually is there a way to point to a folder and have it cycle through the .jpgs?


Top | Reply to this

Title: Revolving header images
Author: jbrzez (http://troop13400.terapad.com)
Date Posted: 13 Nov 2009 05:55 PM (GMT)

Oops - mistyped the site. 

Is there a way to change the header image so that it cycles through a folder of images every time the page is displayed? 

 I have a Girl Scout site that I want to replace the standard header image with a series of pictures of the girls in the troop (that way no one seems like the favorite).  Without having to change the image every time manually is there a way to point to a folder and have it cycle through the .jpgs?
Top | Reply to this

Title: ugg boot sale,ugg boot sale
Author: ugg boots sale
Date Posted: 21 Nov 2009 03:09 AM (GMT)


ugg boots sale

ugg boot sale

ugg sundance boots

 ugg classic mini

ugg classic short newest style

ugg boots

ugg classic tall

ugg cardy

ugg ultra short

ugg ultra tall

ugg cardy boots




Have your say on this article:

Help  Name:
Help  Email address:

Help  Comment title:

Help  Your comment:

Help  Your homepage:

 



<-- Back