Smart Backgrounds support

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

[dreamlex]

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

[gjh42]

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.

[dreamlex]

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

[gjh42]

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.

[gjh42]

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.

[Website Rob]

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.

[charagg]

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.

[gjh42]

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.

[charagg]

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