change header image on non-main pages to a different image thats on my home

[alcanlove]

I would have a header image with my store name on my home page/main page, however I don't want that image on every page, I have another image I would like use as a header for all other pages, how do I make this so? I am a complete novice


thank you in advance Candice x

[SPH]

That was recently asked here and there may be a solution:

http://www.zen-cart.com/showthread.p...ll-other-pages

Also go here and select Twist of Nature template, as it changes header image and may give ideas:

http://(sorry, site offline)/zc150/

[alcanlove]

Thank you SPH, I will take a look & let you know how I get on

[dgent]

Could make it far easier than this.

Instead of using the code in the header.php file to choose the image, just set the background image for all other pages of the header div in your stylesheet.css, e.g...


.headerlogo (or whatever your header div is called) {

background-image:url(allpagesheaderimage.gif) ;

}

Then make another stylesheet called index_home.css with a new rule for the background div image, being the one you want for the home page....e.g

.headerlogo {

background-image:url(homepageheaderimage.gif) ;

}


So when you're on the homepage, it will pull the image listed on the index_home.css file, and any other page, it will use the default in the stylesheet.css

[alcanlove]

erm you lost me like I said I am computer dumb dumb & completely clueless as to what I have to do, I keep going on youtube for help, I have only ever used a pc to do online shopping, banking ect, I am finding this all very overwhelming & out of my deph!

[dgent]

erm you lost me like I said I am computer dumb dumb & completely clueless as to what I have to do, I keep going on youtube for help, I have only ever used a pc to do online shopping, banking ect, I am finding this all very overwhelming & out of my deph!

Ok, Ill try and make it really simple, but if you can't get your head around it you'll have to get some help.

In your template you have a file called stylesheet.css in your folder /includes/templates/apparel_boutique/css

Backup this file first in case things go wrong.

At the moment there is a section in that file like this, near the top, should be around line 46...


#logo {
padding-top: 15px;
padding-left: 15px;
}


and you need to replace that completely with

#logo {
padding-top: 25px;
background-image: url(applecheekslittlefeet.com/includes/templates/apparel_boutique/images/logo.jpg);
height: 240px;
width: 950px;
}

Save the file back into the css folder, and view your site.

Now you will see your logo is there, but it is being repeated, because you logo image is smaller than the div (aka box #logo) that it is sitting in.

If you can, put your logo into an image program, like Photoshop or whatever you used, make the white background of the image 240 pixels high and 950 pixels wide, and then centre you logo in the middle of it and then re save it, and upload it back to the site in the 'www.applecheekslittlefeet.com/includes/templates/apparel_boutique/images' folder.

This image will be the image used on all the OTHER pages of the site, not the index page, so make sure its the right design for what you want to show.

Now for the index page, make a new image (same dimensions as above) etc, and save that in the same folder as the other image, (/includes/templates/apparel_boutique/images) but rename it indexlogo.jpg

Now open Notepad or any other text editor, and simply put in it...

#logo {
padding-top: 25px;
padding-left: 15px;
background-image: url(applecheekslittlefeet.com/includes/templates/apparel_boutique/images/indexlogo.jpg);
height: 240px;
width: 950px;
}


..and save this as a file called index_home.css and save it in the following folder.

/includes/templates/apparel_boutique/css

Now go to your /includes/languages/english/YOUR_TEMPLATE/header.php and find the code below and put the dimensions from the image above into the code (as I have done below) and make the HEADER_LOGO_IMAGE as blank (as I have below)



// 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', '950px');
define('HEADER_LOGO_HEIGHT', '240px');
define('HEADER_LOGO_IMAGE', '');

Then save that file back again and upload it to the folder it came from on the site.

Note, backup all these orginal files and your pics, before over writing them.

What this has done basically is ignores the hard code in the header.php file for the image, and given your logo box a background image instead of an inserted image. When you're on the index page, it uses the style sheet of the index_home.css file and pulls that image for the logo, and for every other page it pulls the image in the main stylesheet.

Gedddiiit?

[alcanlove]

Hi Dgent, sorry no I don't Gedddiiit I tried the first step you gave me all I did was make the main page header slightly cover the links
below it, so I gave up
I will try again, I just wanted to ask you why that happened?

Thanks Candice x