First off, this is for a LIQUID (90%) layout, fixed is not an option.
My forum currently looks like this:
http://www.booost.com/dev/without_bg.jpg
What do I need to edit to get borders like this?
http://www.booost.com/dev/with_bg.jpg
I've tried doing this the old-school way using tables in the header/footer to create columns around the entire forum but its not working at all.
http://www.supramania.com/ has this style but I can't seem to get it to work using their source code. Any ideas?
I've gotten this to work using the method supramania.com has by studying their code but there is a bug when the page does not span the full height of the browser window like so:
http://www.booost.com/dev/bg_bug.jpg
Here is the code I used to achieve the effect (which works fine if the page spans 100% of the height):
Style Manager > Common Templates > Header
Code:
<div id="content1">
<div id="content2">
<!-- content table -->
$spacer_open
$_phpinclude_output
Style Manager > Common Templates > Footer
Code:
<br />
<div class="smallfont" align="center">$vbphrase[all_times_are_gmt_x_time_now_is_y]</div>
<br />
....
</div>
</div>
Style Manager > Main CSS > Body
Code:
margin: 0px;
padding: 0px;
background:transparent;
background-image:url(http://www.booost.com/forums/images/page_bgright.gif);
background-position:right;
background-repeat:repeat-y;
min-height:100%;
Style Manager > Main CSS > Additional CSS Definitions
Code:
/* ***** styling for 'big' usernames on postbit etc. ***** */
.bigusername { font-size: 14pt; }
/* ***** small padding on 'thead' elements ***** */
td.thead, div.thead { padding: 2px; }
/* ***** basic styles for multi-page nav elements */
.pagenav a { text-decoration: none; }
.pagenav td { padding: 2px 4px 2px 4px; }
/* ***** define margin and font-size for elements inside panels ***** */
.fieldset { margin-bottom: 6px; }
.fieldset, .fieldset td, .fieldset p, .fieldset li { font-size: 11px; }
/* ***** don't change the following ***** */
form { display: inline; }
label { cursor: default; }
.normal { font-weight: normal; }
.inlineimg { vertical-align: middle; }
html {
margin:0;
padding:0;
background-color:#899198;
background-image:url(images/page_bgleft.gif);
background-position:left;
background-repeat:repeat-y;
color:black;
}
div#content1 {
margin-left:35px;
margin-right:35px;
border:0px;
background-color:#899198;
color:black;
}
div#content2 {
padding-left:0px;
padding-right:0px;
I guess the main question is, how do I make the main "page" portion of my forums always stretch to 100% of the height of the browser window?