How to change header image on non-main pages?

[Servelan]

My header image is big and for want of a better term, loud (nice colors, nice graphic, just a little too over the top for anything but the first page). I found information on how to change the header that says (and if you are the person that wrote this in response to the question on how-to, thank you):

"open your tpl_main_page file
find the mainWrapper div.
Add an if/else statement pointing to another header page.
The first section is the page you want to be different.

If ($this_is_home_page) {

require($template->get_template_dir('tpl_header.php',DIR_WS_TEMPLATE, $current_page_base,'common'). '/tpl_header.php');

} Else {

require($template->get_template_dir('tpl_header2.php',DIR_WS_TEMPLATE, $current_page_base,'common'). '/tpl_header2.php');
} "

Which all makes sense, mostly.

However, I want to change the header image, not the header, for anything but the first page. That means, if I read this correctly, that I would also need to reference a different .css file for the different header pointed to in the second tpl_header file.

Am I correct in thinking that's what I'd have to do, and if so, is there any reason I couldn't do that? I'd experiment first and ask questions later, but I know how easy it is to muck it up and would like some input first.

Thx!

[DrByte]

Is this something you want to do for ONLY these TWO scenarios?
- main page
- everything else

You could put your "everything else" image into your normal stylesheet, and then put just the CSS stuff for your home-page-only into a new stylesheet file (in the same place as your main stylesheet file) named "index_home.css" (instead of stylesheet.css, for example). And then that index_home.css will be loaded only on the home page.

[Servelan]

Is this something you want to do for ONLY these TWO scenarios?
- main page
- everything else

Yes, exactly.

You could put your "everything else" image into your normal stylesheet, and then put just the CSS stuff for your home-page-only into a new stylesheet file (in the same place as your main stylesheet file) named "index_home.css" (instead of stylesheet.css, for example). And then that index_home.css will be loaded only on the home page.

I gather what you are saying is to have the non-home image as the norm, and the index page as the exception, but if the 'normal' tpl_header calls the .css file containing the non-home image, am I reading correctly that merely naming a copy of the stylesheet (or whatever).css file index_home.css (with reference to the home page image) loads/applies the home page image?

[DrByte]

In a normal Zen Cart template there are no calls to any .css files in any of the tpl_anything.php files.
If YOU have added special instructions to load specific .css files from your tpl_header.php then yes you'll have a conflict, and the normal Zen Cart functionality won't work for you.

And I went to great pains to tell you to NOT merely copy the stylesheet at all.
I gave you a specific filename and told you to put JUST the specific style declaration in that file so that it overrides the stuff contained in the main stylesheet.

[Servelan]

Sorry, I understood 'put just the CSS stuff for your home-page-only into a new stylesheet file' to include the css stuff for the home page, not just the different image info. The override system involves whole files, not pieces thereof, and that's the extent of my familiarity with Zen Cart customization.

[DrByte]

If your main stylesheet.css file contains everything that applied to your whole site, you'll see a segment in it like this:

...
...
...
text-align: left;
    width: 750px;
    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_bg.jpg);
    background-repeat: repeat-x;
    background-color: #ffffff;
    height:75px;
    }

#navColumnOneWrapper, #navColumnTwoWrapper, #mainWrapper {
    margin: auto;
    } 
#navColumnOneWrapper, #navColumnTwoWrapper {
    margin-left: 0.5em;
    margin-right: 0.5em;
    }
    
#tagline {
    color:#000000
...
...
...

So in your index_home.css file you could simply put the following to override just this specific part for only the home page:

#logoWrapper{
    background-image: url(../images/homepage_header_bg.jpg);
}

That's it. Just 3 lines. Nothing more ... unless there are more things you need to customize further.