Zen Cart Logo
Forums / Templates, Stylesheets, Page Layout / how to add different background colors to different pages?

how to add different background colors to different pages?

Locked

Views: 2,490

Results 21 to 38 of 38
This thread is locked. New replies are disabled.
28 Aug 2010, 5:13 AM
#21
hangman21 avatar

hangman21

Zen Follower

Join Date:
May 2010
Posts:
138
Plugin Contributions:
0

how to add different background colors to different pages?

yea still not working

28 Aug 2010, 5:20 AM
#22
hangman21 avatar

hangman21

Zen Follower

Join Date:
May 2010
Posts:
138
Plugin Contributions:
0

Re: how to add different background colors to different pages?

ok for some reason the class switch back from smartBG_1 to smartBG

but i didnt change anything in the stylesheet_smartbg

.smartBG_1 #contentMainWrapper {background-image: url(../images/smartBG_1.gif);}

now the class is reading smartbg_1 after i changed the img name to lowercase littles so the class is showing back again to smartBG_1

28 Aug 2010, 7:07 AM
#23
drbyte avatar

drbyte

Sensei

Join Date:
Jan 2004
Posts:
63,513
Plugin Contributions:
176

Re: how to add different background colors to different pages?

As I said, the browser is doing exactly what you're telling it.

  1. In your template you've got it showing ```
    <body id="indexBody" class="[B]smartBG_1[/B]">

2. But in your stylesheet you've got it lowercase:```
.[B]smartbg_1[/B] #contentMainWrapper {background-image: url(../images/smartBG_1.gif);}

"smartBG_1" is NOT the same as "smartbg_1" ... so, it won't match.

Furthermore ...
3. You've specified smartBG_1.gif as the image name:
.smartbg_1 #contentMainWrapper {background-image: url(../images/smartBG_1.gif);}
but ...
4. Your server has a file with a different name:
http:// sunkissed.hostzi.com/shops/includes/templates/sunkissedvahinez/images/**smartbg_1.gif**

"smartBG_1.gif" is NOT the same as "smartbg_1.gif", so when the server goes to try to find the smartBG_1.gif you've specified in your stylesheet, it can't find that file because you've named it something else on the server.

The addon's instructions are clear. But you have to be consistent in how you follow the pattern if you want it to work.

28 Aug 2010, 7:29 AM
#24
gjh42 avatar

gjh42

Black Belt

Join Date:
Jul 2005
Location:
Upstate NY
Posts:
21,876
Plugin Contributions:
8

Re: how to add different background colors to different pages?

The Smart Backgrounds code looks for an image named smartbg_1.gif, not smartBG_1.gif. It's smart, not psychic :)

28 Aug 2010, 8:13 AM
#25
hangman21 avatar

hangman21

Zen Follower

Join Date:
May 2010
Posts:
138
Plugin Contributions:
0

Re: how to add different background colors to different pages?

i finally did it.... thanks so much guys.... its working now : ), so i got a question now

why is this page blue? http://sunkissed.hostzi.com/shops/index.php?main_page=product_info&cPath=1&products_id=1

when i just wanted this page blue? http://sunkissed.hostzi.com/shops/index.php?main_page=index&cPath=1

28 Aug 2010, 8:40 AM
#27
hangman21 avatar

hangman21

Zen Follower

Join Date:
May 2010
Posts:
138
Plugin Contributions:
0

Re: how to add different background colors to different pages?

what's that supposed to mean?

28 Aug 2010, 8:46 AM
#28
drbyte avatar

drbyte

Sensei

Join Date:
Jan 2004
Posts:
63,513
Plugin Contributions:
176

Re: how to add different background colors to different pages?

Yes. You need to study how CSS selectors work.
You've told it to make all class=smartBG_1 be blue.
If you want all other pages related to that category to not be blue, then you need to change the CSS selector to be more specific about how you want to limit it.
ie: in your stylesheet instead of specifying just .smartBG_1, make it be #indexBody.smartBG_1 since #indexBody is the specific <body> id that you're saying you want to change.

As gjh42 said, its smart, not psychic. And now you've got not only the answer but also the tools to help yourself.

28 Aug 2010, 8:48 AM
#29
hangman21 avatar

hangman21

Zen Follower

Join Date:
May 2010
Posts:
138
Plugin Contributions:
0

Re: how to add different background colors to different pages?

thanks drbyte, thanks so much, going to test it out

28 Aug 2010, 5:23 PM
#30
hangman21 avatar

hangman21

Zen Follower

Join Date:
May 2010
Posts:
138
Plugin Contributions:
0

Re: how to add different background colors to different pages?

i got one more question before i wrap thinks up

so if i want to want to change the background on this page

http://sunkissed.hostzi.com/shops/

do i type

#mainpage.smartBG_1

thanks

28 Aug 2010, 6:11 PM
#31
drbyte avatar

drbyte

Sensei

Join Date:
Jan 2004
Posts:
63,513
Plugin Contributions:
176

Re: how to add different background colors to different pages?

No.

You'll need to build it based on the HTML in the page. The HTML from which you'll build the appropriate CSS selector is: ```

<body id="indexHomeBody" class="smartBG"> ```

If you're following the instructions in the readme and in the articles I've pointed you to, and the posts above, you'll be able to use that information to figure out the solution to your question.

28 Aug 2010, 7:11 PM
#32
hangman21 avatar

hangman21

Zen Follower

Join Date:
May 2010
Posts:
138
Plugin Contributions:
0

Re: how to add different background colors to different pages?

cool thanks alot, it worked : )

another thing i tried doing the product listing for this page, like how cpath=1 is written but nothing happen

http://sunkissed.hostzi.com/shops/index.php?main_page=index&cPath=2

#indexBody.smartBG_2 #contentMainWrapper {background-color:#000000;}

28 Aug 2010, 8:21 PM
#33
drbyte avatar

drbyte

Sensei

Join Date:
Jan 2004
Posts:
63,513
Plugin Contributions:
176

Re: how to add different background colors to different pages?

Looks like you've broken the <body> tag such that it's not putting the category in anymore.
I defer to gjh42 ... or just make sure you're using the code as the addon supplies.

28 Aug 2010, 10:30 PM
#34
hangman21 avatar

hangman21

Zen Follower

Join Date:
May 2010
Posts:
138
Plugin Contributions:
0

Re: how to add different background colors to different pages?

thanks drbyte

yea i never change any coding everything is still the same, category 2 is reading the smartBG

<body id="indexBody" class="smartBG"> but it doesnt pick up smartBG_2

heres the website than one of you can take a look at it,
http://sunkissed.hostzi.com/shops/index.php?main_page=index&cPath=2

30 Aug 2010, 4:38 AM
#35
hangman21 avatar

hangman21

Zen Follower

Join Date:
May 2010
Posts:
138
Plugin Contributions:
0

Re: how to add different background colors to different pages?

ok i fixed up the broken body tag, didnt realize i had a body tag in my navbar menu... but that one page is still not working cpath=2

30 Aug 2010, 5:04 AM
#36
drbyte avatar

drbyte

Sensei

Join Date:
Jan 2004
Posts:
63,513
Plugin Contributions:
176

Re: how to add different background colors to different pages?

As per the readme, you need to create the image file on the server before it will trigger the change to the <body> tag.

30 Aug 2010, 7:25 AM
#37
hangman21 avatar

hangman21

Zen Follower

Join Date:
May 2010
Posts:
138
Plugin Contributions:
0

Re: how to add different background colors to different pages?

thanks alot drbyte its working perfectly now and thanks for helping me out gjh42, you guys are excellent

31 Aug 2010, 4:49 PM
#38
gjh42 avatar

gjh42

Black Belt

Join Date:
Jul 2005
Location:
Upstate NY
Posts:
21,876
Plugin Contributions:
8

Re: how to add different background colors to different pages?

Glad you have it working now, and thanks DrByte for pitching in with in-depth advice while I was not online.