Logo/header image!

[SteveeF]

I am slightly confused and would really appreciate some help , although its not medical help I need at this stage!!

I am trying to add my company logo to the top of each page of the shopping cart. I have read the help pages etc but cant seem to figure out if I follow the rules for : a header image or a logo image as in my mind its a logo but help would be appreciated!

It seems very confusing, I have deleted the Zen cart logo and also the other messages although I still have a link with a red cross that I cant seem to find at the top of my pages!!

I have tried to creat a custom folder as well and it doesnt seem to show up in my admin section:-(


Thanks
Ste

[charmedbytina2]

I am slightly confused and would really appreciate some help , although its not medical help I need at this stage!!

I am trying to add my company logo to the top of each page of the shopping cart. I have read the help pages etc but cant seem to figure out if I follow the rules for : a header image or a logo image as in my mind its a logo but help would be appreciated!

It seems very confusing, I have deleted the Zen cart logo and also the other messages although I still have a link with a red cross that I cant seem to find at the top of my pages!!

I have tried to creat a custom folder as well and it doesnt seem to show up in my admin section:-(


Thanks
Ste

Look here to find info on logo/banner:

https://www.zen-cart.com/tutorials/i...earchmatch=yes

What "custom" folder are you trying to add?

Tina

[SteveeF]

Ok I need to ask this in a different way.
What is the difference between a logo and a header?

I am trying to add a custom folder so that I can save my own Css template , as a custom template. I realise I dont have to call it " custom" but I find it easier!!

Thanks
Ste

[fairestcape]

Try this:-

http://www.zen-cart.com/wiki/index.p...on_-_Templates

[stevesh]

The header is the area at the top of your Zencart pages. It's usually as wide as your main wrapper.

The logo is an image (usually) that goes inside the header. It may be the same size as the header.

I strongly suggest you get the Firefox browser (if you don't have it) and the Web Developer and/or Firebug plug-ins. One thing you can do with them is see where each class and id in the stylesheet are located on your pages. Very helpful.

[SteveeF]

Ahh ok so is there an easy way to have a logo across the whole of the top of every page on the Zen cart? Or do I have to set up the logo image and header image at the same time?
Its very confusing and frustrating!!
I really need to get this sorted as its taking up too much time.:-(


Thanks for your help

Ste

[fairestcape]

If you've just installed ZC, and are working in the STANDARD install, then the template that is being invoked is the CLASSIC template.

The images that are important to your header (where the LOGO sits), are located in includes/templates/classic/images.

Navigate to this folder in your FTP program, and you will see:-

- header_bg.jpg
- logo.gif
- scr_template_default.jpg
- tile_back.gif

The two you need to concern yourself with now, are:-

- header_bg.jpg
- logo.gif

(I strongly suggest you FTP these images to your hard drive and open them in an image viewer/editor. Look at their composition, and size in pixels (height and width). Then look at your ZC home page. Can you now see how the LOGO image is layered over the TOP of the BACKGROUND image).

The first one, - header_bg.jpg - is the BACKGROUND image for the header, and if you want your LOGO to occupy the whole header space, then this background image is not needed. Do not delete it from the images folder... it's presence is governed by the STYLESHEET (stylesheet.css) - more of that later.

A standard install of ZC sets the width of the template to a default of 750 pixels - which will apply to the header as well.

These widths are governed in the stylesheet, and if you are using the classic template, the appropriate stylesheets will be in:-

includes/templates/classic/css

Open up stylesheet.css for editing. Do this with a plain text editor, such as Notepad++, or Crimson Editor

Now, let's see how the stylesheet influences these images...

Around lines 175 to 185 of the stylesheet, you'll see the start of the styles applying to all the "wrappers". Find this one...

#logoWrapper{
	background-image: url(../images/header_bg.jpg);
	background-repeat: repeat-x;
	background-color: #ffffff;
	height:75px;
	}

If you "comment out" the reference to the background-image, it will not display...

#logoWrapper{
	/*background-image: url(../images/header_bg.jpg);*/
	background-repeat: repeat-x;
	background-color: #ffffff;
	height:75px;
	}

Now, if you look just ABOVE these lines of code you will see:-

/*wrappers - page or section containers*/
#mainWrapper {
	background-color: #ffffff;
	text-align: left;
	width: 750px;
	vertical-align: top;
	border: 1px solid #9a9a9a;
	}

Here, you see that the MAIN WRAPPER of the template is set to 750 pixels.

... and when you look at the LOGOWRAPPER height (see above), you'll see this is set to 75 pixels.

So, assuming you wanted to retain these dimensions, you would now create an image - called "logo.gif", with dimensions 750px wide and 75px deep.

You would load logo.gif up to the images folder in "classic" and OVERWRITE the existing logo.gif.

NOW...

If you want to change logo.gif to a JPEG (logo.jpg) - which you should do for a better quality image...

Then you are going to have to edit:-

includes/languages/english/classic/header.php

(... assuming of course, that you're using the classic template system).

Find the following code:-

// added defines for header alt and text
define('HEADER_ALT_TEXT', 'Powered by Zen Cart :: The Art of E-Commerce [home link]');
define('HEADER_SALES_TEXT', '<h1>Sales Message Goes Here</h1>');
define('HEADER_LOGO_WIDTH', '200px');
define('HEADER_LOGO_HEIGHT', '70px');
define('HEADER_LOGO_IMAGE', 'logo.gif');

and you will see the obvious... if you created a "logo.jpg" image that is 750px wide and 75px high, then your code here would look like this:-

// added defines for header alt and text
define('HEADER_ALT_TEXT', 'Powered by Zen Cart :: The Art of E-Commerce [home link]');
define('HEADER_SALES_TEXT', '<h1>Sales Message Goes Here</h1>');
define('HEADER_LOGO_WIDTH', '750px');
define('HEADER_LOGO_HEIGHT', '75px');
define('HEADER_LOGO_IMAGE', 'logo.jpg');

... and while you're about it, you may also want to get rid of "sales message goes here" and change the HEADER-ALT-TEXT to suit your site as well.

[SteveeF]

Thanks for the taking the time in answering my call for help!! I will give it a go later today and let you know how I get on.
I have actually customised quite a bit of the cart already just the image I need at the top of the pages dictates the overall colour scheme I want to use and until I get it all up and running I cant finally finish it!!
my site is : www.thewatchdealer.co.uk btw!!
Any comments will be greatly appreciated!!

thanks
Ste