Smart Backgrounds support

[Robbyn7]

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.

[LittleOleMeDesigns]

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.

[gjh42]

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.

[Candylea]

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

[gjh42]

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).

[Candylea]

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

[gjh42]

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;}

[Edm]

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.

[Edm]

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. So now I have an image, or should I say multiple. 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.

[gjh42]

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.