Change Logo for Index Page Using CSS?

[Mountain Mama]

Hello,

I would like to have a different logo (larger) for my home/index page than for the rest of the site. I have created a index_home.css to change other aspects, but am wondering if it is possible to specify a different logo file for the home page using css (logo for the site and logo2 for the homepage). Or do I have to change the code in the tpl_header.php to include a conditional statement etc? I am new to zen cart, have some css knowledge and only a tiny bit of php, so please be gentle with me.

Thank you!

[Mountain Mama]

Yep, I needed a conditional statement in my tpl_header.php. It works!

[dbran30]

Could you please post the conditional statement and where you put it in your tpl_header.php file? I've been trying to do the same thing.

Thanks!!

[Mountain Mama]

As this solution might be useful to others, I thought I’d post it.

Disclaimer: Please not that I am not a programmer, rather I flail around until something I do works. That said, this is what I did and it worked for me. Please back up before you try this!

1. I created a new css file entitled index_home.css in my css folder of my template.

2. I created a new logo entitled logo2.gif and place it in my template/images.

2. I copied and pasted the info for logo wrapper and logo from my stylesheet. This looks something like:

#logoWrapper {
margin: 0em 0em 0em 0em;
padding: 1em 1em 0em 1em;
background-color:;
}

#logo {
float: left;
}

3. I renamed these to logo2Wrapper and logo2

4. I edited the header.php file in includes/languages/English/my template to add the above:

define('HEADER_ALT2_TEXT', 'My Store Name');
define('HEADER_SALES2_TEXT', '');
define('HEADER_LOGO2_WIDTH', '192px');
define('HEADER_LOGO2_HEIGHT', '64px');
define('HEADER_LOGO2_IMAGE', 'logo2.gif');

5. I edited the tpl_header.php file in my template/common to include a reference to the new logo.

On line 70, I removed:

<div id="logoWrapper">
<div id="logo"><?php echo '<a href="' . HTTP_SERVER . DIR_WS_CATALOG . '">' . zen_image($template->get_template_dir(HEADER_LOGO_IMAGE, DIR_WS_TEMPLATE, $current_page_base,'images'). '/' . HEADER_LOGO_IMAGE, HEADER_ALT_TEXT) . '</a>'; ?></div>


And replaced it with:

<?php if ($this_is_home_page) { ?>

<div id="logoWrapper">
<div id="logo"><?php echo '<a href="' . HTTP_SERVER . DIR_WS_CATALOG . '">' . zen_image($template->get_template_dir(HEADER_LOGO2_IMAGE, DIR_WS_TEMPLATE, $current_page_base,'images'). '/' . HEADER_LOGO2_IMAGE, HEADER_ALT_TEXT) . '</a>'; ?></div>

<?php
}
else
{
?>
<div id="logoWrapper2">
<div id="logo2"><?php echo '<a href="' . HTTP_SERVER . DIR_WS_CATALOG . '">' . zen_image($template->get_template_dir(HEADER_LOGO_IMAGE, DIR_WS_TEMPLATE, $current_page_base,'images'). '/' . HEADER_LOGO_IMAGE, HEADER_ALT_TEXT) . '</a>'; ?></div>
<?php
}
?>

Because I am a computer idiot, I included all of my steps. Please forgive if some of this was already obvious to you.

Good Luck!

[kuroi]

This is the right direction, but over-complicates it a little. Unless you need different text or the image is a different size, there is no need to duplicate the information in the header.php file and you could simply create the new file and use the following code snippet instead (i.e. no CSS additions)

<?php $logo_image = $this_is_home_page ? HEADER_LOGO2_IMAGE : HEADER_LOGO_IMAGE; ?>
<div id="logoWrapper">
<div id="logo"><?php echo '<a href="' . HTTP_SERVER . DIR_WS_CATALOG . '">' . zen_image($template->get_template_dir($logo_image, DIR_WS_TEMPLATE, $current_page_base,'images'). '/' . $logo_image, HEADER_ALT_TEXT) . '</a>'; ?></div>

[dbran30]

Thank you Mountain Mama for the explanation and Kuroi for the simplification. Elegant and it works great!

David

[Mountain Mama]

Hello Koroi,

Thank you for the simplification. My header image is larger than the images on the other pages. Could I still use your solution?

[kuroi]

Since you are changing several items, it would probably be best to pop back to the english/header.php file and do the changes there. I'd recommend replacing the existing definitions with these ...

if ($this_is_home_page) {
  define('HEADER_ALT_TEXT', 'My Store Name');
  define('HEADER_SALES_TEXT', '');
  define('HEADER_LOGO_WIDTH', '192px');
  define('HEADER_LOGO_HEIGHT', '64px');
  define('HEADER_LOGO_IMAGE', 'logo2.gif');    
} else {
  define('HEADER_ALT_TEXT', 'My Store Name');
  define('HEADER_SALES_TEXT', '');
  define('HEADER_LOGO_WIDTH', '81px');
  define('HEADER_LOGO_HEIGHT', '32px');
  define('HEADER_LOGO_IMAGE', 'logo.gif');
} 

... tailored to your specific requirements of course.

What this does is leave the constants that are defined the same, so you wouldn't normally need to make any changes to your tpl_header.php file, and would change your stylesheet only if your logo wrapper needs to be taller on the home page.

However, somewhere you have lost the height and width parameters, so you also need to add them back in either by reverting to the original file or by using the following for the logo div

<div id="logo"><?php echo '<a href="' . HTTP_SERVER . DIR_WS_CATALOG . '">' . zen_image($template->get_template_dir(HEADER_LOGO_IMAGE, DIR_WS_TEMPLATE, $current_page_base,'images'). '/' . HEADER_LOGO_IMAGE, HEADER_ALT_TEXT, HEADER_LOGO_WIDTH, HEADER_LOGO_HEIGHT) . '</a>'; ?></div>

[Mountain Mama]

Thank you!

[Sawhorse]

[FONT=Arial]The above was a great solution for the home page using [/FONT][FONT=Arial]

$this_is_home_page

[/FONT][FONT=Arial]However, I just want to change the LogoWrapper for only the define page about_us. I could not find a simular command for about_us page. [/FONT][FONT=Arial]My text and image size is the same for all headers. [/FONT][FONT=Arial]

I have created a second header image headerbg2.jpg in includes/templates/MY TEMPLATE/images/

My assumption is that I will need to change my tpl_header.php file or as indicated

...Unless you need different text or the image is a different size, there is no need to duplicate the information in the header.php file and you could simply create the new file and use the following code snippet instead (i.e. no CSS additions)

<?php $logo_image = $this_is_home_page ? HEADER_LOGO2_IMAGE : HEADER_LOGO_IMAGE; ?>
<div id="logoWrapper">
<div id="logo"><?php echo '<a href="' . HTTP_SERVER . DIR_WS_CATALOG . '">' . zen_image($template->get_template_dir($logo_image, DIR_WS_TEMPLATE, $current_page_base,'images'). '/' . $logo_image, HEADER_ALT_TEXT) . '</a>'; ?></div>

First, what would this new file be called?
Second, where would you put it?
Third, what modifications would be necessary so this would work for the about_us define page?
Fourth, is there another solution for this problem (i.e [/FONT][FONT=Arial]tpl_header.php)[/FONT][FONT=Arial]?

Thanks,
Sawhorse

[/FONT]