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.

[triff]

Originally Posted by StGaensler

This is no good feedback. Either you tell me what you don't understand and what I should describe better in my description of the options or I will plonk your post...

Sorry for for coming of like an ass, I've deleted that post now. The description just assumes a lot of knowledge I do not currently have. What I think is lacking from the description are more screenshots with various effects with the code from the tables, then the newbies like me could search those examples to find what code to apply. I've been struggling with the code for 5 hours now and is finally starting to understand a bit more, but I'm still not able to do what I wanted.

Anyway: I'm searching someone to write a description of the features for the users of my vB Code - feel free to contact me, if you think you can do this better than me.

That should certainly be someone who understands this better than me. But maybe he/she should have a newbie look it over to ask all the basic "how do I?" questions that will arise? - could be handled with screenshot & code examples.

If you set the CSS code correct as I explained it earlier this post, you have to apply it to the table: [table="width=100%;css=transp"]

I'm not able to get that to work, probably because the CSS code is not set correct.


I've tried adding the following to in the "Additional CSS Deifintion" box

1. .stg_table_transp {border: none; padding: 2px; background:transparent;}
   
2. /* format vBCode table */
   .stg_table_transp {border: none; padding: 2px; background:transparent;}
   
3. /* ***** format vBCode table ***** */
   .stg_table_transp {border: none; padding: 2px; background:transparent;}
   
4. /* ***** format vBCode table ***** */
   .stg_table_transp { border: none; padding: 2px; background:transparent; }

None of those options made it work.

I've also tried adding
.stg_table_transp {border: none; padding: 2px; background:transparent;}
to the "CSS Classes for the Table" box in the BB Code [table] Settings (Am I supposed to do that?), but no luck.

I'm sure this is all really simple to those who know this stuff better, but I'm clueless. What am I doing wrong?

Sverre.

[StGaensler]

Originally Posted by triff

Sorry for for coming of like an ass, I've deleted that post now. The description just assumes a lot of knowledge I do not currently have. What I think is lacking from the description are more screenshots with various effects with the code from the tables, then the newbies like me could search those examples to find what code to apply. I've been struggling with the code for 5 hours now and is finally starting to understand a bit more, but I'm still not able to do what I wanted.

Thanks. Yes, that's right, I assume basic html and css knowledgment for knowing what rowspan is, or what "em" means. Screenshots are some work, but lets see...

Originally Posted by triff

I've tried adding the following to in the "Additional CSS Deifintion" box

1. .stg_table_transp {border: none; padding: 2px; background:transparent;}
   
2. /* format vBCode table */
   .stg_table_transp {border: none; padding: 2px; background:transparent;}
   
3. /* ***** format vBCode table ***** */
   .stg_table_transp {border: none; padding: 2px; background:transparent;}
   
4. /* ***** format vBCode table ***** */
   .stg_table_transp { border: none; padding: 2px; background:transparent; }

Every line is correct, they only differ in the comments (/* starts a css comment). Leave one of them there.

Originally Posted by triff

I've also tried adding
.stg_table_transp {border: none; padding: 2px; background:transparent;}
to the "CSS Classes for the Table" box in the BB Code [table] Settings (Am I supposed to do that?), but no luck.

You are supposed to write only "transp" here. This list contains all valid CSS classes - above you definded the css code for .stg_table_transp, so here we allow the users to use this class.

Now you can use this class in your vB Code: [table="css=transp"]
In the html source you can see if it works: <table class="stg_table tborder stg_table_transp">

Hope it works now.
Stefan

[evesve]

Originally Posted by triff

EDIT: Also, is it possible to see the coding for the 3rd screenshot?

You mean this?

[table="autonumtitle=number;head"]column 1|coumn 2|column 3
[table]this|is|a
small|table|inside
the|big|table[/table]|hallo|everything is possible
visit Google?|(quote)small quote(/quote)| :p
wanna have a list?

    * list 1
    * list 2
    * list 3

|
align left
align center
align right
|contact me: example@example.net[/table]

Change the () to []

[HaCaoChien]

Hi,

How can I set width for one columm? Code css is use in <tr> tag, can I put it in to <td> tag?

Thanks

[triff]

Originally Posted by StGaensler

Every line is correct, they only differ in the comments (/* starts a css comment). Leave one of them there.

You are supposed to write only "transp" here. This list contains all valid CSS classes - above you definded the css code for .stg_table_transp, so here we allow the users to use this class.

Now you can use this class in your vB Code: [table="css=transp"]
In the html source you can see if it works: <table class="stg_table tborder stg_table_transp">

Hope it works now.
Stefan

/* format vBCode table */
.stg_table_transp {border: none; padding: 2px; background:transparent;}
this is added to the "Additional CSS Definition" box (the top one of the two that is, is that correct? where there are other definitions too, the lower one is empty)

transp
this is added to the "CSS Classes For The Table" box.

Still, with a code like this:
[table="css=transp"]a{br}aa|b[/table]
the table still shows.

Any ideas what I've done wrong?

SGL.

[triff]

Originally Posted by evesve

You mean this?

Yes, something like that. But the aligning doesn't work with that code (something which have had a tendency to break up my table whenever I attempt it). Thanks though.

SGL.

[triff]

Originally Posted by triff

/* format vBCode table */
.stg_table_transp {border: none; padding: 2px; background:transparent;}
this is added to the "Additional CSS Definition" box (the top one of the two that is, is that correct? where there are other definitions too, the lower one is empty)

transp
this is added to the "CSS Classes For The Table" box.

Still, with a code like this:
[table="css=transp"]a{br}aa|b[/table]
the table still shows.

Any ideas what I've done wrong?

SGL.

BUMP!

[anstosser]

Selten so nen geilen Hack gesehen. Damit wird meine Plattform erst zum CMS. Super Fett!!!!
Jetzt kann ich auch endlich Content einbauen, so wie ich das will... juhuuu....

INSTALLED:up:

[Eagle Creek]

Hi!

I continued expirmenting a little bit and I found a strange thing.
Remember the bug I've told you about, the first table isn't 100%? It's only happening when I'm saving the table, using the Quick-Edit feature.
When I use the "old" normal edit page, it works fine.

Can you reproduce?

[triff]

Thanks! I've been headbutting that problem for an hour now until I now avoided the quick-edit! :-)

SGL.