centering logo

I know this is in the tutorials/FAQs but even after following those directions I can't get it right.

www.heavenlycreationsoklahoma.com

I want the heavenly creations logo centered left to right here is what i have entered on my style sheet

.centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .centerBoxContentsAlsoPurch, .attribImg {
float: left;
}
#logo {text-align: center;}

i think this is correct but its obviously not working so could someone point me in the right direction?

Thank you!!

Well the code is more particular and is not reading your mind!!!

You have this defined and attached as a background image header_bg.jpg to the logo wrapper and you are calling #logo to be centered and this does not exist.

#logoWrapper{
	background-image: url(../images/header_bg.JPG);

So a couple of changes....remove the logoWrapper entries for this image including the repeat etc.

Now to make this easy if you have a graphics app that can create a gif - convert your image into a gif as logo.gif and upload this to your template/images folder.

If not rename the jpg to logo.jpg and edit a copy of /includes/languages/english/header.php and find this and change the red text(this is case sensitive and needs to match your image name)

define('HEADER_LOGO_IMAGE', 'logo.jpg');

The css is correct. The logo is defined as includes/templates/YOUR_TEMPLATE/images/header_bg.JPG. Is that what you have defined in includes/languages/english/YOUR_TEMPLATE/header.php?

// added defines for header alt and text
  define('HEADER_ALT_TEXT', 'Powered by Zen Cart :: The Art of E-Commerce');
  define('HEADER_SALES_TEXT', 'TagLine Here');
  define('HEADER_LOGO_WIDTH', '192px');
  define('HEADER_LOGO_HEIGHT', '64px');
  define('HEADER_LOGO_IMAGE', 'logo.gif');

That image is pretty big at 512 wide. If you want to center it, cut out any unnecessary space or reduce the size of the text.

kobra:

Well the code is more particular and is not reading your mind!!!

You have this defined and attached as a background image header_bg.jpg to the logo wrapper and you are calling #logo to be centered and this does not exist.

#logoWrapper{
background-image: url(../images/header_bg.JPG);

> So a couple of changes....remove the logoWrapper entries for this image including the repeat etc.
>  
> Now to make this easy if you have a graphics app that can create a gif - convert your image into a gif as logo.gif and upload this to your template/images folder.
>  
> If not rename the jpg to logo.jpg and edit a copy of /includes/languages/english/header.php and find this and change the red text(this is case sensitive and needs to match your image name)
> ```
define('HEADER_LOGO_IMAGE', 'logo.jpg');

When I attempted to do this, my logo image disappeared completely.

When I attempted to do this, my logo image disappeared completely.
What did you end up doing exactly??? as I offered more than one solution for the logo.xxx image

Your logo is still identified as includes/templates/YOUR_TEMPLATE/images/header_bg.JPG and is not being treated as the background for the logo, not the logo.

Okay, I think that the logo is set as the logo and not as a background image. But, it is still not centered...I did reduce the size some but cannot reduce it much more.

Your site is still loading this as the image
tionsoklahoma.com/catalog/includes/templates/blue_sky/images/header_bg.JPG

kobra:

Your site is still loading this as the image
tionsoklahoma.com/catalog/includes/templates/blue_sky/images/header_bg.JPG

okay, i guess i am just at a complete loss as to how to delete a 'header image' and add a logo image so could someone please direct me how or give me a link that will tell me how.
Thank you.

Please post what tools you have??

Your graphic editor program -
A short list of the file names of the images that you are working with for this

We can go from there

kobra:

Please post what tools you have??

Your graphic editor program -
A short list of the file names of the images that you are working with for this

We can go from there

I don't know what you mean by tools exactly. As far as a graphics editor program, i don't have one per se. I have of course paint that comes with windows and I have a photo editor--kodak easy share. The "logo" is just word art created with microsoft word 2003.

The "logo" is just word art created with microsoft word 2003
So how are you making this an image file?? you can not use a ??.doc file for this

Word art is an image created within a document. A person only has to copy that image into something like paint and save it with a name and image file type like .jpg or .bit or whatever.

.gif is probably not an option - so go back to my first post and name the file you create as logo.jpg and follow the edit that you need to make and where the file needs to be uploaded to.

kobra:

.gif is probably not an option - so go back to my first post and name the file you create as logo.jpg and follow the edit that you need to make and where the file needs to be uploaded to.

Actually yes, I can save it as .gif or .jpg or .tif or even .png
But I don't know what you mean by 'follow the edit that you need to make'. What edit? I do know where to upload it to.

KoBra:

Now to make this easy if you have a graphics app that can create a gif - convert your image into a gif as logo.gif and upload this to your template/images folder.

If not rename the jpg to logo.jpg and edit a copy of /includes/languages/english/header.php and find this and change the red text(this is case sensitive and needs to match your image name)
Code:

define('HEADER_LOGO_IMAGE', 'logo.jpg');

Edit is only required if the image is not to be a gif as logo.gif is the default in this file

<?php
/**

• @package languageDefines
• @copyright Copyright 2003-2006 Zen Cart Development Team
• @copyright Portions Copyright 2003 osCommerce
• @license http://www.zen-cart.com/license/2_0.txt GNU Public License V2.0
• @version $Id: header.php 2940 2006-02-02 04:29:05Z drbyte $
  */
  // header text in includes/header.php
  define('HEADER_TITLE_CREATE_ACCOUNT', 'Create Account');
  define('HEADER_TITLE_MY_ACCOUNT', 'My Account');
  define('HEADER_TITLE_CART_CONTENTS', 'Shopping Cart');
  define('HEADER_TITLE_CHECKOUT', 'Checkout');
  define('HEADER_TITLE_TOP', 'Top');
  define('HEADER_TITLE_CATALOG', 'Home');
  define('HEADER_TITLE_LOGOFF', 'Log Out');
  define('HEADER_TITLE_LOGIN', 'Log In');
  // added defines for header alt and text
  define('HEADER_ALT_TEXT', 'Powered by Zen Cart :: The Art of E-Commerce');
  define('HEADER_SALES_TEXT', ' ');
  define('HEADER_LOGO_WIDTH', '400px');
  define('HEADER_LOGO_HEIGHT', '77px');
  define('HEADER_LOGO_IMAGE', 'logo.jpg');
  // header Search Button/Box Search Button
  define('HEADER_SEARCH_BUTTON','Search');
  define('HEADER_SEARCH_DEFAULT_TEXT', 'Enter search keywords here');
  ?>

my code already said what you said to change it to.

KoBra:

A short list of the file names of the images that you are working with for this
If you had supplied this as asked this could have been determined alot quicker

You still have the css code for the background image header.jpg get rid of the red code!

#logoWrapper{
	background-image: url(../images/header_bg.JPG);
	background-repeat: repeat-x;
	height:82px;
	width:512px;
	background-position: middle;
	}

your file:
/includes/templates/blue_sky/images/logo.JPG

Your code:
define('HEADER_LOGO_IMAGE', 'logo.jpg');

jpg and JPG are not the same!! Change one of them so that they match

kobra:

If you had supplied this as asked this could have been determined alot quicker

You still have the css code for the background image header.jpg get rid of the red code!

#logoWrapper{
background-image: url(../images/header_bg.JPG);
background-repeat: repeat-x;
height:82px;
width:512px;
background-position: middle;
}

>  
> your file:
> /includes/templates/blue_sky/images/logo.JPG
>  
> Your code:
> define('HEADER_LOGO_IMAGE', 'logo.jpg');
>  
> jpg and JPG are not the same!! Change one of them so that they match
 
 
Okay, I deleted the code in red.  I changed the image file from *.JPG to *.jpg.  Now my logo does not show up although there is a blank space left for it.  [www.heavenlycreationsoklahoma.com](http://www.heavenlycreationsoklahoma.com) I think that I did exactly as you instructed, but perhaps not.

http://www.heavenlycreationsoklahoma.com/includes/templates/blue_sky/images/logo.jpg

Produces your image - you need to tripple check your edits, the files that control this, and where you have them loaded to - you current code is not calling any logo image nor the text alternate