Smart Backgrounds support

**welchyboy** · 22 Aug 2008, 04:01 PM

Originally Posted by 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.

OK when you talk about #indexBody and the background color which is probably what I am interested in. I am interested in changing the center background color. So where would I put the individual page IDs at? I will work on this tonight and see if i can get this working. If not i will post back and see if i can get some more info. This one seems like it would be a little better with just one document and reference each page inside one css stylesheet and I can just add comments which say which specific page it is. Am I understanding this correctly?

**gjh42** · 22 Aug 2008, 04:21 PM

I think so.
If you navigate to the page whose background color you want to change and do a View Source, you will see in the code something like this:

HTML Code:

</head>

<body id="productinfoBody">
<div id="mainWrapper">

The body id is the thing to put before the element class/id to get per-page styling. Be sure to use correct CSS details like the # or . in front of an id or class name. If you are not clear on CSS, look at the tutorials at www.w3schools.com.

You can add the new lines to the end of your main stylesheet.

**welchyboy** · 22 Aug 2008, 06:50 PM

Yeah I am not very familiar with it. I have messed with it here and there but I will look into more of this later on tonight and hopefully i can figure it out. If i have questions i will post back.

**welchyboy** · 23 Aug 2008, 01:09 AM

OK I was able to add this

Code:

#historyBody .centerColumn {background-color: #000000;}

which changes the color of the history page but only like the top portion of the center column. I am interested in changing the whole page to make. The sides the top everything that is the background for the center block. Not the actual background because I have an image on there which will be ok for all the pages. But I am interested in changing the entire center "block" of the page to one color.

**gjh42** · 23 Aug 2008, 04:11 PM

"Center" is a flexible concept... What you want is the whole page, leaving the body background as is. For this, use

Code:

#historyBody #mainWrapper {background-color: #000000;}

**welchyboy** · 23 Aug 2008, 04:51 PM

MAN YOU ROCK!!! Seriously thanks soooooooooo much. It is just the little things that make me happy haha. Thank you so much!!!

**Girdy74** · 31 Aug 2008, 08:36 AM

RE: Post 71 & 74.

Thanks for your input. I tried this and it didn't work (post 74). All my smartbackgrounds were overwritten and then nothing showed up. So I tried putting:

.smartBG #logoWrapper {
width:384x;
height:220px;
background-image: url(../images/header_LT.jpg);
background-repeat:no-repeat;
background-position: bottom right;
}
and that worked like a charm. Even for the https://secure.authorize.net/blah/blah/transaction.dll

So YEAH - I have a default now!! I don't have to write a million special backgrounds!!

Thank you for this module! It is great....

**gjh42** · 31 Aug 2008, 06:07 PM

Since I can't see your site to know everything you have done, I can't comment, except to say that I'm glad you have it working to your satisfaction. The code you posted should certainly work in all cases where some other specific image is not detected & used.

**wtashby** · 11 Sep 2008, 05:09 PM

Glenn, I'm having a little trouble following the instructions here. For some reason, I just can't wrap my brain around it.

Quick explanation.

I'm wanting different category logos, Not backgrounds. I've got the background part down I think. No problem there.

How do I use this mod to make different logos for each category. Everything I've tried according to what I've read in this thread just puts everything behind my existing (current) logo as a background.

If you want to check it out, I am testing it on THIS page of my site, (the other logo is there, just in the background) and this is the the css I've used:

Code:

/*testing on gift certificate page
.smartBG_95 #headerLogo { 
background-image: url(../images/smartbg_95.gif);
background-repeat: no-repeat;
float : none;
margin : 0 0 0 0;
text-align : center;
}

The home page logo is a flash logo, and I am using this code to kill that for the rest of the site:

Code:

<?php
if ($this_is_home_page) {
include('top_main.php');
}
else
{
include('top2.php');
}
?>

This doesn't seem to interfere with SBG at all though.

Anyway, any help would be much appreciated.

Thanks,

Tom

**wtashby** · 11 Sep 2008, 06:29 PM

As of writing my last post, I keep trying different combination's of the codes I listed above, but, they remain essentially the same. Nothing I do seems to work for me, and I'm hitting the proverbial

Thread: Smart Backgrounds support

Thread Tools

Search Thread

Display

Re: Smart Backgrounds support

Re: Smart Backgrounds support

Re: Smart Backgrounds support

Re: Smart Backgrounds support

Re: Smart Backgrounds support

Re: Smart Backgrounds support

Re: Smart Backgrounds support

Re: Smart Backgrounds support

Re: Smart Backgrounds support

Re: Smart Backgrounds support

Similar Threads

Adding Image Map to header with Smart Backgrounds

smart backgrounds

Backgrounds

Posting Permissions