Alright, I heard a question in support asking about this, and this is a very cool effect that you can add to make your skins look more dynamic. This part will add an image border to the left and right sides, such as in
this skin.
Let's first take a look at the code that you should insert into your:
Board Wrappers > Header & Body (Completely Replace)
QUOTE <center><body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" alink="#000000" vlink="#000000">
<table cellspacing="0" bgcolor="
BgColor" valign="top" height="100%" width="
WidthofBoard"><tr><td valign="top" height="100%" background="
LeftURL" style="
padding:5px;border:0px;"></td><td height="100%" valign="top">
<% BOARD HEADER %>
<% NAVIGATION %>
<% BOARD %><br />
And in the Footer:
QUOTE
</td><td align="left" valign="top" background="
RightURL" style="
padding:5px;border:0px;"></td></tr></table>
Let's take a look at some of the various aspects I bolded and put in green, and what you should change them to:
WidthofBoard: This is the width of your board in pixels. Change this to the size you want your board to be, I personally suggest 800px.
BgColor: These are the background colors of where your images are going to be and of your board. If you have images, then the image will go over the color and the color will NOT be seen.
LeftURL: This is the image that will appear on the left as your left table border. You can use whatever you want, an image, gradient, and so on.
RightURL: This is the same as LeftURL, except that it is the image that will appear on the right side.
padding:5px;: This will effect the width of your image borders. Increase it for a larger width, and decrease it for a smaller.
border:0px;: This is the border around your images. I set it to 0px.
Basically, just replace the parts in green with what you need to get the best desired effects.
All's this really is a table that includes 3 basic cells, the left border, the actual board, and the right border. If you know what you doing, I would recommend replacing the width properties, and use style="padding:whateverpx"
Code revised and edited
Now let's take a look at putting a complete border around our forum, instead of just the sides.
QUOTE <body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" alink="#000000" vlink="#000000">
<center><table cellpadding="0" cellspacing="0" width="
WidthHere">
<tr>
<td><img src="
TopLeftSpacerHere" /></td><td width="100%" background="
TopHere
"></td><td><img src="
TopRightSpacerHere" /></td></tr>
<tr>
<td background="
LeftBorderHere
"><img src="
LeftBorderHereAgain
" /></td><td>
<% BOARD HEADER %>
<% NAVIGATION %>
<% BOARD %>
<% STATS %>
Now this time, we need to add some things to the footer.
QUOTE
</td><td background="
RightBorderHere"><img src="
RightBorderHereAgain" /></td></tr>
<tr>
<td><img src="
BottomLeftSpacerHere" /></td><td background="
BottomHere"></td><td><img src="
BottomRightSpacerHere" /></td></tr></table>
As you see, there are some new areas introduced, I'll go over a brief explanation over the new ones.
Top Left Spacer: This is the top left Image that will act as the top left corner.
TopHere:This is the top border of your forum.
Top Right Spacer: This is the top right image that will act as the top right corner.
Bottom Left Spacer: This is the bottom left image that will act as the bottom left corner.
BottomHere: This is the bottom border.
Bottom Right Spacer: This is the bottom right image that will acr as the bottom right corner.
Preview full border - Skin Preview
Pretty simple isn't it?
Welcome to Your vBulletin Resource
Improve Your Community Today
12-16-2005, 09:56 PM 
Posts: 2
Location: United Kingdom
Ability: Advanced
vBulletin 3.0.X
