BB Code Enhancements - BB Code [table]

BB Code [table]
by StGaensler

Description
This Hack provides a BB code [table] to add a table to the post
The skin of the table automatically fits the style because the CSS classes of vBulletin are used.

A table is simply made of some lines (will be the rows). The cols are seperated by |. So this will be a table:

[table="head"]head col1|head col2|head col3
row1 col1|row1 col2|row1 col3
row2 col1|row2 col2|row2 col3[/table]

A screenshot of a "ready" table is attached

Usage

1. install attached product XML through product manager (overwrite existing)
2. install at least one language pack in AdminCP -> Languages & Phrases -> Download / Upload Languages -> Import Language XML File
   Important: Select the language you want to import the phrases into, not "(Create New Language)" - this won't work! If you use another version of vBulletin than I use enable "Ignore Language Version" to import the language pack.

Please note: (installing)
Installing this product will: (reverted during uninstall)

1. rename a existing BB code "table" to "table_saved"
2. add a new BB code [table]

If you want to have live sortable columns (JavaScript): Download attached sorttable.js.txt rename it to sorttable.js and place it into the /clientscript/ folder of your vBulletin. Then go to AdminCP -> vBulletin Options -> BB Code [table] Settings -> Enabled Features Of This BB Code and enable sortable
Note: Including the file on the webpages where it is necessary is done by my product. So if sortable is disabled, it won't be included automatically.
If you want to have a icon for the editor you may use this for free: Download this icon and place it in your /images/editor/ folder.

Please note: (usage)

• Of course you can use vB Code and smilies inside the table!
• The first line defines how much columns are in the table. If the other lines have more or less colums they are cut off or filled with   (space)
• You can find a detailed description of the options (please read it before requesting help)
• Empty rows are (should be ) removed.

New features

• define colspan of cells
• small panel in AdminCP
• define CSS class of table and tablerows
• live sorting of table through clicking the head of a column
• defining maximum width of a table

Maybe planned features

• detailed description of the vB Code in misc.php?do=bbcode depending on the features enabled in AdminCP (planned for next beta version)
• define formatting (bold, italic), align (left, right, center) and width of the cols

Suggested but not planned features

• none

Known problems

• Bugfix of version 0.1.1 doesn't work if vBulletin should write template names into the source code

Version history:
0.0.1 - 0.0.5 internal releases for testing purposes (Thanks to Zombie79 from powerforen.de for testing)
0.1 first official release
0.1.1 fixed small bug: if a line ends with eg vbcode quote no new row was generated (should already have been fixed but did not work)
0.1.2 workaround: removed call to function bcmod(), it could also be done another way
0.1.3.x beta version described here (and following) - added admin panel, colpan and css feature
0.1.4 stable version - no significant changes to the last beta (0.1.3.8)
0.1.5.x beta version described here (and following) - added sortable, maxwidth, versioncheck, upgrade message, compatibility to vB 3.6
0.1.6 stable version - two bugfixes to last beta, {br} for posting linebreaks in a tablecell
0.1.7.x stable version - compatibility to vB 3.7 (description) - added tab seperated tables

This hack can be used for free. If you want to make a small donation, just contact me. We will find a way
I don't want this product to be distributed from other sources. Please don't upload it to other vBulletin related boards etc.

[alexsinev]

Originally Posted by StGaensler

Thats not the sense of a table - it exists to format/display tabular content, and not for "making boxes". I consider using <div> or <span> for that.

Stefan, thank you! I tried to use <div>, but unfortunately vBulletin adds lots of extra line breaks before and after my bb-codes.

[kafi]

Hello Stefan,

i didnt figured out how to change default table spacing (which is causing cell borders I guess). It is something around 2px and I want neat 1px spacing borders.
Can you advise? I tried to add custom css as described in this thread but that didnt changed entire table spacing.

Thank you!

[hunguo]

Hello StGaensler,
I can't install it.
The error message is

XML 錯誤: 在第 16 行 not well-formed (invalid token)

What's the problem?

Thank you.

[WarLion]

this mod is asome you rock dude but the best part is the Support you give thats is amazing congrats i use some css only to put a image let me show you

table.stg_table {border:1px #CCCCCC solid;}
table.stg_table thead th {background-image:url(cat_back.gif); height:27px; font-weight:bold; font-size:12px;}
table.stg_table .alt1 {background:#333333;}
table.stg_table .alt2 {background:#373737;}

this is a simple one but i like a lot
this is the image

[eczantrik]

thanks

[StGaensler]

Originally Posted by kafi

i didnt figured out how to change default table spacing (which is causing cell borders I guess).

I hope I understood you in the right way. Use this:
.stg_table {border-collapse:collapse; }
and define the borders for your cells td and th through css.

Originally Posted by hunguo

Hello StGaensler,
I can't install it.
The error message is

I don't really know the problem. Please try it with another browser and / or the english language pack. Also try to download the product file again (if it isn't complete). It seems it could be an encoding problem - but I'm not sure.

@ WarLion
thanks, too.

[Amorpho[US]]

How i can add icon to the reply form?

[TigerWare]

Originally Posted by Amorpho[US]

How i can add icon to the reply form?

You mean adding an icon to the message editor toolbar?

Goto BB Code Manager.
Click edit for the custom bbCode you want an image for.

Look for the following:-

Button Image (Optional)
If you would like this bbcode to appear as a clickable button on the message editor toolbar, enter the URL of an image 21 x 20 pixels in size that will act as the button to insert this bbcode.

Upload an image to your forum area (eg: /forum/myimages/myicon.gif )

In the text box for Button Image in AdminCP you would enter:
./myimages/myicon.gif

Job done.

[alexsinev]

Originally Posted by StGaensler

I hope I understood you in the right way. Use this:
.stg_table {border-collapse:collapse; }
and define the borders for your cells td and th through css.

StGaensler, could you give the full example? I also need to increase the row heights (add extra spaces) in some tables.

Thank you.

[StGaensler]

Thanks TigerWare, thats right. I suggest /forum/images/editor/table.gif as path, because the other editor images are also there.

.stg_table {border-collapse:collapse;}
.stg_table td {padding-top:2px; padding-right:4px; padding-bottom:6px; padding-left:8px; }
.stg_table td {border:4px blue solid; }

That's nothing special for my extension, just pure css. If you could understand german, I had a good site for you - I don't know if there's something compareable in english.

Stefan