[TheLastSuperman]

Originally Posted by gregmlb

Okay – I’ve been studying Beermonster’s mod, and have successfully implemented part of it. Here is what I’ve got, and what I’ve learned …

First of all, if I split my header image into three pieces (as in Beermonster’s example), then I run into trouble when the user has a narrow window. [The right-side graphic needs to be so wide because of the slow color fade.] For example, this is what one sees:



So to get around the issue shown above, I switched to ONLY using a left image, and that seems to work fine (not considering the user log on location just yet though):



Here is my next question … and maybe you just haven’t schooled me this far just yet … but the forum needs to be beneath a bunch of live links and a big 728x90 banner ad, like so (shown in my working 3.8.6 forum page):



How do we accomplish what you see above?

Thanks again in advance for your help with this, Sir! I very much appreciate the advice!

Greg

Ok first things first... think and realize the possibilities and limitations of using a fixed or fluid width style.

Fixed = When you maximize the center "column" stays one width and the side margins become larger.

Fluid = When you maximize the center "column" stretches and the side margins stay the same.

If you go with a fixed width long story short you'll have full control over the sites style, if you go fluid width now many of the exact size 500px width css classes are now required to be % i.e. 50% so it then becomes tricky for one not well versed. I would say go fixed width unless your working for a client then it's their wish is your command naturally however I always recommend a fixed width others would argue and also bring valid reasons to the table (such as your columns... fixed width you can make it one size to always look a certain way or you can make it fluid so the sides stay the same yet the inside stretches which would be more in-depth though it can be done is the point) and it's really your preference honestly your the owner .

So let's get down to it...

What your going to do is basically wrap your entire forum with a version of the three part header. How you go about this is determined by your choice of a fixed or fluid width style, if both we'll go over one and you can do the other and build your confidence up about css .

#headerFill{
background-image: url(images/headerFill.jpg);
background-repeat: repeat-x;
height: 119px;
width: 100%;
margin-right: auto;
margin-left: auto;
}
#headerL{
background-image: url(images/headerL.jpg);
height: 119px;
background-repeat: no-repeat;
width: 348px;
float: left;

}
#headerR {
background-image: url(images/headerR.jpg);
background-repeat: no-repeat;
height: 119px;
width: 332px;
float: right;

}

You'll modify the css accordingly and sometimes leaving out definitions is better than putting them in for example if we are wrapping the forum it's a good idea to leave the height undefined i.e. remove it from the code above so it does it's own thing as we would want .

Next is splitting up the <div tags and knowing what your putting in each "Column" if you will and then ensuring it all works.

So I've just explained a basic run through of what we are going to do, reply back with fixed or fluid width and if fixed the size you have set and I'll whip some code examples up and tell you which templates to edit and paste the code in.

--------------- Added [DATE]1292637134[/DATE] at [TIME]1292637134[/TIME] ---------------

Greg,

As an example as sometimes I can't wait for a reply call it my preemptive intuitions lol here is what you can paste and try (will require some tinkering on your end)...

Paste into additional.css:

#forumFill{
background-image: none;
background-repeat: repeat-x;
width: 100%;
margin-right: auto;
margin-left: auto;
}

#forumL{
background-image: none;
background-repeat: no-repeat;
width: 150px;
float: left;
}

#forumC {
background-image: none;
background-repeat: no-repeat;
width: 600px;
float: left;
}

#forumR {
background-image: none;
background-repeat: no-repeat;
width: 150px;
float: left;
}

For my example this would be if your forum was fixed width and set at let's say 940-1000+px range or right along those lines you may want to compensate for margins etc.

Now edit your navbar template and paste this at the very bottom:

<div id="forumFill">
<div id="forumL">Testing 123</div>
<div id="forumC">

Now edit your footer template and paste this at the very top:

</div>
<div id="forumR">Testing 123</div>
</div>

If you set doc_width to 940px and doc_margin to auto on left and right you'll see three columns . Now you'll want to include some padding css and possibly mess with this some more to achieve your desired look and "feel" as you can see in the screenshot you'll want to move the far right column over more.

Demo:


Give that a go, tinker with it and let me know how your doing

Edit: *If your using the suite version you may not want this on the CMS/Home page if that's the case don't forget you can comment out these edits using template conditionals .