Header Logo - One for the Home Page, one for all other pages?

I like the way my shops look. I'm strong on graphic design, I've made nice looking pages if I do say so myself, big header_logos with harmonizing backgrounds, great color schemes, careful attention to detail with that tile_back.gif and all the different pixel heights at which it is used... I like my pages.

BUT, that big header... I don't want it on every single page, just the home page. I want all my other pages to have a smaller header, maybe 150 pixels high instead of the 300 or more pixels on my websites' home pages.

So, to do that, do I have to make a new .css stylesheet for each and every other single page, other than the home page? This seems like a simple logical thing, BIG HEADER for HOMEPAGE and SMALL HEADER for IF NOT HOMEPAGE, LOL. How do I address this?

Thank you in advance,

CultureClick the baby-almost-toddler Zenner

If the file /includes/languages/english/YOUR_TEMPLATE/header.php doesn't already exist, create it using a copy of /includes/languages/english/header.php. For v1.5.0, that file looks like:

<?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', 'TagLine Here');
  define('HEADER_LOGO_WIDTH', '192px');
  define('HEADER_LOGO_HEIGHT', '64px');
  define('HEADER_LOGO_IMAGE', 'logo.gif');

// header Search Button/Box Search Button
  define('HEADER_SEARCH_BUTTON','Search');
  define('HEADER_SEARCH_DEFAULT_TEXT', 'Enter search keywords here');

?>

Make the changes in red to include information for your home-page-only logo (assuming that the alt-text and tag-line remain the same):

<?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', 'TagLine Here');
if ($this_is_home_page) {
  /* These definitions apply to your home page only */
  define('HEADER_LOGO_WIDTH', '192px');
  define('HEADER_LOGO_HEIGHT', '64px');
  define('HEADER_LOGO_IMAGE', 'logo_for_home_page.gif');
} else {
  /* These definitions apply to all other pages */
  define('HEADER_LOGO_WIDTH', '192px');
  define('HEADER_LOGO_HEIGHT', '64px');
  define('HEADER_LOGO_IMAGE', 'logo.gif');
}

// header Search Button/Box Search Button
  define('HEADER_SEARCH_BUTTON','Search');
  define('HEADER_SEARCH_DEFAULT_TEXT', 'Enter search keywords here');

?>

Oh thankyou! But if the big header logo is logo1.jpg and the shorter header logo is logo2.jpg... how do you tell it so?

My big header logo might be, say 750 px wide and 300 high. The shorter one would be the same 750 pix wide and 100 high, for example.

So I would do this:

// 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', 'TagLine Here');
if ($this_is_home_page) {
/* These definitions apply to your home page only /
define('HEADER_LOGO_WIDTH', '750px');
define('HEADER_LOGO_HEIGHT', '300px');
define('HEADER_LOGO_IMAGE', 'logo_for_home_page.gif');
} else {
/ These definitions apply to all other pages */
define('HEADER_LOGO_WIDTH', '750px');
define('HEADER_LOGO_HEIGHT', '100px');
define('HEADER_LOGO_IMAGE', 'logo_for_notthehome_page.gif');

Yes?

Oh NO! I think we are talking apples and oranges here.

I'm talking about the big image at the top of the shop home page, which in the stylesheet.css is coded like this:

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

#headerWrapper, #contentMainWrapper, #logoWrapper, #cartBoxListWrapper, #ezPageBoxList, #cartBoxListWrapper ul, #ezPageBoxList ul, #mainWrapper, #popupAdditionalImage, #popupImage {
margin: 0em;
padding: 0em;
}

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

So on the home page, and right now on EVERY page, the header image is 850 px wide and 315 high. But I want this to be true only on the home page, and I want to provide another image, 850 x 100, that would take the place of that tall image, on every page EXCEPT the home page. I'm sorry, I guess I used the wrong name for the image when I first stated the question, maybe? Or maybe I'm just even more confused?

CultureClick the toddler Zenner

Ooops - HEADER BACKGROUND IMAGE, not header logo image.

In the classic template stylesheet.css it's like this:

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

I got mixed up and called the image header_logo.jpg in my stylesheet, but it should be header_bg . And again, the idea is to have a big tall one on the home page, and a shorter version on every other page. Hmmmm, can you help me out on this?

Thanks!

CultureClick the toddler Zenner

Create the file /includes/templates/YOUR_TEMPLATE/css/index_home.css and add:

#logoWrapper{
background-image: url(../images/logo_for_home_page.gif);
background-repeat: no-repeat;
background-color: #ffffff;
height:315px;
}

Edit the file /includes/templates/YOUR_TEMPLATE/css/stylesheet.css (if it doesn't exist, copy the file from the template_default directory).

#logoWrapper{
background-image: url(../images/logo_for_notthehome_page.gif);
background-repeat: no-repeat;
background-color: #ffffff;
height:100px;
}

There are other page, category and product overrides that can be done with CSS. Read /includes/templates/template_default/css/CSS_read_me.txt for more information.

OH, THANK YOU! I am going to try that shortly, and if it works, I will venerate your ancestors! :D

lat9:

Create the file /includes/templates/YOUR_TEMPLATE/css/index_home.css and add:

#logoWrapper{
background-image: url(../images/logo_for_home_page.gif);
background-repeat: no-repeat;
background-color: #ffffff;
height:315px;
}

Okay, so I am guessing that this file doesn't have only the stuff in red above, it is the entire MYTEMPLATE/css/stylesheet.css file that I have now, right? With that modification and saved as /includes/templates/YOUR_TEMPLATE/css/index_home.css . Right?

lat9:

Edit the file /includes/templates/YOUR_TEMPLATE/css/stylesheet.css (if it doesn't exist, copy the file from the template_default directory).

#logoWrapper{
background-image: url(../images/logo_for_notthehome_page.gif);
background-repeat: no-repeat;
background-color: #ffffff;
height:100px;
}

Okay, and this is the MYTEMPLATE/css/stylesheet.css file that I have right now, right? And add the stuff in red above?

lat9:

There are other page, category and product overrides that can be done with CSS. Read /includes/templates/template_default/css/CSS_read_me.txt for more information.

Ooooo! Bedtime reading! This stuff brings out my inner techie geek.

Thank you, I'll report back on my success or failure!

CultureClick the toddler Zenner

OH YES OH YES OH YES! May the Techological Gods and the Zen Higher Beings bless you! May your ancestors, technologically inclined or otherwise, be granted Heavenly Patents on all their best ideas, and may those ideas be trasmitted to the entrepreneurial side of yourself, so you make a million dollars on a new idea! Thank you!

I'm glad you got it sorted out! The index_home.css (at least initially) should contain only the stuff in red and you'll edit the fragment in your stylesheet.css to account for the specifics of your non-homepage logo.

Okay, now, so I was cogitating on this last night, right? And I thought, well, if this is the way to go:

// 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');
if ($this_is_home_page) {
/* These definitions apply to your home page only /
define('HEADER_LOGO_WIDTH', '192px');
define('HEADER_LOGO_HEIGHT', '64px');
define('HEADER_LOGO_IMAGE', 'logo_for_home_page.gif');
} else {
/ These definitions apply to all other pages */
define('HEADER_LOGO_WIDTH', '192px');
define('HEADER_LOGO_HEIGHT', '64px');
define('HEADER_LOGO_IMAGE', 'logo.gif');
}

.... right, the way you originally suggested, then you wouldn't have to mess with a header background, you could just make your header logo 750x350 and then another version 750x100, and center it each time, so it would fill up the space you alloted. Wouldn't that work?

It's ironic, one of my first changes to the classic template was to get that logo out of there! LOL

CultureClick the toddler Zenner

lat9:

I'm glad you got it sorted out! The index_home.css (at least initially) should contain only the stuff in red and you'll edit the fragment in your stylesheet.css to account for the specifics of your non-homepage logo.

REALLY? Uh oh. My index_home.css is the same as the stylesheet.css, everything the same, EXCEPT that header change. It works this way. I'm going to try removing everything but the stuff in red, and see what happens.

Hmmmm....

CultureClick:

REALLY? Uh oh. My index_home.css is the same as the stylesheet.css, everything the same, EXCEPT that header change. It works this way. I'm going to try removing everything but the stuff in red, and see what happens.

Hmmmm....
Yes, it will work that way ... until you make some "global" change in the stylesheet.css and wonder why it doesn't affect your home page! Essentially, you really want the more-specific css files to contain only the delta changes from the overall styling.

lat9:

Yes, it will work that way ... until you make some "global" change in the stylesheet.css and wonder why it doesn't affect your home page!

Gotcha! But tell me, what do you think about the other strategy, using the actual logo gif and making it big enough to fill the header space, and centering it?

Yours,

CultureClick the toddler Zenner