creating new templates for CSS/PHP virgin

I am a complete noob. I am helping my friend with his website which until now has been entirely very basic html editing. Neither of us has ever done anything with PHP or CSS except that which is automatically generated for us by programs such as dreamweaver. I've been trying to pick it up as I'm going along.

I was trying to follow the instructions in the zen-cart.com wiki for creating a new store template... all seemed to be going well, i created a new as yet unmodified template - first thing I noticed is that all the colours changed and the logo.gif and header_bg.jpg vanished.
I worked out where I could edit all the colours in the includes/templates/MY_TEMPLATE/css/stylesheet.css and got my custom logo.gif to appear in the header... but for the life of me, I cannot work out how, where or what to modify in order to get the background image header_bg.jpg to show up in my template. I have a background I made which I would like to display behind the logo in the same way that the classic template Zen-Cart logo does.

Do I need to add something like...

TABLE.header {
background-image: url(../images/header_bg.jpg);
background-repeat: repeat-x;
background-color: #ffffff;
border-right: 1px solid #9a9a9a;
border-left: 1px solid #9a9a9a;
border-bottom: 1px solid #9a9a9a;

...into my stylesheet.css file in my template's css directory? I tried pasting this into my template's stylesheet.css file but it made no difference - maybe I didn't put it into the correct place in the file??? The url path in the example above is correct for my custom header_bg.jpg - I have uploaded my image to /MY_TEMPLATE/images/ directory

Where have I gone wrong?
Please don't kill me.

You're on the right track, but add that style for the #logoWrapper id, rather than TABLE.header, so you have:```
#logoWrapper {
background-image: url(../images/header_bg.jpg);
background-repeat: repeat-x;
background-color: #ffffff;
border-right: 1px solid #9a9a9a;
border-left: 1px solid #9a9a9a;
border-bottom: 1px solid #9a9a9a
}

bunyip:

You're on the right track, but add that style for the #logoWrapper id, rather than TABLE.header, so you have:```
#logoWrapper {
background-image: url(../images/header_bg.jpg);
background-repeat: repeat-x;
background-color: #ffffff;
border-right: 1px solid #9a9a9a;
border-left: 1px solid #9a9a9a;
border-bottom: 1px solid #9a9a9a
}

hmm... ok, I must still be doing something wrong cos it's still not showing.

After further investigation I think I may be onto something - If I right-click the logo.gif image in firefox and get properties, it tells me the image is being loaded from /zencart/includes/templates/template_default/images/logo.gif instead of /zencart/includes/templates/MY_TEMPLATE/images/logo.gif like I thought it was.

What is this telling me?

Are you sure you've activated your template in Admin? If you view the stylesheet for the page being displayed, is it your template or template_default?

do you have a URL for the store?

From Admin > Tools > Template Selection, what does it show as the template directory for the current template?

I see this in the Template selection page...

http://i7.photobucket.com/albums/y265/BlackDalek/screencap.jpg

bunyip:

do you have a URL for the store?

http://johngordon.com.au/zencart

it's entireley possible I may have cocked up somewhere during creation of the new template, fooling about with files I shouldn't be. It may be easier if I uninstall everything from the server and start again from scratch... or do you think there is a chance I can still resurrect something from this mess I've made?

It seems you haven't created a folder for
includes/templates/shop_template/images ... and stuck your image files in there

Have to agree with the Doc there - there is no file /includes/templates/shop_template/images/logo.gif

bunyip:

Have to agree with the Doc there - there is no file /includes/templates/shop_template/images/logo.gif

Ok, now I'm lost for ideas.
The folder is definitely there on the server, and the images are in there too, and they all have the same read/write attributes as the template_default directory... I can even verify this when I connect with FTP client (FireFTP Firefox browser plug-in) and view the files and folders.

So I can't work out why http://johngordon.com.au/zencart/includes/templates/template_default/images/logo.gif will display an image but http://johngordon.com.au/zencart/includes/templates/shop_template/images/logo.gif will not - gives me the 404 not found :(

Is the FireFTP plug-in known for being unreliable? I can load up and old copy of CuteFTP and use that instead if FireFTP is causing me grief.

I would depend more on FileZilla or FlashFXP as a dedicated FTP program.

just uploaded logo.gif again and now the link in my post above works. The rest of the images in that folder load too.

So now maybe I can get back to the original problem of how do I get the header_bg.jpg to show in background of the logo.gif :/

One problem ... you have used invalid comment symbols here:```
/#tagline {
color:#000000;
font-size: 2em;
text-align : center;
vertical-align: middle;
}/

As for #logoWrapper .... it doesn't seem to like honoring background properties.... :sleepy:

Woohoo! I sorted it.
I changed #logoWrapper to #headerWrapper and the image magically appeared