Smart Backgrounds support

[Girdy74]

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

[Girdy74]

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~

[Girdy74]

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

Thanks
Kara

[gjh42]

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;
}

[Girdy74]

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

[welchyboy]

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

[gjh42]

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.

[welchyboy]

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.

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

[gjh42]

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.