Tutorial: How To Add A Headerimage To Template

[dutchy]

I noticed that a lot of people want to know how to add a header image or something like that.

You have to make a small modification to all 6 template files (home, category, pages, products, search and utility.tpl)
Open the files in your html editor like frontpage, dreamweaver or notepad.
For this example I'll use the "Clean" template, since this is the easiest one to get started.

Every file needs the same modification:
In the top of the file, somewhere near line 10, look for the first appearance of "table". It will look like this:

[COLOR="Red"][/COLOR]

{$site.title}

After center, you add a class to define the header, which will look like this:

Once you have done this for all 6 tpl files, you have to open the stylesheet for the Clean template. (style.css)

In the stylesheet we have to define the class we just added. The table is 730px wide, so that will be the width of the header image. The height is depending on your image:

.headerimage {
background-color: #FF0000;
height: 180px;
width: 730px;
background-image: url(/templates/Clean/YOURHEADERIMAGE.JPG);
background-repeat: no-repeat;
}

This code is telling the script:

[*]to use a red background color behind your image
[*]Your image is 180 px heigh
[*]The width of the image is 730px
[*]You want to use this headerimage
[*]If the image is smaller that the table, don't repeat the image, just show the background color

In the header is the tag for the SiteTitle (

[COLOR="Red"] {$site.title} [/COLOR] If you don't want this to show in your template, just delete. If you do want it, but on a different place, add the following to the stylesheet: .headerimage h2 {padding-left:150px;} With this I've placed the site title 150px to the center of the page. You can add padding-top, padding-right, padding-bottom and even float:right; to place your sitetitle on the rightsite of the header. I hope everyone can do something with the above and now lets build some stores and make lots of money!!;)

« Last Edit: April 28, 2008, 20:25 by dutchy » Logged All you need to build your business! Opening only May 27th Store Stacker Templates with 20 Niche headers Graphics included.

[smiley]

Thanks dutchy,
Helpful info! On behalf of the html challenged (and judging from the posts there are many here) thank you for taking the time to share your knowledge. I will definitely be putting it to use.

All the best,
Larry

[unwrapped40]

I really appreciate your generosity!!!!

[CloakAndDagger]

Thanks But again why not just create a template editor within
Store Stacker ...

[royalmice]

I took the banner code and added it in Prefrences \ website title, works like a dream.

No need to go edit css and any templates, just add the banner code in preferences:D

[successtrax]

Royalmice:

Can you supply an example of  the code you added in preferences and where you added it?  That would be really helpful!  Can you do the same for header image and footer image?

Thanks,

Rick

[royalmice]

Royalmice:

Can you supply an example of  the code you added in preferences and where you added it?  That would be really helpful!  Can you do the same for header image and footer image?

Thanks,

Rick

 I have not yet done a custom header for my site, but to give you an idea i have just inserted one on a site i am busy developing: take a look at www.travel-e-store.com The header you see there use this code :

All i did was to go to Preferences, then scroll down to Visual values and where it says "Site Title" that is where i added the code.


I am no expert at this and accidentally found this way of doing it, will it work in the footer -- i have no idea.

I am sure there is some complications by doing it this way, but not sure what they are, and will leave it for the wise old guys out here to tell me. However i know the Meta Title tag is now all screwed up, because it show the code i have inserted in for the header, but i am sure it can be fixed by playing with the tokens --- OMAR --- what do u suggest ??

[royalmice]

O,K so i mentioned about the Title meta tag that is all screwed up.
I manged to solve this by changing the token from

$site.title

to

$site.tagline

I ofcourse had to adjust in preferences my tagline to display what i want in the meta title.   Touch wood it all seems o.k, and i believe it is a far easier way to  change the header image than having to go mess with CSS and other stuff (i think)

 Omar, whilst doing the above changes i did not see any META desroption tag. Is it because i did not look properly ? or is there a reason for it not being there. If it is left out for no reason then i am thinking of adding it, using one of the text tokens

$site.text_unit_1

. Or would it be better to just add the meta desription in the template instead of using the text token.

I am really having a great deal of fun with this SS

[royalmice]

I dont know who's stupid idea it was to add the code into site title :-)

For some reason it keeps disapearing (the code that is)

[ramseym]

I followed the code posted above; and everything works(back ground color, size, etc.) except my image. I have the correct path. I even changed to new folder etc., yet I still can't get my image to show up. I changed from jpg to gif. and back.

I have also resized my header file. I thought at first it was too large.

Any help would be appreciated.

I have been working awhile to try and just get one store up.

Thanks
Melissa

[Mark Kaz]

Melissa,

If your SS is in "store" folder, you may need to change this line:
background-image: url(/templates/Clean/YOURHEADERIMAGE.JPG);
to:
background-image: url(/store/templates/Clean/YOURHEADERIMAGE.JPG);