PDA

View Full Version : Create your own vBulletin tables


Triky
24 May 2007, 15:51
Hi, this simple tutorial will tech you how to create a table(s) in your vBulletin forum. Step by step you will learn how to use tables, how to edit them and how to adjust them!
Ok, first question: what's a vBulletin table? You must know that vBulletin is mostly composed by tables. A vBulletin table could be this, for example:


64666

Code used:

<table class="tborder" cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]" border="0" width="100%" align="center">
<tr>
<td class="alt1" width="100%">
<div class="smallfont">Hi, this is a vBulletin table. Table class: <strong>tborder</strong>. Td class: <strong>alt1</strong>. Border: 0. Width: 100%. Align: center.</div>
</td>
</tr>
</table> And now, we can try to change the table class. As you can see, now it's tborder. Let's change it to tcat!

<table class="tcat" ... Result:


64667

Using our vBulletin CSS specifications, we can change the style of our new or existing tables.
Now we'll change the Td class, using the tborder table class and the tcat table class.
Table class: tborder. Td class: alt1:
64666
Table class: tcat. Td class: alt2:
64668More usefull question, now, could be: how do I do a table like the follow?


64669

Simple! Using a Tr. In above examples, we was using just one Tr. Using two Tr, we can do a table like that.

Here the code I've used:

<table class="tborder" cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]" border="0" width="100%" align="center">
<tr>

<td class="tcat" width="100%">
<div style="text-align: center;">
New Table Title
</div>
</td>

</tr>

<tr>

<td class="alt1" width="100%">
<div class="smallfont">
This is a vBulletin table. Table class: <strong>tborder</strong>. 1st Td class: <strong>tcat</strong>. 1st Td text align: <strong>center</strong>. Second Td class: <strong>alt1</strong>. Border: 0. Width: 100%. Align: center.
</div>
</td>

</tr>
</table> Table class: tborder. 1st Td class: tcat. 1st Td text align: center. Second Td class: alt1. Border: 0. Width: 100%. Align: center.

You could want to have a collapsible vBulletin table. It's simple.
This is the code you're searching:

<a style="float:$stylevar[right]" href="#top" onclick="return toggle_collapse('my_table')"><img id="collapseimg_my_table" src="$stylevar[imgdir_button]/collapse_tcat$vbcollapse[collapseimg_my_table].gif" alt="" border="0" /></a>

<tbody id="collapseobj_my_table" style="$vbcollapse[collapseobj_my_table]"> "Where should I put it?" In your first table Td, usually. Using codes we have used as far as now..

<table class="tborder" cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]" border="0" width="100%" align="center">
<tr>

<td class="tcat" width="100%">
<a style="float:$stylevar[right]" href="#top" onclick="return toggle_collapse('my_table')"><img id="collapseimg_my_table" src="$stylevar[imgdir_button]/collapse_tcat$vbcollapse[collapseimg_my_table].gif" alt="" border="0" /></a>
<div style="text-align: center;">
New Table Title
</div>
</td>
<tbody id="collapseobj_my_table" style="$vbcollapse[collapseobj_my_table]">
</tr>

<tr>

<td class="alt1" width="100%">
<div class="smallfont">
[snip]
</div>
</td>

</tr>
</table> Result:
64670
64671With tables you can do what you want! vBulletin is a big main table, remember. I hope you've appreciated this little tutorial. Let me know in this thread if you have more and specific questions.


Sorry for my bad english, I doing my best!


Best regards,
Norman

http://www.klayz.com/
http://www.klayz.com/community/

kaptanblack
31 May 2007, 21:16
Thanks.. ;)

Antivirus
01 Jun 2007, 00:05
nice job triky!

Triky
06 Jun 2007, 10:26
Glad to help you. :)

Keesa
17 Oct 2007, 20:09
Hi,

Can you tell me which template I would amend to get the table like you have shown it in the last example?

Thanks!

Triky
18 Oct 2007, 08:12
It's on the navbar template. :)

kiril_cvetkov
12 Dec 2007, 16:28
Nice article ;)

valdet
12 Dec 2007, 17:00
thanks for your contribution triky.

Triky
12 Dec 2007, 17:06
If (and when) I can, I do it. :p

Martell
13 Dec 2007, 01:20
Thanks for useful clause.

Brandon Sheley
13 Dec 2007, 01:42
good tut :)

Snake
18 Jan 2008, 20:16
What a great and useful article! Thank you very much. :)

AUtigers350z
22 Feb 2008, 05:05
Thanks for the write up! Great job :D

Jase2
26 Feb 2008, 10:39
Thanks, great article!

Regards Jason :)

Triky
26 Feb 2008, 12:29
Thank you. ;)

Demon Child
26 Mar 2008, 21:27
i know this is a old topic.. but can i put this table code inside of a forum title/description block... i want a fixed sized gradient that won't repeat all over the forum.. i just want it in that area

Triky
30 Mar 2008, 18:42
Hi Demon Child, can you explain your request with an image, please?

sdavis2702
12 Apr 2008, 13:35
Awesome.... saved to my favorites. My imagination is flowing now :)

mmoore5553
08 Sep 2008, 12:31
i know this is older but is it possible to make a table and have it cut in halfs ..i can put a heading on one ..free tutorials and on the second new tutorials and then post pictures and comments about them in there and link it ?

mmoore5553
24 Nov 2008, 00:38
thanks but i finally figured it out