Smart Backgrounds support

[otakushark]

I'm actually trying to change the overall background of the page, not the header. The default background I'm using is a 10x758 black-to-blue gradient called body_bg.gif that matches the blue defined below. The background I'm trying to swap in is a 1024x553 badge image called smartbg_contact_us.gif. Yeah, I know such a large image is bad, but that's what he wants...

/*wrappers - page or section containers*/
#mainWrapper {
    background-image: url(../images/body_bg.gif);
    background-repeat: repeat-x;
    background-color: #0700D2;
    } 

[gjh42]

The code located in tpl_header.php can only affect the header area. To apply it to the whole page, you will need to move the code.

Does the top part of the gif look like the regular header? If so, it could be switching and the change not be visible, because it is cut off below the header.

You will want to edit /includes/templates/your_template/common/tpl_main_page.php. Near the top, find

  }
?>

<div id="mainWrapper">
<?php
 / **
  * prepares and displays header output

and change


<div id="mainWrapper">

to this:

<!--Smart Backgrounds-->
<?php $smart_image = '';
if ($current_page_base == 'index' or $current_page_base == 'product_info') { //add _ and top cat id to bg filename only if cat bg image exists
  $smart_image = (file_exists(DIR_WS_TEMPLATE_IMAGES . 'smartbg_' . str_replace(strstr($_GET[cPath],'_'),'',$_GET[cPath]) . '.gif'))?'_' . str_replace(strstr($_GET[cPath],'_'),'',$_GET[cPath]):'';
} else { //add _ and page base to bg filename only if page bg image exists
  $smart_image = (file_exists(DIR_WS_TEMPLATE_IMAGES . 'smartbg_' . $current_page_base . '.gif'))?'_' . $current_page_base:'';
}?>
<!--/Smart Backgrounds-->
<div id="mainWrapper" class="smartBG<?php echo $smart_image;?>">

and change the stylesheet to match, with #mainWrapper instead of #headerWrapper.

[gjh42]

I see you're working on it. Commenting out the original line isn't working the way you have it:

<div id="mainWrapper" class="smartBG_contact_us">
/* Code block above replaced: <div id="mainWrapper"> */

You need to use HTML comment tags <!-- -->

<div id="mainWrapper" class="smartBG_contact_us">
<!-- Code block above replaced: <div id="mainWrapper"> -->

OK, you have that now.

[otakushark]

That did it! It's now working in Contact Us and the US Marshals category. Sorry for being such a n00b.

I have two remaining questions:

1) How would I get this working on EZpages, like the Artist Biography one? I'm guessing there is a different template file I need to copy the code into, but I'm not sure which one.

2) Since I'm using only one special background image, is it possible to define just one image name (like "smartbg_special.gif") that could be used on multiple pages, rather than taking the same image and renaming it after the page identifier?

[otakushark]

You need to use HTML comment tags <!-- -->

Thanks! I got stuck in CSS mode...

[gjh42]

That's happened to me more than once when switching between languages...

It would be easy enough to change the logic for that task. You would want to check $current_page_base against a list of pages:

<!--Smart Backgrounds-->
<?php $smart_image = '';
if (in_array($current_page_base,explode(",",'list_pages_to_show_custom_bg_on_here,separated_by_commas,and_no_spaces')) ) {
  $smart_image = '_badge';
}?>
<!--/Smart Backgrounds-->
<div id="mainWrapper" class="smartBG<?php echo $smart_image;?>">

For ez-pages, the base is "page"; to get specific ones and not others, you would need to run a subsidiary check on the page id:
if ($current_page_base == 'page' and $_GET['id'] == 7) {

}

[otakushark]

Thanks! The single-image aspect of this appears to be working, and the Contacts page works, but not the Marshals one (index.php?main_page=index&cPath=1).

I do want to have the special background appear on certain EZpages only, so I added that additional code as well, although I'm not sure if it's in the right spot since I don't know PHP. I'm also not sure what to put into the code below to specify the EZpage I want, Author Biography (index.php?main_page=page&id=5&chapter=0).

Here's what I have in tpl_main_page.php:

<!--Smart Backgrounds-->
<?php $smart_image = '';
if ($current_page_base == 'page' and $_GET['id'] == 7) {
}
if (in_array($current_page_base,explode(",",'contact_us,1')) ) {
  $smart_image = '_badge';
}?>
<!--/Smart Backgrounds-->
<div id="mainWrapper" class="smartBG<?php echo $smart_image;?>">

Here's what's in the stylesheet_smartbg.css file:

#mainWrapper.smartBG_badge { background-image: url(../images/smartbg_badge.gif);} 

[gjh42]

You do want category bg function as well as main pages and specific ez-pages, so it will take a combination of the if tests posted here.

<!--Smart Backgrounds-->
<?php $smart_image = '';
if ($current_page_base == 'index' or $current_page_base == 'product_info') { //add _ and top cat id to bg filename only if cat bg image exists
  $smart_image = (file_exists(DIR_WS_TEMPLATE_IMAGES . 'smartbg_' . str_replace(strstr($_GET[cPath],'_'),'',$_GET[cPath]) . '.gif'))?'_' . str_replace(strstr($_GET[cPath],'_'),'',$_GET[cPath]):'';
} elseif (in_array($current_page_base,explode(",",'contact_us'))  or ($current_page_base == 'page' and ($_GET['id'] == 5))) {
  $smart_image = '_badge';
}?>
<!--/Smart Backgrounds-->
<div id="mainWrapper" class="smartBG<?php echo $smart_image;?>">

The explode is not necessary for a single page name, but will be useful if you want more. Likewise, if you want more ez-pages, you can duplicate the $_GET['id'] == 5 like
($_GET['id'] == 5 or $_GET['id'] == 8)

You will need smartbg_1.gif image files for each category desired, and one smartbg_badge.gif for the rest.

[otakushark]

Thank you so much! Everything is working now, and I was able to set it up to display on the desired pages no problem.

I really appreciate the extra time you took to walk a newbie like me through the process. Thanks again!

[francocauter]

Hi Glenn
I would like to put 3 different images in the main background.
header-top-right, right, and footer-bottom-right
I think I have an idea how to do this but I need help. I think I need to setup some <div> & class.
Do I put the <div>s in the tpl_main_page.php?
Thanks in advance
Regards
Franco