Smart Backgrounds support

I'm not seeing the debug output anywhere, even in view source. Could you post that area of tpl_main_page.php (just 10 lines or so)?

Don't get too mad, but I just checked the address bar for your about us page, and it reads

.../index.php?main_page=about_us

which means that the file and class names should have about_us.

Using firebug I see the echo:
body: aboutus file search: includes/templates/Series_12_Horses/images/smartbg_about_us.jpg

Of course I do not have smartbg_about_us.jpg I have smartbg_aboutus.jpg in the image file.

I tried to find the call for smartbg_about_us.jpg but as of yest can not find it.

Sawhorse

OK, I will change everything. It will be a moment on this.

Oh, How could I get "too mad" I am just very happy that you are helping me. ;-)

Sawhorse

The code is indeed looking for smartbg_about_us.jpg.
When it was not getting results before, there was apparently some other problem beside the _ ; changing that did not fix the problem, but it prevented the problem from going away when the actual error (whatever it was) was fixed.

OK we have smartbg_about_us.jpg - that is one of them!!

Could you look at my post 196, I think there is a problem there?

Sawhorse

OH, I just saw this
"I'm not seeing the debug output anywhere, even in view source. Could you post that area of tpl_main_page.php (just 10 lines or so)?"

<?php //Smart Backgrounds - .jpg version
$smart_image = '';
if ($current_page_base == 'index' or $current_page_base == 'product_info') { //add _ and top cat id to classname only if cat bg image exists
  $smart_image = (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 classname only if ez-page id bg image exists, else add _page to classname 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 classname 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 classname will be just .smartBG, and filename smartbg.jpg

  echo 'body: ' . $body_id . ' file search: ' . DIR_WS_TEMPLATE_IMAGES . 'smartbg_' . $current_page_base . '.jpg';

}// /Smart Backgrounds?>
<body id="<?php echo $body_id . 'Body'; ?>" class="smartBG<?php echo $smart_image;?>"<?php if($zv_onload !='') echo ' onload="'.$zv_onload.'"'; ?>>
<!-- End Smart Backgrounds -->

Sawhorse:

Could you look at my post 196, I think there is a problem there?

Sawhorse

That should be post 198

**OK we have topmenubg_login_about_us.gif and topmenubg_about_us.gif Working.

It seems that I did not correct in colors.css the statement ..smartBG_aboutus #navMain.login to .smartBG_about_us #navMain.login and .smartBG_aboutus #navMain.noLogin to .smartBG_about_us #navMain.noLogin

Thank you I think it works.

I was going to ask you one more question. How does the "system" know to include the image file searchbox_about_us.gif when we go to the about_us page? But when I remove searchbox_about_us.gif the image did not change. I believe that that cut is not necessary for additional header images. But, if it were necessary would smart Background handle it?

Again Thanks.

Sawhorse
**

I appologize for writing here, but I ahve looked all over the site and have no idea where to create a new post. How do I do that?

Just look at the top of the page and you will see;

**User CP About Posting Calendar New Posts Search Quick Links Log Out

On most forums (****General Questions etc) ****you can start a new thread.

Sawhorse
**

If you had this:```
#search { background-image: url(../images/searchbox.gif); background-repeat: no-repeat; }

.smartBG_about_us #search { background-image: url(../images/searchbox_about_us.gif); background-repeat: no-repeat; }

you would get the searchbox.gif bg called first, and then *if* on the about us page, there would be an element of class .smartBG_about_us with an element of id #search inside it, so the second rule would come into effect and call for searchbox_about_us.gif.

As far as I know, you never had .smartBG_about_us #search {...}, so searchbox_about_us.gif was never called for.

So in colors.css I currently have the following:

/* Background Layout (Smart Background app - added 12142008)*/
#logoWrapper { background-image: url(../images/smartbg.jpg); background-repeat: no-repeat; }
.smartBG_about_us #logoWrapper { background-image: url(../images/smartbg_about_us.jpg); background-repeat: no-repeat; }

#navMain.login { background-image: url(../images/topmenubg_login.gif); background-repeat: no-repeat; }
#navMain.noLogin { background-image: url(../images/topmenubg.gif); background-repeat: no-repeat; }
.smartBG_about_us #navMain.login { background-image: url(../images/topmenubg_login_about_us.gif); background-repeat: no-repeat; }
.smartBG_about_us #navMain.noLogin { background-image: url(../images/topmenubg_about_us.gif); background-repeat: no-repeat; }
```To add the search box I would first have the new image file in ../images/searchbox_about_us.gif Then do the following in colors.css:

/* Background Layout (Smart Background app - added 12142008)*/
#logoWrapper { background-image: url(../images/smartbg.jpg); background-repeat: no-repeat; }
[B]#search { background-image: url(../images/searchbox.gif); background-repeat: no-repeat; }[/B]
.smartBG_about_us #logoWrapper { background-image: url(../images/smartbg_about_us.jpg); background-repeat: no-repeat; }

#navMain.login { background-image: url(../images/topmenubg_login.gif); background-repeat: no-repeat; }
#navMain.noLogin { background-image: url(../images/topmenubg.gif); background-repeat: no-repeat; }
.smartBG_about_us #navMain.login { background-image: url(../images/topmenubg_login_about_us.gif); background-repeat: no-repeat; }
.smartBG_about_us #navMain.noLogin { background-image: url(../images/topmenubg_about_us.gif); background-repeat: no-repeat; }
[B].smartBG_about_us #search { background-image: url(../images/searchbox_about_us.gif); background-repeat: no-repeat; }[/B]

dingdingding! Correct :)

One right out of how many? Still, it was correct. ;-)

Again, what a trial we when through,

Thanks again
Happy holidays.

Sawhorse

With the release schedule announcement for Zen Cart v2.0, I want to confirm that I will be keeping Smart Backgrounds up to date with core code. I don't expect any significant change in mod functionality, aside from enhanced ez-page support as described above. The required adaptation should be minimal, so that the new version can be released soon after the final ZC v2.0 release.

Thank you. All appreciate the great work that all the authors of the Add Ons will need to do because of the great changes that are coming in ZC 2.0.

Sawhorse

gjh42:

Another feature you can use is the fact that the body of each page has a unique id, like #indexBody, #productsallBody, #productinfoBody, etc.
You can combine this with the sub-element to change the sub-element's styling on different pages:

#indexBody .centerColumn {background-color: #112233;}

#productsallBody .centerColumn {background-color: #223344;}

#productinfoBody .centerColumn {background-color: #334455;}

These can all go in the main stylesheet, and only the one that is current will be used.

This is similar to the way Smart Backgrounds works, but cannot cover the full range of Smart Backgrounds' applications.

Somebody directed me to your smart background add-on. and I chanced upon your post. Thats what I am looking for.

I wanted to have different body id for each product category on main nav bar so that changed color of the bar will stay till user click on other nav item and then that nav item's bar will change color.

Any idea how to do that?

You can do that with either category-specific stylesheets, one for each category, or with Smart Backgrounds. (Smart BG sets a body class for each category which has an image and leaves the body id as is.)
There are full instructions in the Smart BG readme file, and instructions for stylesheets in /includes/templates/template_default/css/CSS_readme.txt.

I did read and thats where I got confused.

smart background add-on requires images... I have one image only for all nav items. I only need to set different body ids on main page for the nav items (no images needed).

So how to set body ids without having to put images?

thanks