Smart Backgrounds support

[Sawhorse]

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

[gjh42]

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.

[Sawhorse]

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; }
#search { background-image: url(../images/searchbox.gif); 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; }
.smartBG_about_us #search { background-image: url(../images/searchbox_about_us.gif); background-repeat: no-repeat; }

Correct?

[gjh42]

dingdingding! Correct :)

[Sawhorse]

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

Again, what a trial we when through,

Thanks again
Happy holidays.

Sawhorse

[gjh42]

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.

[Sawhorse]

[FONT=Arial]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.[/FONT]

Sawhorse

[dreamlex]

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?

[gjh42]

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.

[dreamlex]

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