How would I do this?

[Kenneth]

I want to have a simple gradient background and have the forums width all the way stretched out so it's touching the screens x-axis maybe like 50px to leave room for the gradient.

So how would I code something like this up?

[Nick]

Please elaborate. I don't quite understand.

So you want a gradient background, but I don't really get what you want with the forum width. Do you want the whole forum stretched out? Or just the header like cC?

[Kenneth]

Hey Nick does this image make more sense?

i52.tinypic.com/21475sx.jpg

[Nick]

Oh! Gotcha.

Um, I'll look at it some more tomorrow, I need to catch some sleep!

[Deko]

If you're doing this fluid width, you need to find a way to place a div tag at the top of your forum (above the welcome table) then place a closing div tag at the very bottom. Though if you're not worried about validating your code, you only need the opening div tag.

EDIT: The easiest way to place that tag is to change your header/footer settings from your admin panel. (Admin cp >> headers/footers >> click the link that says "Click here to manage your headers and footers preferences.") Change the global header drop down to "Above title bar". Then just place that div tag in the header.

Because it's fluid, you will actually need one gradient along the left side and another along the right.

Think of it this way:
<--- Body background color --->

That way it stretches with the browser:
<--- The gradients stick to the sides no matter how big the browser --->

You will first assign the left gradient using css:
<style type="text/css">
body {
background-image: url(left gradient url);
background-repeat: repeat-y; /*repeats along y axis*/
background-position: left; /*moves the gradient left*/
}
</style>

Next, assign a class to the div tag you placed earlier. Would look like this <div class="rightgradient">

Then do the css for it like the left side, add this to your style sheet:
.rightgradient {
background-image: url(right gradient url);
background-repeat: repeat-y;
background-position: right;
}

---

Now to stretch the boards. Use standard forum width code and set it to 100%:
<script type="text/javascript">
<!--
var fWidth = '100%';

var table = document.getElementsByTagName('table');
for(t=0; t<table.length; t++) {
   if(table.item(t).width == "92%") {
       table.item(t).width = fWidth;
   }
}
// -->

</script>


Now the easiest way is to manipulate the width using a table. You will need three columns (3 <td> tags). If the table is the width of the browser (100%) then outer two <td> tags will need the same width as the width of your left and right gradients. The middle <td> will then be the browser width minus the gradient widths, in this case 17px each (100% - 34px). Just set the width of the outer <td> tags and the middle one should set itself. The following goes in your Header:

<table width="100%"><tr>
<td width="17px"></td><td>

Then this in your footer:
</td><td width="17px"></td>
</tr></table>

You might need to set some properties within the tags like cellpadding, cellspacing, align, etc. But this should get you on the right track.

[Kenneth]

Hey thanks guys, and I'll still be able to add textures with it this way also via Skins in Forum background right? Once I get my energy up I'll take a look at and also Nick I am still trying to figure out how to get the banners stretched like that since you mentioned it.

[Deko]

You can if you add another div tag <div class="leftgradient"> instead of using the body bg for the left gradient.

Just use this instead for that first bit of css:

<style type="text/css">
.leftgradient {
background-image: url(left gradient url);
background-repeat: repeat-y; /*repeats along y axis*/
background-position: left; /*moves the gradient left*/
}
</style>


[Kenneth]

goldentickets.proboards.com/index.cgi

This is what happens when I try

[Nick]

Change:


var fWidth = '100%';


to


var fWidth = '96%';


[Deko]

This should be in the footer (right now I think it's in the header)
</td><td width="17px"></td>
</tr></table>


and you'll need the other table html in the header:
<table width="100%"><tr>
<td width="17px"></td><td>

Then this:
<style type="text/css">
body {
background-image: url(http://i53.tinypic.com/oqzy9c.png);
background-repeat: repeat-y; /*repeats along y axis*/
background-position: left; /*moves the gradient left*/
}
.rightgradient {
background-image: url(http://i56.tinypic.com/15n4ppi.png);
background-repeat: repeat-y;
background-position: right;
}


<div class="rightgradient">

<style type="text/css">
.rightgradient {
background-image: url(http://i56.tinypic.com/15n4ppi.png);
background-repeat: repeat-y;
background-position: right;
}
</style>

</div>

Should be replaced with this (forget about the closing div tag for now):
<div class="rightgradient">


<style type="text/css">
body {
background-image: url(http://i53.tinypic.com/oqzy9c.png);
background-repeat: repeat-y; /*repeats along y axis*/
background-position: left; /*moves the gradient left*/
}
.rightgradient {
background-image: url(http://i56.tinypic.com/15n4ppi.png);
background-repeat: repeat-y;
background-position: right;
}
</style>

[Kenneth]

Looks pretty good, just need to work on the banner, if I throw in some codes to remove it will the gradient go all the way to the top?

[Deko]

Removing the welcome table won't fix that, you'll either need to place the div tag above the welcome table with javascript or change your header settings:

The easiest way to place that tag is to change your header/footer settings from your admin panel. (Admin cp >> headers/footers >> click the link that says "Click here to manage your headers and footers preferences.") Change the global header drop down to "Above title bar". Then just place that div tag in the header.

The only problem with adjusting the settings is that it might effect certain PB codes.

[Kenneth]

Thats looking really nice, I see a nice looking gradient theme coming out of this.

Now to tackle the banner

[Deko]

Looking good so far

[Kenneth]

Alright, so what's the easiest way to add a texturized image with the fluid gradients?

[Deko]

Ah shiet, sorry. I'll help you soon, promise. I've just been busy these last couple days. And I totally burned today on a 6 hour nap >.<

If you want to try to figure it out though, you will need to change body to .rightgradient (in your style sheet) then add a corresponding div tag to the header. That will free up the body tag for styling so you can use the following to add your texture :
<style type="text/css">
body {
background-image: url(URL HERE);
}
</style>


Also I have an update for doing the margins to the left and right of the tables that's easier and more efficient. (Not sure why I didn't do it this way the first time) I'll post that soon. Gotta go for now! Good luck

[Kenneth]

goldentickets.proboards.com/index.cgi

Notta unless I have to place it in a different area? or maybe I should reword it, I'd like to add a background image along with the gradiens, not sure if you understood what I needed or not