Another way to Add A Header

[stan6637]

Here Is how I added a header to my site http://mycomicbookheros.com/

This is going to be pretty basic so you experts please be kind, nothing fancy just a header.

1. choose a header you want. Save it on your 'puter where you can find it.

2. For best results upload it to your template file....to do this...go to your cpanel .... open to the file manager.... open public_html....open templates.....click on    
[COLOR="Red"]Upload file(s)[/COLOR]...browse to where you saved your header and upload it.

3. To put the header on your site....go to your cpanel .... open to the file manager.... open public_html....open templates.....choose your template and open.... I used the clean for my page...look for the files like this [COLOR="Red"]category.tpl[/COLOR] notice the [COLOR="Red"].tpl[/COLOR] ending to the file that is what you want.....click on that file.....now click on edit file..... your page code will come up....

4.  go down a little way till you find this section of the .tpl code








[COLOR="Lime"]insert header code here[/COLOR]





5. Header Code... Copy and paste this into a word pad for easy changes



       src="http://www.[COLOR="Red"]yoursite.com[/COLOR]/templates/[COLOR="Blue"]header.jpg[/COLOR]">




Change the [COLOR="Red"]yoursite.com[/COLOR] to what ever the name of your site is

If you place your store in a subfolder it will look something like this  [COLOR="Red"]yoursite.com/store[/COLOR]

Then change the [COLOR="Blue"]header.jpg[/COLOR] to the name you saved your header to in your template file.

In fact if you go to your template file in your cpanel and click on the header image file it will give you the complete address for the file.....then just copy and past it as hi lighted in orange.



       src="[COLOR="Orange"]http://www.yoursite.com/templates/header.jpg[/COLOR]">




6.Width And Height

This section controls the width and height of your header
width: [COLOR="Magenta"]750[/COLOR]px; height: [COLOR="Magenta"]200[/COLOR]px....  just change the numbers so it best fits your page.... the 750 x 200  is a good starting point.

7. Insert on your template pages...copy the code you just edited and paste it to your .tpl file where I have it markred in green on step4......click save

Your header should now be live on the page you just edited.

8. template list to look for and edit

category.tpl
home.tpl
pages.tpl
products.tpl
search.tpl
utilities.tpl

[dutchy]

Way to go Stan,

This is a good way to start with it! But (there's always a but isn't there?) if you do it like this, it means that every time you create a new store or want to change the header image of your store, you have to go to the whole procedure again. That's why I explained how to add a header using a "class" . If you do this once, putting the code in all template pages, you will never have to go into the code again. Just change the picture and you have a new header.

If you want to learn some more about html and css I can recommend this one:
http://www.yourhtmlsource.com/
Lots of tutorials for html and css for beginners.