I have a semi-transparent header background which works great on my homepage (www.knoppermann.com) but it extends down to cover most of the page on some other pages such as:

www.knoppermann.com/featured and
www.knoppermann.com/galleries and
www.knoppermann.com/Travel etc.

I have been advised by smugmug support that

1. Apparently the semi-transparent wrapper is the #bodyWrapper div id, which is part of the SmugMug site structure, and that things are going wrong because by default the #bodyWrapper encapsulates every container on the page, which is why the semi-transparent wrapper is being forced down lower on those pages with more content.

2. Apparently the solution is to "create a specific div container for the transparent background, so that you can close it (</div>) at the end of the Custom Header."


The truth is, I really don't understand this at all!!!! Can somebody explain in plain English what I need to do to fix my problem?

In your custom header add the code in red:

<div id="secret">
<a href="javascript:void(0)" onclick="window.location='https://secure.smugmug.com/login.mg?goTo='+window.location.href">.</a>
</div>
<div id="headerBox">
<div id="my_banner"><a href="http://knoppermann.com"><img src="/img/spacer.gif" width="468" height="46" border="0" /></a></div>
<div align="left">

Then at the end of your custom header box add this:

</div>

Then in your CSS, you have this:

.homepage #bodyWrapper {
background-image:none !important;
background:rgba(22, 22, 22, .40);
}

Change the #bodyWrapper to #headerBox

Thanks very much Eric!

I also removed the .homepage bit in the CSS so that it applied to every page. Works perfectly on every page except one:

http://www.knoppermann.com/find/

?

I love solutions! (even if I can't reach them myself).

Ooh, didn't see that bit. The </div> you added to the end of your Custom Header box, move that to above your search box code. So right above this:

<div id="mySearch" class="box">

Originally Posted by Smug Eric Ooh, didn't see that bit. The </div> you added to the end of your Custom Header box, move that to above your search box code. So right above this: <div id="mySearch" class="box">

Cheers! Happy happy happy! And it's only 8am!