Smart Backgrounds support

**gjh42** · 26 Mar 2008, 07:01 PM

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 Code:


  $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 Code:


  $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

Code:

.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

Code:

.smartBG_page5 .centerColumn {
    background-image: url(../images/smartbg_page5.gif);
    }

This can be applied to any other element by using the proper class/id in the same manner.

**LittleOleMeDesigns** · 4 Apr 2008, 01:52 PM

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.

**gjh42** · 5 Apr 2008, 07:25 AM

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.

**LittleOleMeDesigns** · 5 Apr 2008, 01:52 PM

I call the flash like this:

Code:

<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.littleole...r_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??

**LittleOleMeDesigns** · 14 Apr 2008, 12:53 PM

bump

**gjh42** · 14 Apr 2008, 04:01 PM

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?

Code:

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

**LittleOleMeDesigns** · 14 Apr 2008, 04:05 PM

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

**gjh42** · 14 Apr 2008, 05:04 PM

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 Code:


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

**LittleOleMeDesigns** · 14 Apr 2008, 05:13 PM

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??

**gjh42** · 14 Apr 2008, 07:18 PM

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.

Thread: Smart Backgrounds support

Thread Tools

Search Thread

Display

Re: Smart Backgrounds support

Re: Smart Backgrounds support

Re: Smart Backgrounds support

Re: Smart Backgrounds support

Re: Smart Backgrounds support

Re: Smart Backgrounds support

Re: Smart Backgrounds support

Re: Smart Backgrounds support

Re: Smart Backgrounds support

Re: Smart Backgrounds support

Similar Threads

Adding Image Map to header with Smart Backgrounds

smart backgrounds

Backgrounds

Bookmarks

Bookmarks

Posting Permissions