Change background color to an image, and banner header

[tacoma]

I would like to change the background color to an image.

I would also like to have the header banner change to a specified image for each category selected, instead of 1 static image.

I'm running the latest version of zen cart and I'm slowly learning. So far I'm stoked!

[tacoma]

OK solved one of my questions. I added 'background-image: url(../images/tile_1.gif);' to line 339. of stylesheet.

#navColumnOne, #navColumnTwo {
    background-color: transparent;
    background-image: url(../images/tile_1.gif);
    } 

[gjh42]

I have just finished a little mod for per-category/per-page header background images, so you are the lucky guinea pig - er - first recipient.

Description:
##########################################################################################___

Display header bg image for individual top cat, or current page base, if corresponding image exists in /includes/templates/your_template/images/.

Name images like headerbg_23.gif for cat 23 & subs, or headerbg_shippinginfo.gif for shipping & returns page.
Name default image headerbg.gif.
Add a class to your stylesheet for each image, like

#headerWrapper.headerBG_23 { background-image: url(../images/headerbg_23.gif);}

#headerWrapper.headerBG_shippinginfo { background-image: url(../images/headerbg_shippinginfo.gif);}

with any other styling you desire.

Find in /includes/templates/your_template/common/tpl_header.php

<!--bof-header logo and navigation display-->
<?php
if (!isset($flag_disable_header) || !$flag_disable_header) {
?>

<div id="headerWrapper">
<!--bof-navigation display-->

and replace with

<!--bof-header logo and navigation display-->
<?php
if (!isset($flag_disable_header) || !$flag_disable_header) {
?>
<!--per-category/per-page header bg images - gjh42  2007-12-11-->
<!--
Display header bg image for individual top cat, or current page base, if corresponding image exists in /includes/templates/your_template/images/.
Name images like headerbg_23.gif for cat 23 & subs, or headerbg_shippinginfo.gif for shipping & returns page.
Name default image headerbg.gif.
Add a class to your stylesheet for each image, like 
#headerWrapper.headerBG_23 { background-image: url(../images/headerbg_23.gif);}
with any other styling you desire.
-->
<?php $alt_header_image = '';
if ($current_page_base == 'index' or 'product_info') { //add _ and top cat id to bg filename only if cat bg image exists
  $alt_header_image = (file_exists(DIR_WS_TEMPLATE_IMAGES . 'headerbg_' . str_replace(strstr($_GET[cPath],'_'),'',$_GET[cPath]) . '.gif'))?'_' . str_replace(strstr($_GET[cPath],'_'),'',$_GET[cPath]):'';
} else { //add _ and page base to bg filename only if page bg image exists
  $alt_header_image = (file_exists(DIR_WS_TEMPLATE_IMAGES . 'headerbg_' . $current_page_base . '.gif'))?'_' . $current_page_base:'';
}?>
<!--/per-category/per-page header bg images-->
<div id="headerWrapper" class="headerBG<?php echo $alt_header_image;?>">
<!--bof-navigation display-->

If you want to use jpg or png images, change the instances of ".gif" accordingly.

[gjh42]

Erratum: Change

if ($current_page_base == 'index' or 'product_info') { 

to

if ($current_page_base == 'index' or $current_page_base == 'product_info') { 

The original appeared to be working correctly while testing, but was apparently changed since the last version I tested.

[tacoma]

Thanks I'm going to give a go right now!

[tacoma]

How would I get this to work with #logoWrapper ?

[tacoma]

I can't get it to work...

[gjh42]

Change the

<div id="headerWrapper" class="headerBG<?php echo $alt_header_image;?>">

back to

<div id="headerWrapper">,

and change

<div id="logoWrapper">

to

<div id="logoWrapper" class="headerBG<?php echo $alt_header_image;?>">

Rework the stylesheet declarations like

#logoWrapper {
    background-image: url(../images/headerbg.gif);
    width: xxxpx;
    height: xxxpx;
    }

#logoWrapper.headerBG_23 { background-image: url(../images/headerbg_23.gif);}

#logoWrapper.headerBG_shippinginfo { background-image: url(../images/headerbg_shippinginfo.gif);}

[gjh42]

If you want the clickable home link feature of the logo, you will probably best use #logo instead of #logoWrapper. Also, if you are using IE, you will need to edit /includes/languages/english/your_template/header.php to use pixel_trans.gif, so that IE doesn't collapse the div:

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

change to 

define('HEADER_LOGO_IMAGE', 'pixel_trans.gif'); 

[tacoma]

Glen sir, I owe you a coke!

Thank you soo much.

Works flawless so far.