Smart Backgrounds support

That depends on exactly where you want the backgrounds. Header-top-right sounds like it should go in the #headerWrapper div, and footer-bottom-right sounds like it should go in either #contentMainWrapper or #navSuppWrapper. Not sure about "right".

And are you talking about backgrounds that change depending on the page or category? Or just images in different parts of the page? You only need any PHP code if you want bg's that change.

If you can post an image mockup, we can advise more accurately what you need to do.

For people interested in better understanding what we were talking about while the site was offline and seeing how the modified Smart Backgrounds code worked out in practice, the site is now live at: http://nelsonfinearts.com

Thanks to the modified code, he special badge backgrounds appear on the US Marshals, Author Biography, Outside Links and In the Press sections only. The rest use the default gradient background.

Thanks again!

Nice site.. Good job..

and to Glenn.. you really are a ZenCart hero.. I feel like I spend more time here reading (and bookmarking) your very helpful posts!!

hello, i installed the Smart Backgrounds mod in my demo store - it's for a university project.
since i needed to change the whole background image for each category instead of the header only, i tried to follow the instructions that were posted in the forum on page 2 regarding backgrounds.
however, they dont show at all...
i didnt post any screenshots or else because i dont know what you may need to help...
the "store" link is: http://progetto.tesi.com/store2
thanks in advance!

Your link doesn't go anywhere.

You will probably want to move the code to tpl_main_page.php, and apply it to the body id line or the mainWrapper line.

sorry, typo...the link is:

http://progetto-tesi.com/store2

i did as you suggest, and applied to the mainWrapper line, but doesnt function

Your stylesheet_smartbg.css is still set up to take care of backgrounds in #headerWrapper.

You need to change all the

#headerWrapper.smartBG_18 { background-image: url(../images/smartbg_18.jpg);}

to

#mainWrapper.smartBG_18 { background-image: url(../images/smartbg_18.jpg);}

thank you! now it works perfectly!
is it also possible to have the same image spreading not only into the central column, but also on the header and the two sides of the page?
thanks one more time!
pat

You appear to have found the way to make header and sidebars transparent (eliminate background-colors in stylesheet), as the only way you could extend the background from what I see would be to make #mainWrapper 100% width, or move the bg code to the "body" div in tpl_main_page.php.

I expect it's just right as is.

yes, now it looks as it was supposed to be, thanks for your help!

In response to a request, here is a method to have a different background for each individual ez-page. The example will be for the whole page below the header, but can easily be adapted to any other location by changing the stylesheet selectors (no PHP code moving required).

Edit /includes/templates/your_template/common/tpl_main_page.php (copy it from /includes/templates/template_default/common/tpl_main_page.php if you don't have a custom copy already.)

Find this section near the top:```php
$body_id = ($this_is_home_page) ? 'indexHome' : str_replace('_', '', $_GET['main_page']);
?>

<body id="<?php echo $body_id . 'Body'; ?>"<?php if($zv_onload !='') echo ' onload="'.$zv_onload.'"'; ?>> ```and change it to```php $body_id = ($this_is_home_page) ? 'indexHome' : str_replace('_', '', $_GET['main_page']); ?> <?php //Smart Backgrounds $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]):''; } elseif ($current_page_base == 'page') { //add _page and ez-page id to bg filename only if cat bg image exists $smart_image = (file_exists(DIR_WS_TEMPLATE_IMAGES . 'smartbg_page' . $_GET[id] . '.gif'))?'_page' . $_GET[id]:''; } 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:''; //default/home page class will be just .smartBG, and filename smartbg.gif }// /Smart Backgrounds?> <body id="<?php echo $body_id . 'Body'; ?>" class="smartBG<?php echo $smart_image;?>"<?php if($zv_onload !='') echo ' onload="'.$zv_onload.'"'; ?>> ``` Add to your stylesheet``` .smartBG_page5 #contentMainWrapper { background-image: url(../images/smartbg_page5.gif); } ```Repeat and change the page number for each ez-page id you want to give a unique background.

To put the individual background only in the center column, use this```
.smartBG_page5 .centerColumn {
background-image: url(../images/smartbg_page5.gif);
}

With this mod... how would you go about changing it use .swf animated headers instead a stationary .gif, or .jpg or something in the stylesheet?

I'm using a <script src=.... to call a java file that calls the flash to disable IE's annoying habit of doing that "Click Here to activate" thing... so I need to find some way in the tpl_header to put that <script src to call the java file.

Thanks in advance for your help and I will most definitely paste a link to this store as a sample site using this mod when I get done with it. :smile:

I would need to know exactly how you call the flash in order to give a full answer here, and also what different flash headers according to what criteria.

If you have a number of different headers, can you include the category id or page name in the .swf filename? There are multiple ways to accomplish this, and I would need a good sense of your situation to choose the best one.

I call the flash like this:

<script src="http://zencart-demo-store2.littleolemedesigns.net/includes/templates/Romance_Divine_Custom/jscript/Header_Animation.js"></script>

The java file is here:
http://zencart-demo-store2.littleolemedesigns.net/includes/templates/Romance_Divine_Custom/jscript/Header_Animation.js

I need a different swf file on the home page, and on each top cat with it's corresponding subcats.

So like on the top cat

Bags:

would use the same swf file as it's sub cats:

Beach Bags
Everyday Bags

Does that make sense??

bump :huh:

Can you name the swf files with a suffix of the category id?

Is it always the same script file that is supposed to call the different .swf files, or do you have a separate .js file for each .swf?

<script src="http://zencart-demo-store2.littleolemedesigns.net/includes/templates/Romance_Divine_Custom/jscript/Header_Animation.js"></script>

<script src="http://zencart-demo-store2.littleolemedesigns.net/includes/templates/Romance_Divine_Custom/jscript/Header_Animation1.js"></script>

<script src="http://zencart-demo-store2.littleolemedesigns.net/includes/templates/Romance_Divine_Custom/jscript/Header_Animation23.js"></script>

It is a separate js file for each swf file... and I can name either of them whatever I want to.

I don't know much about php.. but I'm thinking the switch would need to test the page to determine what js file to call since the js file calls the swf..

I just can't figure how to do the switch, or if/else statement, or whatever I would need to determine the current page and call the js file.

All the swf files will be the same dimensions width and height, so it's just determining which js file to call.

Thank-you for helping me with this :smile:

OK, that makes it easy.
You would use a simplified version of the smart bg code, eliminating the verification of the image file and just setting the variable $smart_image to the top category id if on a product page.```php

<?php //Smart Backgrounds $smart_image = ''; if ($current_page_base == 'index' or $current_page_base == 'product_info') { //add _ and top cat id to js filename $smart_image = '_' . (int)$_GET[cPath]; } // /Smart Backgrounds?> <script src="http://zencart-demo-store2.littleolemedesigns.net/includes/templates/Romance_Divine_Custom/jscript/Header_Animation<?php echo $smart_image;?>.js"></script>

I'm not certain the php inclusion in the script code will work as is; it may be necessary to formulate the script code in php and then output it. If it doesn't work as shown, let me know and I'll work on that.

You will have to be responsible for ensuring that there is a .js file for each top category, and one for the home and all other pages. Name them like

Header_Animation.js 

for the home page, and

Header_Animation_23.js 

for category 23 and its subs.

Thank-You so much!!

I'll be trying it out within the next couple weeks.. I'm doing the final flash animations now.. and waiting on the client to approve them.

Just a question since she's mentioned this too... would it be possible to have a flash animation on the home page and have the category pages have static images.. different images for each category??

That would certainly be possible... it would look more like the original Smart BG code.

One thing to keep in mind is that you will have a lot of pages that are neither Home nor category-related, like shopping cart, shipping & returns policy, contact, all products, etc. The code I gave you will use the home page flash for all of those. If you want something different, you will have to formulate your desires fully and possibly modify the code to fit.