Smart Backgrounds support

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?

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

</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 <https://www.w3schools.com>.

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

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.

OK I was able to add this

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

"Center" is a flexible concept... What you want is the whole page, leaving the body background as is. For this, use ```
#historyBody #mainWrapper {background-color: #000000;}

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

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

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.

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:

/*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:

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

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 :frusty:

This mod is only going to be effective for background images, not foreground images like the logo. If you have an image defined for the logo, it will always cover the background. You need to suppress that image and give #headerLogo a defined height where you want the background to show for the logo. Presumably you would do this in top2.php.
You could add to your stylesheet for each page where you want a bg logo

.smartBG_95 #logo {display: none;}

I'm not sure I follow you. And, actually, I've done away with top2.php and I'm doing it this way instead:

<!--bof-branding display-->

<?php
if ($this_is_home_page) {
include('top_main.php');
}
else
{
echo '<a href="' . HTTP_SERVER . DIR_WS_CATALOG . '">' . zen_image($template->get_template_dir(HEADER_LOGO_IMAGE, DIR_WS_TEMPLATE, $current_page_base,'images'). '/' . HEADER_LOGO_IMAGE, HEADER_ALT_TEXT, '','', 'id="logo"' ) . '</a>';

}
?>

       </td>

</tr>
</table>
<!--eof-branding display-->

Now, back to the logo problem. You say that I can't really use this mod for foreground images, but in the read me file, there are explicit directions (which confuse the heck out of me anyway) for doing so. :blink::wacko:

I'm wanting to completely revamp my site, and using different headers and logos is the perfect way to do it.

There's gotta be a way.

Oh right... it does say that...:) The first version of the mod with code in the file where the switching happens could be modified for foreground images. The same principles could be used in the new version, but would require adding new code in the file (in this case tpl_header.php.) I'm away from home right now and don't have access to my files, so I'll look at it later and get back to you.

Ok, I sure would appreciate that. Will that be today (this evening-don't know your time zone)?

Probably tomorrow morning your time.

Ok. Looking forward to it. Thanks.

You would edit this area in tpl_header.php:```php

<!--bof-branding display--> <div id="logoWrapper"> <div id="logo"><?php echo '<a href="' . HTTP_SERVER . DIR_WS_CATALOG . '">' . zen_image($template->get_template_dir(HEADER_LOGO_IMAGE, DIR_WS_TEMPLATE, $current_page_base,'images'). '/' . HEADER_LOGO_IMAGE, HEADER_ALT_TEXT) . '</a>'; ?></div> ```Put the Smart BG code just above the logo div, with alterations as shown, and edit the logo display to use the smart filename, to end up with this:```php <!--bof-branding display--> <div id="logoWrapper"> <?php //Smart Backgrounds - for foreground logo $smart_image = ''; $unique_ezpages = true;//change to false to not have diff bg for each ezpage if ($current_page_base == 'index' or $current_page_base == 'product_info') { //change filename to smartimg_ and top cat id only if cat image exists $smart_image = (file_exists(DIR_WS_TEMPLATE_IMAGES . 'smartimg_' . str_replace(strstr($_GET[cPath],'_'),'',$_GET[cPath]) . '.gif'))?'smartimg_' . str_replace(strstr($_GET[cPath],'_'),'',$_GET[cPath]):HEADER_LOGO_IMAGE; } elseif ($current_page_base == 'page' and $unique_ezpages == true) { //change filename to smartimg_page and ez-page id only if ez-page image exists $smart_image = (file_exists(DIR_WS_TEMPLATE_IMAGES . 'smartimg_page' . $_GET[id] . '.gif'))?'smartimg_page' . $_GET[id]:HEADER_LOGO_IMAGE; } else { //change filename to smartimg_ and pagename only if page image exists $smart_image = (file_exists(DIR_WS_TEMPLATE_IMAGES . 'smartimg_' . $current_page_base . '.gif'))?'smartimg_' . $current_page_base:HEADER_LOGO_IMAGE; //default/home page image will be as defined (HEADER_LOGO_IMAGE) }// /Smart Backgrounds?> <div id="logo"><?php echo '<a href="' . HTTP_SERVER . DIR_WS_CATALOG . '">' . zen_image($template->get_template_dir($smart_image, DIR_WS_TEMPLATE, $current_page_base,'images'). '/' . $smart_image, HEADER_ALT_TEXT) . '</a>'; ?></div> ```

This is what I have in my tpl_header.php now

<!--bof-branding display-->

<?php
if ($this_is_home_page) {
include('top_main.php');
}
else
{
echo '<a href="' . HTTP_SERVER . DIR_WS_CATALOG . '">' . zen_image($template->get_template_dir(HEADER_LOGO_IMAGE, DIR_WS_TEMPLATE, $current_page_base,'images'). '/' . HEADER_LOGO_IMAGE, HEADER_ALT_TEXT, '','', 'id="logo"' ) . '</a>';

}
?>

       </td>

</tr>
</table>
<!--eof-branding display-->

How would I add what you suggest to this without breaking my home page flash logo?

I've gone passed the alloted 7 minutes for editing:frusty:

Anyway, here is what I did:

Ok, here is what I've done.

In tpl_header.php I have this:

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

in my top2.php I've put the code you suggested above.

Now, When I go to my Gift Certificates page, It still isn't working, however, I can see some changes effected by your code within the page source. This tells me we are making progress.

a little more information:

The cPath is 95 so in my stylesheet_smartbg.css I have

.smartBG_95 #logo {background-image: url(../images/smartbg_95.gif);}

I used #logo because that is what shows up when you do a view page source on that page.

The logo still doesn't change to smartbg_95.gif.