Centering Your Board/adding A Border

Lotus Pod · 11-12-2005

Centering your board or defining a width is useful for skins using an Enhanced Maintitle and will stop them repeating.

The following code is simply added to the Header and Body section under

Admin CP --> Board Wrappers

Quote:

Â*
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" alink="#000000" vlink="#000000"><body text="#000000" link="#000000" vlink="#000000" alink="#000000" leftmargin="2" topmargin="2" marginwidth="2" marginheight="0">
<table width="750" border="1" align="center" cellpadding="4" cellspacing="0" bgcolor="#HEX" height="378" bordercolor="#HEX">
<tr>
Â* <td width="90%" height="100%" bgcolor="#HEX">
<% BOARD HEADER %>
<% NAVIGATION %>
<% BOARD %>
<% STATS %>

This code replaces the default header that comes with a new IF board.

The Blue value changes the width of your forum. 750 is recommended as it works best for most resolutions. However the width of your board is completely up to you.
The Red value changes the border colour.
The Purple value changes the background of the table. (Behind the forums)

You can change the look of your border by adjusting the HTML properties.

Quote:

Â*
border="1"

Simply find the above part in the border code and change it to 0 if you dont want a border, or if you want to you can make it thicker.

If you want to increase the space between the border and the board-

Quote:

Â*
cellpadding="40"

Find that value and increase it to make the gap larger, or decrease it.

Dont want a border?

You might not want the background of the table to be a different colour than the background colour of the CSS, or have a border around your forum. If you just want to center it, then use the background colour in the CSS for the Table also, and set the border width to 0.

Want Gradients As Your Border?

You might want gradients to be your border, or you might want your boards to have a shadow. Its quite easy to do. Make a gradient in Photoshop or another Photo Editing Software and make sure that its Vertical (Up and down). Remember to make one for each side, and not just one side. Upload it to your imagehost and simply put the following code into your Header & Body portion of the Board Wrappers:

Quote:

<center>
Â* Â* <table border="0" cellpadding="0" width="100%" height="100%" cellspacing="0" align="center">
Â* Â* Â* <tr width="100%">
Â* Â* Â* Â* <td width="5" bgcolor="#1D1D1D" background="http://img449.imageshack.us/img449/6...border16hm.gif"Â* rowspan="2">[img]http://img449.imageshack.us/img449/6...border16hm.gif[/img]
Â* Â* Â* Â* Â*

Â* Â* Â* Â* Â*

Â* Â* Â* Â* Â*

Â* Â* Â* Â* </td>
Â* Â* Â* Â* <td width="Width" valign="top"><% BOARD HEADER %>

<% NAVIGATION %>
<% BOARD %>
<% STATS %></td>
Â* Â* Â* Â* Â* <td width="5" background="http://img494.imageshack.us/img494/6...border19qq.gif" bgcolor="#161616" rowspan="2">[img]http://img494.imageshack.us/img494/6...border19qq.gif[/img]

Well as you can see it goes Before <% BOARD HEADER %>. Now let me explain the parts. All the Bolded Red is the actual border Background for the Left Side. All the Italicised Red is just the Image Source for the Left Side. All the Bolded Blue is the actual background for the right side. And as before, the Italicised Blue is the image source. All you do really, is copy/paste that in and replace the Italicised and Bolded areas with the links to your Gradients.. For an example of the Gradient Border look here:

<div align=center>

</div>

If you have any questions, please either PM Me or Email me at psychoxjoex@yahoo.com.

Raiku · 11-12-2005

Nice tut, very useful to new skinners.

Omgkwtf · 02-26-2006

Nice tut. ^_^

neshro · 03-01-2006

nice

xiled · 03-04-2006

nice tutorial, im could use this.

ArchAngel · 03-04-2006

There is also another way to do this. You can add something in the CSS and add a div to your wrappers to do so and you won't have a tacky table around your board.

ives · 03-10-2006

cool

TizBiz · 03-10-2006

Very interesing nice job.

ELLA <3 · 04-14-2006

Helpful, thanksx10

xxexilexx · 04-14-2006

Thanks i needed this

03-04-2006	#6 (permalink)
ArchAngel Senior Member Join Date: Mar 2006 Location: United States Age: 19 Posts: 1,100	There is also another way to do this. You can add something in the CSS and add a div to your wrappers to do so and you won't have a tacky table around your board. __________________ "Happy endings are just unfinished stories" - Me

03-10-2006	#7 (permalink)
ives Junior Member Join Date: Mar 2006 Posts: 11	cool __________________ http://img52.imageshack.us/img52/159...rekopie0kf.jpg

03-10-2006	#8 (permalink)
TizBiz Junior Member Join Date: Mar 2006 Posts: 28	Very interesing nice job. __________________ <div align=center>http://img214.imageshack.us/img214/8...ncegirl4ov.gif</div>

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Adding A Board To The Directory	Xome	Forum Management	1	12-28-2007 10:39 AM
Adding Team Icons To Your Board Groups	Informative	Forum Management	0	07-12-2006 02:04 AM
Centering the Banner	imported_Austin	Forum Management	6	03-15-2006 12:10 PM
centering test	Mardat	Forum Management	2	02-04-2006 07:54 PM
Centering Your Signatures	imported_JaGx	Home Base	0	10-29-2005 03:29 AM

11-12-2005	#2 (permalink)
Raiku Senior Member Join Date: Sep 2005 Posts: 1,727	Nice tut, very useful to new skinners.

02-26-2006	#3 (permalink)
Omgkwtf Junior Member Join Date: Feb 2006 Posts: 5	Nice tut. ^_^

03-01-2006	#4 (permalink)
neshro Junior Member Join Date: Mar 2006 Posts: 5	nice

03-04-2006	#5 (permalink)
xiled Junior Member Join Date: Dec 2005 Posts: 5	nice tutorial, im could use this.

04-14-2006	#9 (permalink)
ELLA <3 Junior Member Join Date: Apr 2006 Posts: 5	Helpful, thanksx10

04-14-2006	#10 (permalink)
xxexilexx Junior Member Join Date: Apr 2006 Posts: 5	Thanks i needed this

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)

	All times are GMT. The time now is 10:40 PM.
	Contact Us - preCharge.Net - Archive - Privacy Statement - Top