3.1.x Extensions Database 3.1 / 3.2 ⇒ [RC] Tables bbCode

[Sniper_E]

What I'm seeing from your first image is that the table in your post is showing the background color of the topic color.

What I'm seeing from your second images is that the table in your memberlist is showing the background color of the body color.

It's like the table header in that style is transparent and will show the color of the background where you put it.
Test that theory out...
That table in the first image is posted in the topic using bg2 - Post a table in the next row and see if it shows the bg1 color.

[Puchahawa]

Looks like your correct.

requested.png

[Sniper_E]

You could probably specify a background color for your table in that style.
But you wouldn't want it to effect all the tables in that style or in other styles.
I'll have to think about that. That style may need it's own dir in the tables/styles/ directory.

Working on expanding the table choices and setting up the Table Guidelines.

tables_guidelines.gif

[Puchahawa]

Nice work on the guide.

[proavia]

I did customize the tables.css to add custom background colors and to make the border transparent

Code: Select all

/* Additional td background colors */
.bg4 {
	background-color: #cd5200; /* dark orange */
}

.bg5 {
	background-color: #ffff00; /* yellow */
}	

.bg6 {
	background-color: #ffcc00 /* dark yellow */
}

/* Added class to make table border transparent */
.bordertable {
	background-color: transparent;
	background-image: url("./images/bordertable.gif");
}

The bordertable.gif is a transparent image.

Then I edited the "table=" bbCode HTML replacement (replaced "forumbg" with "bordertable")

Code: Select all

<div class="bordertable forumbg-table {SIMPLETEXT}" style="width: {NUMBER}%"><div class="inner"><table class="table1">{TEXT}</table></div></div>

Tweaked the Help section a little in tables.php

Code: Select all

		'TABLES_ALERT'			=> 'Table Guidelines:\r\n[table=ww xxxxx]\r\n   ww = width% of table - max width 98%.\r\n   xxxxx = justification/float - null, tleft, tcenter, tright.\r\n[th=yy] yy = width% of each column - all [th=#] need to equal 100%.\r\n[tr=zzz] zzz = row background color - bg1-bg6.',

It's not a perfect solution, but will work for my desired 1x1 table with no border and a specific background color. When using a table with more cells/rows, there are some artifacts left over.

Table_border.jpg

Is there an easy way to get the Help section to show like yours above, but in ABBC3?

[Sniper_E]

Sure... like this?

tables_guidelines_abbc3.gif

styles/all/template/event/posting_editor_buttons_before.html

Code: Select all

<div id="table_info" class="bg2" style="width: 550px;;display: block"><strong>{L_TABLES_GUIDE}{L_COLON}</strong><br />{L_TABLES_GUIDELINES}</div>

language/en/tables.php

Code: Select all

		'TABLES_BBCODE_HELP'	=> 'Tables - Click for Table Guidelines',
		'TABLES_TITLE'			=> 'Tables',
		'TABLES_GUIDE'			=> 'Table Guidelines',
		'TABLES_GUIDELINES'		=> '[table=75 sets the width% of a table. Max width% of a table is 98%.<br />[th=20], [th=30], [th=50] sets the width% of each column. All [th=#%] need to equal 100%.<br />[table=75 tleft] will float the table left of the text. Use null, tleft, tright or tcenter in the table.<br />When using tcenter in the table, use the [center] bbcode around the Table Title for it to line up.',

[proavia]

Awesome!
Thanks!!

[ Post made via Android ]

[Sniper_E]

Show/Hide Button

Change the codes in styles/all/template/event/posting_editor_buttons_before.html to this:

Code: Select all

<div id="table_guide" class="bg2" style="width: 550px;;display: none"><strong>{L_TABLES_GUIDE}{L_COLON}</strong><br />{L_TABLES_GUIDELINES}</div>

Change the top codes in styles/all/template/tablesa_posting_editor_buttons_before.html to this:

Code: Select all

		<script>
			function toggle_table_guide() 
			{
				var x = document.getElementById('table_guide');
				if (x.style.display === 'none') 
				{
					x.style.display = 'block';
					document.getElementById('bbtables').title = '{L_TABLES_BBCODE_HIDE_HELP}';
				}
				else 
				{
					x.style.display = 'none';
					document.getElementById('bbtables').title = '{L_TABLES_BBCODE_HELP}';
				}
			}
		</script>

		<span class="tables">
			<input type="button" class="tablesb-img" name="table_guide" id="bbtables" value="" onclick="toggle_table_guide();" title="{L_TABLES_BBCODE_HELP}" />

Actually update all 3 of the files in that directory with the above codes.

Then update the language/en/tables.php

Code: Select all

		'TABLES_BBCODE_HELP'		=> 'Show Table Guidelines',
		'TABLES_BBCODE_HIDE_HELP'	=> 'Hide Table Guidelines',
		'TABLES_TITLE'				=> 'Tables',
		'TABLES_GUIDE'				=> 'Table Guidelines',
		'TABLES_GUIDELINES'			=> '[table=75 sets the width% of a table. Max width% of a table is 98%.<br />[th=20], [th=30], [th=50] sets the width% of each column. All [th=#%] need to equal 100%.<br />[table=75 tleft] will float the table left of the text. Use null, tleft, tright or tcenter in the table.<br />When using tcenter in the table, use the [center] bbcode around the Table Title for it to line up.<br /><strong>Instructions:</strong><br />Click Preview after inserting your table codes. From your view, change the titles and text to suit your post. Adjust all the [th=width%] to balance out the look of your table and Submit.',

Now you have what I have except for the 10 Columns 10 Rows.

Go for it works well.

[Sniper_E]

Tables Extension Update: Version 2.0.4

First post updated. Added Table Guidelines and a 6th column.

And thanks again for the testing! We're quickly getting close to completion with your input.

[Puchahawa]

V2.0.4 looks good. Actually got the same result in prosilver and aeroblack. Did notice that in your example on the OP you have a shaded border with rounded corners. That doesn't show on either style in my test. Not that it matters but it does look cleaner with it.

One other note, the json file still shows 2.0.3.

[Sniper_E]

One other note, the json file still shows 2.0.3.

I fixed that like real quick! Thanks for pointing it out.

I use CSS Magic by Martin on my site and my bg1 and bg2 have borders and shadow from my magic css. You have to get your own.

You can also see from the snapshot on the first post I'm using Posting Buttons. (My Favorite)

[Puchahawa]

Aah, ok. Didn't realize it was css magic. Thought it was just part of what you created it to be. Love the result of this ext. So what's next on your to do list for it? Nosy people want to know.

[Sniper_E]

So what's next on your to do list for it?

I thought I might expand the table choices and call it done if I find no more issues. 2.0.4 has up to 6 Columns 10 Rows need more choices.

[proavia]

Outstanding!

Now I'm torn between having the border or not having the border. If I keep the border, at least I don't have to edit any files next time you update the extension.

6 columns and 10 rows should be more than I'll ever need.

[proavia]

Tested on PC (W7), Samsung Android tab (6.0.1) and iPhone (iOS9.3.5).

Only issue (well, not really an issue per se) is on the iPhone I needed to click the "table" icon twice to display the guidelines.