Smart Backgrounds support

So you want to change background color for the nav bar but not the image? In that case you are probably best using the per-category stylesheets.

Smart BG requires an image filename to exist for each page/category/etc. that it sets a class for. The intent of the mod is to switch images for desired pages, and this is method to determine which pages get different images, and a failsafe to avoid switching to a nonexistent image and getting a blank background.

The mod does not require that the smartbg_xxx.gif be used anywhere, only that a file with that name exists; so you could copy & rename one little file to all the desired category ids, and use a different constant bg image and changing bg color.

gjh42:

So you want to change background color for the nav bar but not the image? In that case you are probably best using the per-category stylesheets.

Smart BG requires an image filename to exist for each page/category/etc. that it sets a class for. The intent of the mod is to switch images for desired pages, and this is method to determine which pages get different images, and a failsafe to avoid switching to a nonexistent image and getting a blank background.

The mod does not require that the smartbg_xxx.gif be used anywhere, only that a file with that name exists; so you could copy & rename one little file to all the desired category ids, and use a different constant bg image and changing bg color.

my stylesheet has one image (or one image file) for all nav items (I am using css sprite for nav bar). So I only want to have body ids apply to my styles in stylesheet which can make the nav item image stay with color, showing user which category page she or he is on. That's why I wanted to make body ids change according to which nav item the user click on.

so how to write body ids to apply to certain cPath? this is only my question. For an example, if category product (say dress) is cPath 1, body id should be body id=dress. Then it will look up style in my stylesheet for #dress.

I am sorry if I don't explain clearly.

thank you again

You don't need to do anything with the body id. Having the per-category stylesheets will do what you want without any other modifications.

Say your main stylesheet has this:

#navWhatever {
background-image: url(../images/navbg.gif);
background-color: #aabbcc;
}

Make a stylesheet named c_23.css, containing only

#navWhatever {
background-color: #ddaacc;
}

Then when you are in category 23, the background color of that element will be #ddaacc.

Repeat for any categories you want different from default.

No, I need body ids to change according to the cPath. Is there no way to change body ids to change according to cPath category?

Make a stylesheet named c_23.css, containing only

#navWhatever {
background-color: #ddaacc;
}

Then when you are in category 23, the background color of that element will be #ddaacc.

Ok, let's say I use this one above.
Where do I find number for category? How do I know what category number for each of the nav items is? Do I need to make stylesheet files and put them under css folder? Or is it done through ez pages? I ask, because I am not familar with ez pages. Also I notice that your tpl_main_page has gif - do i just leave it alone and it will find style sheet files?

Thank you for your help again

If you need body ids to change per category, it is for a different reason than the nav background color. You can accomplish that with nothing but the extra stylesheets.

Each category has an id, and $cPath is made by stringing together the ids of the categories in the path. You can find the category id in admin > Catalog > Categories/Products, or by looking at the address bar when in the category. The last number in cPath will be the current category's id.

Stylesheets are made by making a new file in your text/file editor, with name and content like I posted above, and saving in your /includes/templates/your_template/css/ folder (the same place as your main stylesheet). They will be used automatically according to Zen Cart's rules.

Smart Backgrounds v2.1 is now available in Free Addons.

There is one new feature: individual subcategories can be given their own backgrounds, as well as top categories.

All of the background switching is now automated; it is no longer necessary to choose whether individual ez-page bgs will be enabled.
If any category or ez-page has a background file saved, it will be used. If there is no individual bg, the general top cat, general ez-page or pagename will be tested, and if none of the above has a background file, the default (home page) background image will be displayed.

Glenn, just wanted to say "hat's off" for providing such a nice Module which definitely has it uses.

Hadn't used it before until just recently and was pleasantly surprized at ease of use for installing and customizing. Yes, like any module it requires one to take time to understand how it all comes together but it all comes together quite nicely.

Even with Zen Cart 2.0 on the horizon, your updated version will probably be used for the next year as many people will use the 1.3.8a or 1.3.9 version for that long.

Hi Glen,

First of all, hats off to you for such a useful contribution. I've installed the latest version (2.1) and it seems to be working fine for Product Category pages and some Main Pages, such as Contact Us and Login, but not Account, as well as, EZ Pages with/without TOC chapter assignments. All of the images I want to use should be for the header background (#headerWrapper).

I've searched quite extensively, but can't seem to find an answer. Could you please enlighten me? Have I done something wrong?

Here is a copy of the CSS I've used:

/* Our Servcies Page - page36 */
.smartBG_page36 #headerWrapper {background-image: url(../images/smartbg_page36.jpg);}

The only changes I made to tpl_main_page.php were to change the file extension from .gif to .jpg.

Any help, even if you could direct me to the appropriate post would help.

Please post the smartbg section of your tpl_main_page.php, to see exactly how you have changed it. A link to your site would also help.

Here it is:

$header_template = 'tpl_header.php';
$footer_template = 'tpl_footer.php';
$left_column_file = 'column_left.php';
$right_column_file = 'column_right.php';
$body_id = ($this_is_home_page) ? 'indexHome' : str_replace('_', '', $_GET['main_page']);
?>

<!-- BOF SMART BACKGROUNDS --> <?php //Smart Backgrounds $smart_image = ''; if ($current_page_base == 'index' or $current_page_base == 'product_info') { //add _ and cPath to bg filename only if individual cat bg image exists, else add _ and top cat id to bg filename only if top cat bg image exists $smart_image = file_exists(DIR_WS_TEMPLATE_IMAGES . 'smartbg_' . $_GET[cPath] . '.jpg')?'_' . $_GET[cPath]:file_exists(DIR_WS_TEMPLATE_IMAGES . 'smartbg_' . (int)$_GET[cPath] . '.jpg')?'_' . (int)$_GET[cPath]:''; } elseif ($current_page_base == 'page') { //add _page and ez-page id to bg filename only if ez-page id bg image exists, else add _page to bg filename only if general ez-page bg image exists $smart_image = file_exists(DIR_WS_TEMPLATE_IMAGES . 'smartbg_page' . $_GET[id] . '.jpg')?'_page' . $_GET[id]:file_exists(DIR_WS_TEMPLATE_IMAGES . 'smartbg_page.jpg')?'_page':''; } 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 . '.jpg')?'_' . $current_page_base:''; //default/home page class will be just .smartBG, and filename smartbg.jpg }// /Smart Backgrounds?> <body id="<?php echo $body_id . 'Body'; ?>" class="smartBG<?php echo $smart_image;?>"<?php if($zv_onload !='') echo ' onload="'.$zv_onload.'"'; ?>> <!-- EOF SMART BACKGROUNDS --> <div id="mainWrapper">

I've added a link to my site in my signature.

Thanks

You're getting the right classname on ez-page 5 (Our Company) to indicate that it is finding a general ez-pages image file:

<body id="pageBody" class="smartBG_page">

but it is not finding a specific ez-page image, and the CSS is not calling for an image for general ez-pages.

You have a base ez-page image in /benchmark/images/, but the one for page 5 is not there.

You only have images for two ez-pages, but they are not being found by the code. It's been a long time since I first set up the ez-page code, and I don't remember how I tested it. This needs some debugging. Add this to your tpl_main_page.php near the top of the smartbg code, say under the $smart_image = ''; line:

echo 'Looking for smartbg_page' . $_GET[id] . '.jpg';

What output do you see on an ez-page?

For Account, are you actually seeing the page named "account"? It switches to "login" as soon as it is clicked, for me with no account.

OK entering the code outputs the correct file name:

Looking for smartbg_page5.jpg

I do have this file (also smartbg_page.jpg, smartbg_page25.jpg, smartbg_page34.jpg, smartbg_page36.jpg, and smartbg_page37.jpg) in the includes/template/benchmark/images/ directory. I also tried to put into the /images folder in the root directory and still nothing.

By the way, I jumped the gun on Account. That works fine. It was late (around 3am) when I posted, I must have been seeing stars. Sorry.

Here's my entire CSS file in case the problem may be there:

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

/* Header - Buy Now/Website Design*/
.smartBG_66 #headerWrapper {background-image: url(../images/smartbg_66.jpg);}

/* Buy Online Page - page34 */
.smartBG_page34 #headerWrapper {background-image: url(../images/smartbg_page34.jpg);}

/* Our Servcies Page - page36 */
.smartBG_page36 #headerWrapper {background-image: url(../images/smartbg_page36.jpg);}

/* Our Gaurantee Page - page25 */
.smartBG_page25 #headerWrapper {background-image: url(../images/smartbg_page25.jpg);}

/* Our Servcies | Web Design Page - page37 */
.smartBG_page37 #headerWrapper {background-image: url(../images/smartbg_page37.jpg);}

/* Header - Contact Us*/
.smartBG_contact_us #headerWrapper {background-image: url(../images/smartbg_contact_us.jpg);}

/* Header - Login*/
.smartBG_login #headerWrapper {
	background-image: url(../images/smartbg_login.jpg);
	background-color: #CCCCCC;
}

/* Header - Account*/
.smartBG_account #headerWrapper {background-image: url(../images/smartbg_account.jpg);}

/*example to set content bg for ez-page id 34*/
/* .smartBG_page34 #contentMainWrapper {background-image: url(../images/smartbg_page34.jpg);} */

/*example to set center column bg for ez-page id 34*/
.smartBG_page34 .centerColumn {background-image: url(../images/smartbg_page34.jpg);}

Hope this helps.

Thanks

This is perplexing. It should be looking for the correct file, and for other kinds of pages it is finding the correct file and setting the class correctly.
Can you move that debug line to just below the

} elseif ($current_page_base == 'page')

line? This will prove whether the ez=page section is operating at all, or just skipping down to the final test for page type.

I didn't find the page5 file when I looked at them before, but I do see it now.

yes, this is perplexing. you have no idea how many hours I messed with this before I posted.

I placed the debug code here:

} elseif ($current_page_base == 'page')
{echo 'Looking for smartbg_page' . $_GET[id] . '.jpg'; //add _page and ez-page id to bg filename only if ez-page id bg image exists, else add _page to bg filename only if general ez-page bg image exists

it pulled up the correct image file name.

I just copied and pasted the original code from the original Smart Backgrounds file just in case I had a typo or accidentally removed something, but no, still not working.

I have modified my tpl_main_page file, I'm going to try using the original code with this add-on and see if it works. At least that will tell me whether or not it has something to do with my modifications.

I'll let you know shortly.

replaced it with the original tpl_main_page file - that didn't work either. Is it possible that it has something to do with settings in EZpages admin?

I can't say it isn't possible without checking, though I can't think of any setting that could affect this code.

I'm going to do a test run on my local installation to see if I can reproduce these results, or verify that it works on an otherwise stock version.

OK - I'm going to see if there are any possible settings in the admin that may effect. However, I don't think there. I'll let you know if anything turns up.

This is a reminder to test even what seem like no-brainer code modifications... turns out that the chained ternary operators were getting confused and giving the output for the second test when the first test was positive. It needed parentheses to correctly organize them. So

$smart_image = file_exists(DIR_WS_TEMPLATE_IMAGES . 'smartbg_page' . $_GET[id] . '.gif')?'_page' . $_GET[id]:file_exists(DIR_WS_TEMPLATE_IMAGES . 'smartbg_page.gif')?'_page':'';

needs to be

$smart_image = file_exists(DIR_WS_TEMPLATE_IMAGES . 'smartbg_page' . $_GET[id] . '.gif')?'_page' . $_GET[id]:(file_exists(DIR_WS_TEMPLATE_IMAGES . 'smartbg_page.gif')?'_page':'');

and the same with the previous statement:
$smart_image = file_exists(DIR_WS_TEMPLATE_IMAGES . 'smartbg_' . $GET[cPath] . '.gif')?'' . $GET[cPath]:(file_exists(DIR_WS_TEMPLATE_IMAGES . 'smartbg' . (int)$GET[cPath] . '.gif')?'' . (int)$_GET[cPath]:'');

if ($current_page_base == 'index' or $current_page_base == 'product_info') { //add _ and cPath to bg filename only if individual cat bg image exists, else add _ and top cat id to bg filename only if top cat bg image exists
  $smart_image = file_exists(DIR_WS_TEMPLATE_IMAGES . 'smartbg_' . $_GET[cPath] . '.gif')?'_' . $_GET[cPath]:(file_exists(DIR_WS_TEMPLATE_IMAGES . 'smartbg_' . (int)$_GET[cPath] . '.gif')?'_' . (int)$_GET[cPath]:'');
} elseif ($current_page_base == 'page') { //add _page and ez-page id to bg filename only if ez-page id bg image exists, else add _page to bg filename only if general ez-page bg image exists
  $smart_image = file_exists(DIR_WS_TEMPLATE_IMAGES . 'smartbg_page' . $_GET[id] . '.gif')?'_page' . $_GET[id]:(file_exists(DIR_WS_TEMPLATE_IMAGES . 'smartbg_page.gif')?'_page':'');
} else
```I have submitted an update to the mod in Free Addons, but if you have this installed already, all you need to do is add parentheses to the two statements as shown.

Hallelujah! Thank you Glen! You're awesome. I had a feeling it had to do with syntax, but wasn't exactly sure. Thanks a bunch for such a wonderful contribution! - Ara

Hey Glen

Man ive been studying and testing and reading post after post..ive gotten some results but not complete results...it all seems easy but i must be missing something..

Im using smart backgrounds to try and create a different Mainwrapper-background image for 3 pages. My main page, shipping, and contact us pages.

I have installed version 2.1.1.

I can get the shippinginfo page to work..but i cant seems to get all 3 pages different.

I feel like a fool because ive read over and over you telling us all how to do it...and yet i have to ask you to hold my hand through it.

THX in advance for your help.

Rob

https://www.loudervisions.com