Smart Backgrounds support

Thank-You so much for all your help. I think my client is still up in the air on a lot of what she wants.. so before I tell her something is even an option, I like to research it.

She's desperately trying to improve her site for SEO.. and there are conflicting opinions out there concerning flash in the site and headers more relevant to content.. so she's tossing it all around.

Thank you again for all your help!:clap:

Well... tried it... and it works perfectly everywhere but the home page... lol

I've still gotta do different animations on the product pages.. but for now it's just a static swf file that doesn't animate vs the home page on that does.

I'm sure this is something simple... probably something to do with the home page not having a cPath to assign the file name to.. I'm trying to figure it out.. but if you have any advice on it.. I'd certainly appreciate it...

The site is http://www.photo-store.memorylanedesigns.com/

Thank-You again!!!

Ha.. figured it out.. the first file needs to be named...

Header_animation_0.js

for the home page other than that.. works perfectly!!

THANK-YOU!!! THANK-YOU!!! :clap::clap::clap:

A refinement of the code to account for the home page where there is not a cPath:```php

This will allow the home page to have the basic filename without added _0.

Very Cool!! Thank-You sooooooooooo much for taking the time to help me with this!!

I'm good with html, css, flash, etc... but php just goes right over my head.. I wouldn't have figured this out with out you.. Thank-You!

Smart Backgrounds v2.0 is now available in Downloads.

The code is now located in tpl_main_page.php; this makes it useable on any page element without editing PHP files, only the stylesheet. The stylesheet declarations are all different from the previous version.

Added the ability to change backgrounds for each individual ez-page.

The readme is now HTML for improved legibility.

This version is built on a Zen Cart v1.3.8a base file; transplant code to the appropriate copy of the file for earlier versions.

Has anyone used this mod for just their header yet?
Would love to see what it looks like. I've been trying to find a mod that will allow for a different header on each page. Thanks.

The site in post 42 has an animated header for the home page and the same image static on product pages. Other than that, I can't point you to a site that has header image switching. My test site is on my local pc and it can't be seen over the internet.

This will give you different background images for as many pages as you make them for, and is simple to install (and to uninstall if you decide you don't want it).

The http://nelsonfinearts.com site is working, and switches backgrounds between say the Landscapes and U. S. Marshals categories.

Thanks for the reply Gjh42,

Guess, I'll have to wait for someone to post a better example.

What I'm wondering is if this mod is mainly for having different headers on each page or different backgrounds on each page?

This mod works for either custom backgrounds or for custom headers. Most of the instructions are for custom headers, but he does tell you how to do it for custom backgrounds and other areas of the page as well.

If you're wondering what it does.. just try it out.. just don't overwrite your existing files... either take advantage of the template override system or rename the existing files filename_old.php and make the edits to a copy. Then if you don't like it or mess it up, you can always go back to the original.

What I'm doing with it on http://www.memorylanedesigns.com is using it to do a different flash header on each page. Right now I just have animated header on the home page and stationary header with animated buttons on the other pages while I work on the different animations for the the other pages. It was really easy to set up.

LittleOleMeDesigns:

This mod works for either custom backgrounds or for custom headers. Most of the instructions are for custom headers, but he does tell you how to do it for custom backgrounds and other areas of the page as well.

If you're wondering what it does.. just try it out.. just don't overwrite your existing files... either take advantage of the template override system or rename the existing files filename_old.php and make the edits to a copy. Then if you don't like it or mess it up, you can always go back to the original.

What I'm doing with it on http://www.memorylanedesigns.com is using it to do a different flash header on each page. Right now I just have animated header on the home page and stationary header with animated buttons on the other pages while I work on the different animations for the the other pages. It was really easy to set up.

Thanks for the reply,

I'll definitely play around with this mod and see what it does for me. Thanks.
Nice website by the way.

Good luck with it... it's waaaaay easier than I thought it would be.

And thanks for the compliment on the website.. it's for a client. I'm going to use this different header thing on my website when I get it finished so that I can use that blank space that's there now to put some info on each section... http://www.littleolemedesigns.com

I'll post here when I finish either of these sites and they're ready to use as samples of this smart background mod.

Thanks, that will be helpful.

The next time you use this for background switching, try the new version - after installation, no PHP files need to be touched to use it on any element in your page.

Hello again

This is the exact mod I been looking for and your help with my 3 Cat's in different sideboxes......and would like to say
"don't know what I would do without your help"

But now down to business I have installed this and have it working but my issue is that since I bought all 28 sub-cats out to be cat's, so I have 28 cats but in three side boxes so it looks like I only have 3 cats. http://www.divalicious.com.au/shop2/ So I want this mod to change my logo every cat so I have 4 different logos one default and then my 3 cats.
Is there a short cut, because the way I see it I will have to upload 28 images but there is really only 3 ..........

Also your tpl_main_page.php fixed issues in my page.. Thanks

Unfortunately, there can't be an automatic shortcut that I can write for everyone's use. It would not be a big deal to rewrite the code (or just add a few lines at the top) to check for the category being among a specified group (using the "explode" function code demonstrated in the comments at the top of the standard tpl_main_page.php).

Thats alright I thought maybe something simple, I have it all working so if you would like someone again to post a example you can use mine

Example of Smart Backgrounds (logo change per cat)

http://www.divalicious.com.au/shop2

Thanks again for this mod

Thanks for posting! The logo visibly changes depending on which category box you select from.

You might want to put some space between your sidebox text and the borders. Add this to your stylesheet:```
#categoriesrockrollContent, #categorieselecticladylandContent, #categoriesgroovygiftsContent, #informationContent {padding-left: .4em;}

Hi, I have smart.bg in my header, I installed the files seperatly and all was working. I have now merged the code into my existing files. Now no glory, can you please have a look at my code and advise. (The site is on localhost so do not have a link)
mytemplate/css/stylesheet

/**
 * Main CSS Stylesheet
 *
 * @package templateSystem
 * @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: stylesheet.css 4387 2006-09-04 13:54:28Z drbyte $
 */

body {behavior: url(includes/csshover.htc);
	}
	margin: 0;
	font-family: lucida sans unicode, verdana, arial, helvetica, sans-serif;
	height:0;
	font-size: 80%;
	line-height: 160%;
	color: #000;
	background-color: #ccffcc;
	}
	
div#dropMenu li a:hover, div#dropMenu li.submenu li.submenu:hover {color: #4f4f4f!important;background:#ececec;}

div#dropMenu {
	width:100%;
	margin:0 auto;
    text-align:center;
	z-index:1000;
	position:relative;
	}

div#dropMenu ul {
    margin:0;
	padding:0;
	}
	
div#dropMenu li {
	position:relative;
	list-style:none; 
	margin:0; 
	float:left; 
	line-height:1em;
	width:16.667%;
	*width:16.649%;
	}
	
div#dropMenu ul.level1 {
	width:100%;
	margin:0 auto; 
	text-align:center;
	background:#87d1ef; /*background color of top menu when NOT selected. */
	z-index:1000;
	float:left;
	border:1px solid #000;
	}

div#dropMenu li a {
	display: block;
	/* Hides from IE5-mac \*/
	height: 1%;
	/* End hide from IE5-mac */ 
	padding: .6em 0; 
	text-decoration: none; 
	text-transform:uppercase; 
	color:#3300ff; 
	text-align:center;
	 border-right:1px solid #000;
	}	
	
div#dropMenu li:hover {}
/*div#dropMenu li.submenu {background: url(../images/dropmenu.gif) 95% 50% no-repeat;} */
div#dropMenu li.submenu:hover {}
div#dropMenu li a.noLine {border:none;}
div#dropMenu>ul a {width: auto;z-index:1000;}
div#dropMenu ul ul {display: none;}
div#dropMenu ul ul li {border-bottom: 1px solid #CCC; width:12em;z-index:1000;}
/*div#dropMenu li.submenu li.submenu {background: url(../images/submenu.gif) 95% 50% no-repeat;} */
div#dropMenu ul.level1 li.submenu:hover ul.level2, 
div#dropMenu ul.level2 li.submenu:hover ul.level3,
div#dropMenu ul.level3 li.submenu:hover ul.level4,
div#dropMenu ul.level4 li.submenu:hover ul.level5,
div#dropMenu ul.level5 li.submenu:hover ul.level6,
div#dropMenu ul.level6 li.submenu:hover ul.level7,
div#dropMenu ul.level7 li.submenu:hover ul.level8 {position: absolute; width: 12em;display:block;z-index:1000;}
div#dropMenu ul.level2 {background:#87d1ef;z-index:1000;position:absolute;left:0;}
div#dropMenu ul.level3, 
div#dropMenu ul.level4, 
div#dropMenu ul.level5, 
div#dropMenu ul.level6, 
div#dropMenu ul.level7,
div#dropMenu ul.level8{top: 0; left: 12em; background:#87d1ef}
div#dropMenu ul.level2 a {padding: 0.5em 0 0.5em 0.25em;color: 3300ff; text-transform:none;}  /* this is text color on drop-down submenu */
div#dropMenu ul.level2 a:hover {color:#87d1ef;}



	
.clearBoth {
	clear:both;}
	
	

a img {border: none; }

a {
	color: #000;
	text-decoration: none;
}
a:visited {
	color: #6666ff;
	text-decoration: none;
}
a:hover {
	color: #6666ff;
	text-decoration: underline;
}
h2, h3, h4, h5, h6 {
	/*font-family: georgia;*/
	color: #999;
}
h1 {
	margin: 0px 0px 15px 0px;
	text-align: center;
	font: 240% georgia, helvetica, sans-serif;
	color: #6666ff;
	letter-spacing: 2px;
	text-transform: uppercase;
	/*border-bottom: 1px solid #000;*/
	/*clear: both;*/
}
h2 {
	font-size: 130%;
	margin: 0;
}
h3 {
	font-size: 100%;
}
p, ul, ol {
	margin: 0 0 1.5em 0;
	/*wrappers - page or section containers*/
}
#headerWrapper {background-image: url(../images/smartbg.gif);}

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

#headerWrapper.smartBG_shippinginfo { background-image: url(../images/smartbg_shippinginfo.gif);	
}
#mainWrapper {
	background-color: #d3f6f6;
	text-align: center;
	width: 100%;
	border: 1px solid #000;
}
#contentMainWrapper, #logoWrapper, #cartBoxListWrapper, #ezPageBoxList, #cartBoxListWrapper ul, #ezPageBoxList ul, #mainWrapper, #popupAdditionalImage, #popupImage {
	margin: 0em;
	padding: 1em 0 ;
}
#logoWrapper{
	background-color: #d3f6f6;
	text-align: left;
	margin:0 0 -2em;
}

#navColumnOneWrapper, #navColumnTwoWrapper, #mainWrapper {
	margin: auto;
} 
#navColumnOneWrapper, #navColumnTwoWrapper {
	margin: 0 0.5em;
}
	
#tagline {
	padding:0 1em 0;
	text-align : right;
	color: #6666ff;
	font-style: italic;
	font-weight: bold;
	font-size: 240%;
}

#sendSpendWrapper {
	border: 1px solid #cacaca;
	float: right;
	margin: 0em 0em 1em 1em;
}

.floatingBox, #sendSpendWrapper, #checkoutShipto, #checkoutBillto, #navEZPagesTOCWrapper {
	margin: 0;
	width: 47%;
}

.wrapperAttribsOptions {
	margin: 0.3em 0em;
}

/*navigation*/

.navSplitPagesResult {}
.navSplitPagesLinks {}

.navNextPrevCounter {
	margin: 0em;

and mytemplate/ common/tpl.header

<?php
/**
 * Common Template - tpl_header.php
 *
 * this file can be copied to /templates/your_template_dir/pagename<br />
 * example: to override the privacy page<br />
 * make a directory /templates/my_template/privacy<br />
 * copy /templates/templates_defaults/common/tpl_footer.php to /templates/my_template/privacy/tpl_header.php<br />
 * to override the global settings and turn off the footer un-comment the following line:<br />
 * <br />
 * $flag_disable_header = true;<br />
 *
 * @package templateSystem
 * @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: tpl_header.php 4813 2006-10-23 02:13:53Z drbyte $
 * Modified for  Smart Backgrounds  v1.0  by Glenn Herbert (gjh42)   2007-12-14
 */
?>

<?php
  // Display all header alerts via messageStack:
  if ($messageStack->size('header') > 0) {
    echo $messageStack->output('header');
  }
  if (isset($_GET['error_message']) && zen_not_null($_GET['error_message'])) {
  echo htmlspecialchars(urldecode($_GET['error_message']));
  }
  if (isset($_GET['info_message']) && zen_not_null($_GET['info_message'])) {
   echo htmlspecialchars($_GET['info_message']);
} else {

}
?>


<!--bof-header logo and navigation display-->
<?php
if (!isset($flag_disable_header) || !$flag_disable_header) {
?>
<!--Smart Backgrounds-->
<?php $smart_image = '';
if ($current_page_base == 'index' or $current_page_base == 'product_info') { //add _ and top cat id to bg filename only if cat bg image exists
  $smart_image = (file_exists(DIR_WS_TEMPLATE_IMAGES . 'smartbg_' . 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
  $smart_image = (file_exists(DIR_WS_TEMPLATE_IMAGES . 'smartbg_' . $current_page_base . '.gif'))?'_' . $current_page_base:'';
}?>
<!--/Smart Backgrounds-->
<div id="headerWrapper" class="smartBG<?php echo $smart_image;?>">
<!--bof-navigation display-->
<div id="navMainWrapper">
<div id="navMain">
    <ul class="back">
    <li><?php echo '<a href="' . HTTP_SERVER . DIR_WS_CATALOG . '">'; ?><?php echo HEADER_TITLE_CATALOG; ?></a></li>
<?php if ($_SESSION['customer_id']) { ?>
    <li><a href="<?php echo zen_href_link(FILENAME_LOGOFF, '', 'SSL'); ?>"><?php echo HEADER_TITLE_LOGOFF; ?></a></li>
    <li><a href="<?php echo zen_href_link(FILENAME_ACCOUNT, '', 'SSL'); ?>"><?php echo HEADER_TITLE_MY_ACCOUNT; ?></a></li>
<?php
      } else {
        if (STORE_STATUS == '0') {
?>
    <li><a href="<?php echo zen_href_link(FILENAME_LOGIN, '', 'SSL'); ?>"><?php echo HEADER_TITLE_LOGIN; ?></a></li>
<?php } } ?>

<?php if ($_SESSION['cart']->count_contents() != 0) { ?>
    <li><a href="<?php echo zen_href_link(FILENAME_SHOPPING_CART, '', 'NONSSL'); ?>"><?php echo HEADER_TITLE_CART_CONTENTS; ?></a></li>
    <li><a href="<?php echo zen_href_link(FILENAME_CHECKOUT_SHIPPING, '', 'SSL'); ?>"><?php echo HEADER_TITLE_CHECKOUT; ?></a></li>
<?php }?>
</ul>
</div>
<div id="navMainSearch"><?php require(DIR_WS_MODULES . 'sideboxes/search_header.php'); ?></div>
<br class="clearBoth" />
</div>
<!--eof-navigation display-->

<!--bof-branding display-->
<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>
<?php if (HEADER_SALES_TEXT != '' || (SHOW_BANNERS_GROUP_SET2 != '' && $banner = zen_banner_exists('dynamic', SHOW_BANNERS_GROUP_SET2))) { ?>
    <div id="taglineWrapper">
<?php
              if (HEADER_SALES_TEXT != '') {
?>
      <div id="tagline"><?php echo HEADER_SALES_TEXT;?></div>
<?php
              }
?>
<?php
              if (SHOW_BANNERS_GROUP_SET2 != '' && $banner = zen_banner_exists('dynamic', SHOW_BANNERS_GROUP_SET2)) {
                if ($banner->RecordCount() > 0) {
?>
      <div id="bannerTwo" class="banners"><?php echo zen_display_banner('static', $banner);?></div>
<?php
                }
              }
?>
    </div>
<?php } // no HEADER_SALES_TEXT or SHOW_BANNERS_GROUP_SET2 ?>
</div>
<br class="clearBoth" />
<!--eof-branding display-->

<!--eof-header logo and navigation display-->

<!--bof-optional categories tabs navigation display-->
<?php require($template->get_template_dir('tpl_modules_categories_tabs.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_modules_categories_tabs.php'); ?>
<!--eof-optional categories tabs navigation display-->

<!--bof-header ezpage links-->
<?php if (EZPAGES_STATUS_HEADER == '1' or (EZPAGES_STATUS_HEADER == '2' and (strstr(EXCLUDE_ADMIN_IP_FOR_MAINTENANCE, $_SERVER['REMOTE_ADDR'])))) { ?>
<?php require($template->get_template_dir('tpl_ezpages_bar_header.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_ezpages_bar_header.php'); ?>
<?php } ?>
<!--eof-header ezpage links-->

<!--bof-drop down menu display-->
<?php require($template->get_template_dir('tpl_drop_menu.php',DIR_WS_TEMPLATE,$current_page_base,'common'). '/tpl_drop_menu.php');?>
<!--eof-drop down menu display-->
<div class="clearBoth">
</div>
<?php } ?>

any advise greatly appreciated.

Hi GJH42,
I have installed smart backgrounds for my header back ground, when I first installed I left the files separate and just added them to my custom folders, and all appeared to work OK.
Then I merged my files made some image changes and all went sour firstly I could not get an image, finally realised I had placed a decimal in the image name.:oops: So now I have an image,:yes: or should I say multiple. :frusty: The image is being repeated both across and down my entire page as a background instead of being confined to the header as a single image.
I am trying to build this site on local host so I don't think you can access it to see, any advise greatly appreciated.

First, you're using the oldest version of this mod. While it works for its purposes, the newest version (2.0.1) has more power and flexibility. It does modify a different file (/includes/templates/your_template/tpl_main_page.php) and requires different naming conventions in the stylesheet.

In any case, the php code looks ok, and you say you are now getting the image. The css you show could not make the image appear anywhere but in the header. To stop the repeating, add

background_repeat: no-repeat;

to the declarations.