The Arcive of vBulletin Modifications Site. |
|
|
Create your own vBulletin tables
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: Attachment 64666 Code used: HTML Code:
<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> Code:
<table class="tcat" ... Attachment 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.
Attachment 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: HTML Code:
<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> You could want to have a collapsible vBulletin table. It's simple. This is the code you're searching: HTML Code:
<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]"> Code:
<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>
Sorry for my bad english, I doing my best! Best regards, Norman http://www.klayz.com/ http://www.klayz.com/community/ |
|
#2
|
||||
|
||||
|
Thanks..
|
|
#3
|
||||
|
||||
|
nice job triky!
|
|
#4
|
||||
|
||||
|
Glad to help you.
|
|
#5
|
|||
|
|||
|
Hi,
Can you tell me which template I would amend to get the table like you have shown it in the last example? Thanks! |
|
#6
|
||||
|
||||
|
It's on the navbar template.
|
|
#7
|
||||
|
||||
|
Nice article
|
|
#8
|
||||
|
||||
|
thanks for your contribution triky.
|
|
#9
|
||||
|
||||
|
If (and when) I can, I do it.
|
|
#10
|
|||
|
|||
|
Thanks for useful clause.
|
![]() |
|
|