Smart Backgrounds support

Thanks for reply Glen,
I will try the no repeat when I get it back up and running. I so over this at present.
Easyphp failed yesterday while working on the site, mysql error, said to re install easy php to fix problem, so I did reinstall, now I cant get it to recognise the site.
If/when i get this:censored: thing working I will look for updated version for install.
Thanks again
Regards
Eddie

Oops, typo:
background_repeat: no-repeat;
should be

background-repeat: no-repeat;

I have the header background working for the home page and one category page (Fighter Pilots). So why isn't working on the Rosie the Riveter category? I have the style sheet and the images set up the same. I also tried it on 1 ez page (We Donate) and it's not changing! Please help.

http://www.aircorpsdepot.com/store2/index.php

.smartBG_1 #logoWrapper {margin: 0; padding: 0; width: 100%; display: block; background: url('../images/header-bg2.png') center no-repeat; height: 280px;}
.smartBG_2 #logoWrapper {margin: 0; padding: 0; width: 100%; display: block; background: url('../images/header-bg3.png') center no-repeat; height: 280px;}

/*example to set header bg for ez-page id 1*/
.smartBG_page1 #logoWrapper {margin: 0; padding: 0; width: 100%; display: block; background: url('../images/headerbg_page1.png') center no-repeat; height: 280px;}

Thanks

The code looks for specific filenames to activate the background images. If those names are not present, the default will be used. header-bg2.png and headerbg_page1.png are not recognized names; as the readme says, "Name your background images like smartbg_23.gif or smartbg_shippinginfo.gif"

The standard code looks for gif images; if you want to use png's, change .gif to .png in all occurrences.

The number if applicable must match the category or ez-page id number.

That worked thanks. I had it named like that on the first 2 so thought it would work on the rest. Guess not.

What about subcategories?
It doesn't seem to be working.

http://www.wouldntitbnice.com/store/clothing-1/men-3/

If you click on the main nav bar you will see the header image change. But not on categories like men, women, etc.

SHokuf:

What about subcategories?
It doesn't seem to be working.

http://www.wouldntitbnice.com/store/clothing-1/men-3/

If you click on the main nav bar you will see the header image change. But not on categories like men, women, etc.

I see you instructions say " each top category or page."
No that means no sub categories...?

Correct. The code could be tweaked to work with subcategories as well as top cats. It seemed most likely that people would want to use top cats; if the code accounts for subcats, you would need an image for every subcat.

Ok. Well that's over my head. So guess I'll leave it. Thanks.

I just wanted show how great the smart backgrounds worked!
http://www.aircorpsdepot.com

I'm now doing it on a client's site as well.
Thanks. :clap:

Alrighty then!! I feel like a shmoe but it took me forever to figure out how to do this for a header (which probably shouldn't have but did). I'm just learning about all this php coding and what goes with what!!

I wanted to add my two cents for the people struggling with the header background ( btw-I didn't use EZ pages).

I installed the following files as directed:
/includes/templates/MY_FILE/css/stylesheet_smartbg.css
/includes/templates/MY_FILE/common/tpl_main_page.php
/includes/templates/MY_FILE/images/(here is where I added all my smartbg_#.jpg's

I then coded my #logoWrapper in my main stylesheet.css :

#logoWrapper {
width:384x;
height:220px;
background-repeat:no-repeat;
background-position: bottom right;
}

Then I went into the new stylesheet I got with the Smart Background install (stylesheet_smartbg.css). I coded the following:

right after the (/example to set default header bg/
#headerWrapper {background-image: url(../images/smartbg.gif);}) I put

/logowrapper for the home/main page/
.smartBG_ #logoWrapper {
background-image: url(../images/smartbg_.jpg);
background-repeat: no-repeat;
background-position: bottom right;
}

/*logowrapper for the cPath=1 page */
.smartBG_1 #logoWrapper {
background-image: url(../images/smartbg_1.jpg);
background-repeat: no-repeat;
background-position: bottom right;
}

/*logowrapper for the cPath=2 page */
.smartBG_2 #logoWrapper {
background-image: url(../images/smartbg_2.jpg);
background-repeat: no-repeat;
background-position: bottom right;
}

/*logowrapper for the cPath=3 page */
.smartBG_3 #logoWrapper {
background-image: url(../images/smartbg_3.jpg);
background-repeat: no-repeat;
background-position: bottom right;
}

/*logowrapper for the cPath=4 page */
.smartBG_4 #logoWrapper {
background-image: url(../images/smartbg_4.jpg);
background-repeat: no-repeat;
background-position: bottom right;
}

I now have the pictures I want displayed in my header. I wish I could give everyone the link but it is still under construction and my boss doesn't want this out there yet (don't blame him, it's not done!!).

I did NOT use E-Z pages. I just looked at the certain pages and looked in the url to find out what page I was on (via the cPath=##). I am so glad I FINALLY figured it out. I read through the forums to try and get a better understanding.

THANK GOODNESS TO ALL THE PEOPLE WHO ASK QUESTIONS AND THE AWESOME CODING GENIUSES!!!! Thank you to all who are in this forum :clap:

Got a question! I wanted to come up with a default image in case I forget a page and don't have a class for it. I tried using the default code that the smart background uses in the css stylesheet for the headWrapper, except I just changed it logoWrapper. The problem is, it puts the picture on the background (behind the actual header)?

I tried putting: .smartbg #logoWrapper { background-image: ../images/mycertainpicture.jpg} and also just tried #logoWrapper { background-image: ../images/mycertainpicture.jpg}

The rest of the code I have for the stylesheet is listed above~:frusty:

Another question...

Hopefully someone may have an answer to my above question?

Also, when I get to the checkout page (through Authorize.net) how do you set the background image (in header) for this one? Since it has a total different url (https:/secure.authorize.net/blahblah/transact.dll)

Ahh....:dontgetit

Thanks
Kara

Re post #71 -

You don't want the
#headerWrapper {background-image: url(../images/smartbg.gif);}
at all.
You should have for the default logo image:

/logowrapper for the home/main page/
#logoWrapper {
width:384x;
height:220px;
background-image: url(../images/smartbg.jpg);
background-repeat: no-repeat;
background-position: bottom right;
}

Thank you Glenn! For some reason I just couldn't get past that. I wrote another question above your reply, would you happen to know what I need to do for that?

Thanks

I know this thread has gone through a lot of information already but I am interested figuring out what smart background can really do for me. What I would like to do is only change the center part of the page to different colors. I would like to have different colors per page, but only the page no need for logos or headers. I am set there I just need the ability to have different color backgrounds per page. I know this is pretty basic information but it would be great if someone can fill me in and let me know if this is the right program i need to use or should i be directed to something else. Thanks

If you don't want different images but only different colors on the different pages, per-page stylesheets will serve you best.
Look at /includes/templates/template_default/css/CSS_read_me.txt for some info, and the Per page stylesheets thread and others.

GREAT!! I will look into this...at the moment this is what i was more interested in colors rather than images. I really do appreciate the help and directing me to the right place.

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.

For the checkout page, since it has a different url, I don't think the ZC stylesheet can apply. There should be some stylesheet or embedded styling that you can modify for that, but I can't help you find it since I don't have authorize.net.