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.

[War.Frog]

O.k. figured it out. Wow, it had nothing to do with Excel in this case. I found that this hack (or perhaps vBulletin) handles certain BB codes differently. For instance, if [center] is the primary modifier to a cell (the outside modifier) in addition to other codes, this hack goes haywire even though VISIBLY the code appears to be correct.

For instance:

[ center ] [ b ] TEST [ /b ] [ /center ] causes this hack grief.

Making the alignment tags the innermost modifiers fixes it:

[ b ] [ center ] TEST [ /center ] [ /b ]

I just moved the alignment tag adds to the beginning of the loop - I would suggest it's a problem you may run into too Bruno since it appears vBulletin is doing the rendering funny business.

For Each rngCell In rngRow.Cells
  c = c + 1
  sCell = rngCell.Text
  sFont = rngCell.Font.Name
            
  'If cell text is right aligned, add the [right] tag
  If rngCell.HorizontalAlignment = xlRight Then
     sCell ...
  End If
            
  'If cell text is centered, add the [center] tag
  If rngCell.HorizontalAlignment = xlCenter Then
      sCell = ...
  End If

Fix attached:

[BRotondi]

and some others...

Thanks for the Update! ... and good night, 10:13 PM here ...

Greetings, Bruno

[War.Frog]

Someone earlier in this thread asked what outside-the-box things people are doing with their tables.

Just for "fun" to demonstrate how one can begin creating some very complex tables, I did a 19x25 table using four different 16x16 px squares...just three different shades (black, dark grey, light grey) and a white square.

Using BB Table Maker 2.2.xls, I was able to create this image. I can't imaging trying to do this manually.

[MagicThemeParks]

LOL...that's great War.Frog!

I want to try to do that to make a Mickey Mouse head! :up:

[Ads1980]

HI guys, do you know how I can add a background image so it's behind the table?

should I do a table within a table maybe that works? I'll test and report back

Cheers,
Ads

[Ads1980]

hmm nope that didn't work so I guessed next move was css.... can't get that to work either here's what I have so far:

css in the following area:
css=myclass
Defines the aditional css class of the whole table. Possible values have to be defined in admincp.
The value is prepended by stg_table_ so the resulting css class with above example would be stg_table_myclass
The css code has to be added to "Additional CSS Definitions" of your style (AdminCP -> Styles & Templates -> Style Manager -> (Dropdown) Main CSS -> Additional CSS Definitions)

a quick warning about the style below, I've added a png transparency so the table shows up better on my image, IE doesn't support this! I've tried various ways of getting around this but I've not been successful yet I'll keep you posted

/* ***** table styles ***** */

.stg_table_myclass {
background-image: url(http://www.gamersdomain.net/images/games/forza3/forza3banner_1.jpg);
background-repeat: none;
}

.stg_table_myclass td {
border: none; 
background:transparent; 
text-align: center; 
} 

.stg_table_myclass .alt1 {background-image: url(http://www.gamersdomain.net/images/transpancy.png); background: -ms-filter: “progid:DXImageTransform.Microsoft.Alpha(Opacity=90)”;
filter: alpha(opacity=90);
-khtml-opacity: 0.9;
-moz-opacity: 0.9;
opacity: 0.9;
}

.stg_table_myclass .alt2 {
background-image: url(http://www.gamersdomain.net/images/transpancy.png);
background: -ms-filter: “progid:DXImageTransform.Microsoft.Alpha(Opacity=70)”;
filter: alpha(opacity=70);
-khtml-opacity: 0.7;
-moz-opacity: 0.7;
opacity: 0.7;
}

/* ***** end of table styles ***** */

BB Code [table] Settings: CSS Classes For The Table

myclass

table:

[table="css=myclass;width=100%"]testcol11|testcol21|testcol31
testcol12|testcol22|testcol32
testcol13|testcol23|testcol33
testcol14|testcol24|testcol34[/table]

ok figured it out forgot the . in front of my style doh!

[trotskid]

Originally Posted by trotskid

Hi. If sort a column of numbers with "." or "," (Project column), the values does not sort properly. For example:

30,274,388 will post higher than 101,274,388 (3>1).

How can I fix that with the current code?

Thank you

PHP Code:

[table="head;sort=2d;autonum=1;autonumtitle=Rank;width=65%"]xxxx|Project|Points|P/day|National

test1|30,274,388|68,520|60|3|

test2|101,274,388|50,956|80|2|

test3|20,274,388|21,325|29|6|

[/table] 


Bump

[jmpa]

Now all we need is an html <table> to bb table converter!

[BRotondi]

@trotskid: I think, no one has the time yet to repair this... Often it's more complicated to solve it, than it seems. So it's up to you to get into the code or find a workaround (a leading 0? in background color? ...)

Bruno

[War.Frog]

Originally Posted by jmpa

Now all we need is an html <table> to bb table converter!

I would think you could pseudo pull this off by copying the html table from the web page and pasting it into Excel, then using the content in the converter.