Smart Backgrounds support

V1.39
Downloaded and installed per the instructions.

After unzipping the files on your computer, follow the folder tree to /your_template/. Rename the /your_template/ folder to the folder name of the custom template you are using.

**Done. **
After making the folder edit, ftp the /includes/ folder to the root of your store on the server. The files will automatically be placed in the correct locations.
**Since my site has not ye been uploaded yet I saved the /includes/ folder in the root directory (Zencart)**Note: If you have modified tpl_main_page.php, remove the copy from this package and merge the code line described below into your existing custom copy.
To be honest, I don't recall having made any changes but I copied the tpl_main_page.php and merged the code by a simple cut and paste. **

Next:

To use different backgrounds (in any desired page element) for each category or page:
Name your background images like smartbg_23.gif or smartbg_shippinginfo.gif and save in /includes/templates/your_template/images/.
Done renamed a pic to smartbg_stuff.jpg

To switch backgrounds for a top category and all its subcats, add its id like _# to smartbg.
To switch backgrounds for a single subcategory, add its cPath like ## to smartbg.
To switch backgrounds for all ez-pages, add _page to smartbg.
To switch backgrounds for a single ez-page, add its id like _page# to smartbg.
To switch backgrounds for a particular Zen Cart page, add its name like pagename to smartbg. **Done. pic now named smartbg_page#2_stuff.jpg **
Look in the address bar to get the current page name, ez-page id or cPath.
Combine the smartBG class with the class or id of the element you want to affect, per the stylesheet examples below.

In /includes/templates/your_template/common/tpl_main_page.php, this line

<body id="<?php echo $body_id . 'Body'; ?>"<?php if($zv_onload !='') echo ' onload="'.$zv_onload.'"'; ?>>

is replaced with

<body id="<?php echo $body_id . 'Body'; ?>" class="smartBG<?php echo smart_backgrounds();?>"<?php if($zv_onload !='') echo ' onload="'.$zv_onload.'"'; ?>>

If you want to use jpg or png images instead of gifs, change echo smart_backgrounds() to echo smart_backgrounds('.jpg') or '.png', etc. Done, changed to use .jpg

No change to pages 2,3, or 4. all still have the same background as the main page.

To clarify what I'm trying to do.
I'd like to have a diffrent pic as a background for every page. I've already gone into the my Stylesheet and used the /* / do-dad's to allow my pic to be visible.

***** This should let you know that I'm not an IT guy, a computer guru, programmer, etc.

So K.I.S.S. !!
:blush:

To switch backgrounds for a particular Zen Cart page, add its name like _pagename to smartbg. Done. pic now named smartbg_page#2_stuff.jpg
Look in the address bar to get the current page name, ez-page id or cPath.
If your page is named page_2 (...main_page=page_2), the image needs to be named exactly
smartbg_page_2.jpg, not smartbg_page#2_stuff.jpg.

I see how you misinterpreted the instructions, as two separate steps. I will rework the readme to make it crystal clear that there is only one naming step here.

Note: If you have modified tpl_main_page.php,
I will rework this to say

Note: If you have a copy of tpl_main_page.php in your custom template folder,

as you should never modify a default copy of a file.

gjh42:

If your page is named page_2 (...main_page=page_2), the image needs to be named exactly
smartbg_page_2.jpg, not smartbg_page#2_stuff.jpg.Done

gjh42:

I see how you misinterpreted the instructions, as two separate steps. I will rework the readme to make it crystal clear that there is only one naming step here.

I will rework this to say

Note: If you have a copy of tpl_main_page.php in your custom template folder,

as you should never modify a default copy of a file.Okay...so now how do I recover from this?

There's no real harm done in this case. You can copy tpl_main_page.php into your custom template folder so it won't be lost if you upgrade. The edited version won't be a problem in /template_default/ for now.

gjh42:

I see how you misinterpreted the instructions, as two separate steps. I will rework the readme to make it crystal clear that there is only one naming step here.

I will rework this to say

Note: If you have a copy of tpl_main_page.php in your custom template folder,

as you should never modify a default copy of a file.:censored:
Guess which one I modified....

Went backwards and deleted "<body id="<?php echo $body_id . 'Body'; ?>" class="smartBG<?php echo smart_backgrounds();?>"<?php if($zv_onload !='') echo ' onload="'.$zv_onload.'"'; ?>>"

With "<body id="<?php echo $body_id . 'Body'; ?>"<?php if($zv_onload !='') echo ' onload="'.$zv_onload.'"'; ?>>"

Saved as \includes\templates\template_default\ tpl_ main_page.php

I renamed the pic as suggested previously....still no change.

Does the /your_template/ version of tpl_main_page.php currently have
class="smartBG<?php echo smart_backgrounds(.jpg);?>"
Copy & paste that line here.

What image filenames and folder paths do you currently have saved?

I notice you don't mention the stylesheet. Did you add a rule for the background-image for each page, as the readme describes?

Again, I see that if you don't know that you need to add stylesheet rules to get backgrounds, you could overlook this direction. Another improvement for the next version's readme!

gjh42:

I notice you don't mention the stylesheet. Did you add a rule for the background-image for each page, as the readme describes?

Again, I see that if you don't know that you need to add stylesheet rules to get backgrounds, you could overlook this direction. Another improvement for the next version's readme!

Yeah, but iI probably screwed it up too. This what I added to the last line of \includes\templates\MyCustomName\css\stylesheet.php

[QUOTE}.smartBG_page2 # {background-image: url(../images/smartBG_page2.jpg);}
[/QUOTE]

Two possible problems here:
.smartBG_page2 # {background-image: url(../images/smartBG_page2.jpg);}

The # by itself will not work for anything. What element do you want the background on? If the whole page content, use #mainWrapper.

What is the exact filename you used? CSS is case-sensitive; smartBG_page2.jpg is not the same as smartbg_page2.jpg, which is what the code looks for.

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

The stylesheet examples are there to guide you in correct usage.

Maybe I'm misunderstanding this:

Sample stylesheet rules:

/example to set default header bg/
#headerWrapper {background-image: url(../images/whatever.gif);}

/example to set header bg for listing or product page in category id 23/
.smartBG_23 #headerWrapper {background-image: url(../images/smartbg_23.gif);}

/example to set header bg for shipping & returns page/
.smartBG_shippinginfo #headerWrapper {background-image: url(../images/smartbg_shippinginfo.gif);}

/example to set content bg for ez-page id 5/
.smartBG_page5 #contentMainWrapper {background-image: url(../images/smartbg_page5.gif);}/example to set center column bg for ez-page id 5/
.smartBG_page5 .centerColumn {background-image: url(../images/smartbg_page5.gif);}

Here's what I've got on the last line in my Stylesheet:
.smartBG_page2 #mainwrapper {background-image: url(../images/smartbg_page2.jpg);}

Tried this, no change.
.smartbg_page2 #mainwrapper {background-image: url(../images/smartbg_page2.jpg

Spelling and capitalization are critical. Code doesn't work with approximately right names.

.../index.php?main_page=page_2

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

If you want ez-page backgrounds, smartbg_page2.jpg would work correctly on ez-page id 2.

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

.../index.php?main_page=page_2
Huh?! What or where is that supposed to go?

capitize the "w"....check!!
.smartBG_page2 #mainWrapper {background-image: url(../images/smartbg_page2.jpg);}

Sorry, my first thought was that you had missed the correct name for define page 2, which would show that in the address bar.

Okay....but am I supposed to do something with that?

Still fighting this tooth and nail....and losing it would seem.

Okay, is it an ez-page or a define page that you want the background for? You have described both at various times, so it's not clear which you want here.
Copy & paste the text in the address bar (index.php?main_page=...) so I can tell exactly what page you want, and paste in the exact image filename & location, and the stylesheet rule that relates to it.

The one I'm currently trying to work on is a define page, (page #2) but I do want All of the pages to have a different background.

localhost/zencart/index.php?main_page=page_2

Trying to start with a clean slate this morning so I removed this line from the style sheet.

*.smartBG_page2 #mainWrapper {background-image: url(../images/smartbg_page2.jpg);} *

As I stated previously, I had it at the bottom of the page. Should it go elsewhere in the stylesheet or replace an existing line?

For define page 2, which has main_page=page_2, you need an image named smartbg_page_2.jpg in /includes/templates/your_template/images/, and a stylesheet rule

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