A GUIDE ᵇʸ ᴱˣᴵᵗ

[Exit]

<sub>I've been wanting to make a guide for a while now that kind of helps explain some of the weird bbcode tricks I make use of. I've just never been really good at organizing my thoughts into something that others can read. Things come to me in bits and pieces and sometimes out of order and I can never figure out where to place them. So, I've decided I'm just going to do it and hopefully whatever I end up stitching together will be to someone's benefit. Maybe someone else who is better at organization can come through later on and make a cleaner, more clear version of this.

This isn't going to be an in-depth look into how each element of the code I'm using works. This is going to assume that either you already understand or you do not and just want the pieces that you can put together yourself like a Lego set. If you want to better understand what's in use here, [SUP]ERSTARS – Advanced BBCode Hacks 1 and STRONG AND S[TABLE] – Advanced BBCode Hacks 2 are two guides by the amazing @Roach that perfectly explain the mechanics of our weird bbcode system and how to make it your own. They also contain two specific bbcode techniques that I use in excess.

I'd like to point out that I don't know anything about actual coding. It might also be important to consider that some of this may become irrelevant when and if Mahz pushes through changes to our bbcode. I can't guarantee that taking the time to figure this out for yourself won't ultimately be wasted effort. That being said, no one's going to stop me from wasting my own time, so...

I will be making two guides (you can f3 to the number):

01. Text Boxes ^broken
02. Tabs ^broken

edit:082925.11:45</sub>

so the tab switching lasted all of 20 days :) i'll have to do further testing to see how recent changes may be affecting the rest of the code i use.

________________________________________________________________________________________________________

_{edit:043026.11:13}

what I didn't realize is that text boxes also broke for similar reasons and at the same time that tab switching broke. neither are possible with the techniques described below.

________________________________________________________________________________________________________

_{Please keep in mind that nothing I do here will be mobile friendly.}

[Exit]

____________________

...................▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ _______________________________________________________.......... . . . 01._______________ A TEXT BOX and how to do it. █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ ..........▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇

________________________

___________ . . contents

PART ONE PART TWO PART THREE PART FOUR PART FIVE PART SIX

Building your text box. Extending your text box. Determining the width of your text box. Positioning your text box. Customizing your text box. Doing more with your text box.

PART ONE

Building your text box.

_{We'll start with a table with borders active so we can see what we're doing. You can use the following code:}
[table=bordered][row][/row][row][cell][/cell][cell][/cell][cell][/cell][/row][/table]

<sub>Which should give you the following:


This is a pretty basic table with a top row that has no cells. Each cell, including the empty top row, has a job:</sub>

0 _{This row holds the top wall of your text box:}

1 This cell holds the left wall of your text box.	2 This cell holds the body of your text.	3 This cell holds the right wall of your text box.

_{Next, we introduce a string of code to our top row that defines the position, style and color of the top wall of our text box:}

[sub][h1][sub][color=black][sub][sub][color=2e2c2c].[sub][sub][sub][sub][sub][sub][sub][sub][sub]..................[/sub][/sub][/sub][/sub][/sub][/sub][/sub][/sub][/sub][/color][sup][b]▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇[/b][/sup][/sub][/sub][/color][/sub][/h1][/sub]
_________________{code goes here}
____________________↓
[table=bordered][row] [/row][row][cell][/cell][cell][/cell][cell][/cell][/row][/table]

_{When combined and posted, your table should look like this:}

_{...................^{▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇}}

_{Notice that the black bar, which is in the top row, is intersecting the cells in the row below it which is exactly what we want. Next, we introduce code into the left and far right cell that defines the height, color and style of the walls of our text box:}

[sup][b][color=black][sub][h2][sup]█[/sup]
[sub]█[/sub][/h2][/sub][sub][h2][sup]█[/sup]
[sub]█[/sub][/h2][/sub][sub][h2][sup]█[/sup]
[sub]█[/sub][/h2][/sub][sub][h2][sup]█[/sup]
[sub]█[/sub][/h2][/sub][sub][h2][sup]█[/sup]
[sub]█[/sub][/h2][/sub][sub][h2][sup]█[/sup]
[sub]█[/sub][/h2][/sub][sub][h2][sup]█[/sup]
[sub]█[/sub][/h2][/sub][sub][h2][sup]█[/sup]
[sub]█[/sub][/h2][/sub][sub][h2][sup]█[/sup]
[sub]█[/sub][/h2][/sub][sub][h2][sup]█[/sup]
[sub]█[/sub][/h2][/sub][/color][/b][/sup]
_____________________________________{code goes here}______________________{and here}
________________________________________↓___________________________↓
[table=bordered][row]TOP[/row][row][cell] [/cell][cell][/cell][cell] [/cell][/row][/table]

_{Your table should now look like this:}

_{...................^{▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇}}

█ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █		█ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █

_{Right now, the walls of our text box is defaulting to the formatting of the table we're building it on top of. The walls are aligned left and because the middle cell has nothing in it, the table is giving priority to the outside cells resulting in the text box's odd shape. We can fix that by adding in some text in the center box.}

__________________________________________________________{text goes here}
____________________________________________________________↓
[table=bordered][row]TOP[/row][row][cell]LEFT[/cell][cell] [/cell][cell]RIGHT[/cell][/row][/table]

_{With text, your table should adjust and now look something like this:}

_{...................^{▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇}}

█ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █	Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eget aliquet nibh praesent tristique magna. Cursus vitae congue mauris rhoncus aenean vel. Integer vitae justo eget magna fermentum iaculis eu non. Nibh sit amet commodo nulla facilisi nullam. Iaculis urna id volutpat lacus laoreet non curabitur gravida. Viverra aliquet eget sit amet tellus. Egestas congue quisque egestas diam in arcu. Velit scelerisque in dictum non. Diam sollicitudin tempor id eu nisl nunc mi ipsum faucibus. Eu feugiat pretium nibh ipsum.	█ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █

_{You'll notice that our text is flush with the top bar. You can give it some space by inputing an invisible character above your first line of text. Something as simple as this will do:}
[color=2e2c2c].[/color]

_{Giving you this:}

_{...................^{▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇}}

█ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █	. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eget aliquet nibh praesent tristique magna. Cursus vitae congue mauris rhoncus aenean vel. Integer vitae justo eget magna fermentum iaculis eu non. Nibh sit amet commodo nulla facilisi nullam. Iaculis urna id volutpat lacus laoreet non curabitur gravida. Viverra aliquet eget sit amet tellus. Egestas congue quisque egestas diam in arcu. Velit scelerisque in dictum non. Diam sollicitudin tempor id eu nisl nunc mi ipsum faucibus. Eu feugiat pretium nibh ipsum.	█ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █

_{So now we have three sides of our box and the text inside it. To get our bottom border in place, we'll be using identical code to the top border with one minor difference: Instead of [sub] tags, this code uses more [sup] tags. This string is placed right at the end of the original table code.}

[sup][h1][sup][color=black][sup][sup][color=2e2c2c][sub][sub][sub][sub][sub]..........[/sub][/sub][/sub][/sub][/sub][/color][sub][b]▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇[/b][/sub][/sup][/sup][/color][/sup][/h1][/sup]

________________________________________________________________________________________________{code goes here}
____________________________________________________________________________________________________↓
[table=bordered][row]TOP[/row][row][cell]LEFT[/cell][cell]TEXT[/cell][cell]RIGHT[/cell][/row][/table]

_{Your table should now look like a box.}

_{...................^{▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇}}

█ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █	. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eget aliquet nibh praesent tristique magna. Cursus vitae congue mauris rhoncus aenean vel. Integer vitae justo eget magna fermentum iaculis eu non. Nibh sit amet commodo nulla facilisi nullam. Iaculis urna id volutpat lacus laoreet non curabitur gravida. Viverra aliquet eget sit amet tellus. Egestas congue quisque egestas diam in arcu. Velit scelerisque in dictum non. Diam sollicitudin tempor id eu nisl nunc mi ipsum faucibus. Eu feugiat pretium nibh ipsum.	█ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █

^{_{..........▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇}}

_{Simply remove the border from the table by deleting "=bordered" from the table code, and you'll get your finished text box.}
________remove
_________↓
[table=bordered][row]TOP[/row][row][cell]LEFT[/cell][cell]TEXT[/cell][cell]RIGHT[/cell][/row][/table]BOTTOM

_{...................^{▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇}}

█ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █	. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eget aliquet nibh praesent tristique magna. Cursus vitae congue mauris rhoncus aenean vel. Integer vitae justo eget magna fermentum iaculis eu non. Nibh sit amet commodo nulla facilisi nullam. Iaculis urna id volutpat lacus laoreet non curabitur gravida. Viverra aliquet eget sit amet tellus. Egestas congue quisque egestas diam in arcu. Velit scelerisque in dictum non. Diam sollicitudin tempor id eu nisl nunc mi ipsum faucibus. Eu feugiat pretium nibh ipsum.	█ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █

^{_{..........▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇}}

PART TWO

Extending your text box.

_{So now we have a text box. Lets say you want to add more text:}

_{...................^{▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇}}

█ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █	. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eget aliquet nibh praesent tristique magna. Cursus vitae congue mauris rhoncus aenean vel. Integer vitae justo eget magna fermentum iaculis eu non. Nibh sit amet commodo nulla facilisi nullam. Iaculis urna id volutpat lacus laoreet non curabitur gravida. Viverra aliquet eget sit amet tellus. Egestas congue quisque egestas diam in arcu. Velit scelerisque in dictum non. Diam sollicitudin tempor id eu nisl nunc mi ipsum faucibus. Eu feugiat pretium nibh ipsum. Orci nulla pellentesque dignissim enim sit amet venenatis urna cursus. Ac turpis egestas maecenas pharetra. Nisl suscipit adipiscing bibendum est. Amet justo donec enim diam vulputate ut pharetra sit amet. Enim neque volutpat ac tincidunt. Libero volutpat sed cras ornare. Neque aliquam vestibulum morbi blandit cursus risus at ultrices mi. Elementum curabitur vitae nunc sed velit dignissim sodales. Ut tortor pretium viverra suspendisse potenti nullam ac tortor. Sed felis eget velit aliquet sagittis id consectetur purus ut. Semper viverra nam libero justo laoreet. Tristique senectus et netus et. Varius vel pharetra vel turpis. Nisl nisi scelerisque eu ultrices vitae auctor eu augue ut. Lacus sed turpis tincidunt id aliquet risus feugiat in. Sed viverra ipsum nunc aliquet bibendum enim facilisis gravida neque. Nisi porta lorem mollis aliquam ut porttitor leo a diam. Senectus et netus et malesuada fames ac turpis egestas. Id leo in vitae turpis. Eget gravida cum sociis natoque penatibus et.	█ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █

^{_{..........▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇}}

<sub>We are now into the more tedious aspects of using text boxes. Because the walls of our text box are independent of the text in the middle cell, the walls will not automatically adjust to the length of the body of your post. These will have to be manually adjusted. You'll learn pretty quickly that the preview button is your friend.

Changing the code is simple once you get the hang of out, but very confusing the first time. Here is the code again for one of our walls:</sub>

[sup][b][color=black][sub][h2][sup]█[/sup] [sub]█[/sub][/h2][/sub][sub][h2][sup]█[/sup] [sub]█[/sub][/h2][/sub][sub][h2][sup]█[/sup] [sub]█[/sub][/h2][/sub][sub][h2][sup]█[/sup] [sub]█[/sub][/h2][/sub][sub][h2][sup]█[/sup] [sub]█[/sub][/h2][/sub][sub][h2][sup]█[/sup] [sub]█[/sub][/h2][/sub][sub][h2][sup]█[/sup] [sub]█[/sub][/h2][/sub][sub][h2][sup]█[/sup] [sub]█[/sub][/h2][/sub][sub][h2][sup]█[/sup] [sub]█[/sub][/h2][/sub][sub][h2][sup]█[/sup] [sub]█[/sub][/h2][/sub][/color][/b][/sup] _________________________________________

. . This string: [sub][h2][sup]█[/sup] [sub]█[/sub][/h2][/sub] represents a single vertical "█", or more specifically two overlapped. This entire string must either be added or removed to shorten or extend the walls.

_{So, if we add that string to the border code near the end, right before the last [/color] tag like so:}

[sup][b][color=black][sub][h2][sup]█[/sup]
[sub]█[/sub][/h2][/sub][sub][h2][sup]█[/sup]
[sub]█[/sub][/h2][/sub][sub][h2][sup]█[/sup]
[sub]█[/sub][/h2][/sub][sub][h2][sup]█[/sup]
[sub]█[/sub][/h2][/sub][sub][h2][sup]█[/sup]
[sub]█[/sub][/h2][/sub][sub][h2][sup]█[/sup]
[sub]█[/sub][/h2][/sub][sub][h2][sup]█[/sup]
[sub]█[/sub][/h2][/sub][sub][h2][sup]█[/sup]
[sub]█[/sub][/h2][/sub][sub][h2][sup]█[/sup]
[sub]█[/sub][/h2][/sub][sub][h2][sup]█[/sup]
[sub]█[/sub][/h2][/sub][sub][h2][sup]█[/sup]
[sub]█[/sub][/h2][/sub][sub][h2][sup]█[/sup]
[sub]█[/sub][/h2][/sub][sub][h2][sup]█[/sup]
[sub]█[/sub][/h2][/sub][sub][h2][sup]█[/sup]
[sub]█[/sub][/h2][/sub][/color][/b][/sup]

_{You get this:}

_{...................^{▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇}}

█ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █	. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eget aliquet nibh praesent tristique magna. Cursus vitae congue mauris rhoncus aenean vel. Integer vitae justo eget magna fermentum iaculis eu non. Nibh sit amet commodo nulla facilisi nullam. Iaculis urna id volutpat lacus laoreet non curabitur gravida. Viverra aliquet eget sit amet tellus. Egestas congue quisque egestas diam in arcu. Velit scelerisque in dictum non. Diam sollicitudin tempor id eu nisl nunc mi ipsum faucibus. Eu feugiat pretium nibh ipsum. Orci nulla pellentesque dignissim enim sit amet venenatis urna cursus. Ac turpis egestas maecenas pharetra. Nisl suscipit adipiscing bibendum est. Amet justo donec enim diam vulputate ut pharetra sit amet. Enim neque volutpat ac tincidunt. Libero volutpat sed cras ornare. Neque aliquam vestibulum morbi blandit cursus risus at ultrices mi. Elementum curabitur vitae nunc sed velit dignissim sodales. Ut tortor pretium viverra suspendisse potenti nullam ac tortor. Sed felis eget velit aliquet sagittis id consectetur purus ut. Semper viverra nam libero justo laoreet. Tristique senectus et netus et. Varius vel pharetra vel turpis. Nisl nisi scelerisque eu ultrices vitae auctor eu augue ut. Lacus sed turpis tincidunt id aliquet risus feugiat in. Sed viverra ipsum nunc aliquet bibendum enim facilisis gravida neque. Nisi porta lorem mollis aliquam ut porttitor leo a diam. Senectus et netus et malesuada fames ac turpis egestas. Id leo in vitae turpis. Eget gravida cum sociis natoque penatibus et.	█ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █

^{_{..........▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇}}

_{Now, it's a simple matter of copying and pasting all the code in one cell into the opposite cell. When done correctly, you'll have a successfully extended text box.}

_{...................^{▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇}}

█ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █	. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eget aliquet nibh praesent tristique magna. Cursus vitae congue mauris rhoncus aenean vel. Integer vitae justo eget magna fermentum iaculis eu non. Nibh sit amet commodo nulla facilisi nullam. Iaculis urna id volutpat lacus laoreet non curabitur gravida. Viverra aliquet eget sit amet tellus. Egestas congue quisque egestas diam in arcu. Velit scelerisque in dictum non. Diam sollicitudin tempor id eu nisl nunc mi ipsum faucibus. Eu feugiat pretium nibh ipsum. Orci nulla pellentesque dignissim enim sit amet venenatis urna cursus. Ac turpis egestas maecenas pharetra. Nisl suscipit adipiscing bibendum est. Amet justo donec enim diam vulputate ut pharetra sit amet. Enim neque volutpat ac tincidunt. Libero volutpat sed cras ornare. Neque aliquam vestibulum morbi blandit cursus risus at ultrices mi. Elementum curabitur vitae nunc sed velit dignissim sodales. Ut tortor pretium viverra suspendisse potenti nullam ac tortor. Sed felis eget velit aliquet sagittis id consectetur purus ut. Semper viverra nam libero justo laoreet. Tristique senectus et netus et. Varius vel pharetra vel turpis. Nisl nisi scelerisque eu ultrices vitae auctor eu augue ut. Lacus sed turpis tincidunt id aliquet risus feugiat in. Sed viverra ipsum nunc aliquet bibendum enim facilisis gravida neque. Nisi porta lorem mollis aliquam ut porttitor leo a diam. Senectus et netus et malesuada fames ac turpis egestas. Id leo in vitae turpis. Eget gravida cum sociis natoque penatibus et.	█ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █

^{_{..........▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇}}

PART THREE

Determining the width of your text box.

<sub>Maybe you want a text box of a certain width? There are a few ways to do this, but the method I'm sharing allows for the most freedom when it comes to adding elements around your box and is the most flexible with adjustments. You will need a new table with which we will nest our already completed text box within.

Here is our code so far:</sub>

[table][row][sub][h1][sub][color=black][sub][sub][color=2e2c2c].[sub][sub][sub][sub][sub][sub][sub][sub][sub]..................[/sub][/sub][/sub][/sub][/sub][/sub][/sub][/sub][/sub][/color][sup][b]▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇[/b][/sup][/sub][/sub][/color][/sub][/h1][/sub][/row][row][cell][sup][b][color=black][sub][h2][sup]█[/sup]
[sub]█[/sub][/h2][/sub][sub][h2][sup]█[/sup]
[sub]█[/sub][/h2][/sub][sub][h2][sup]█[/sup]
[sub]█[/sub][/h2][/sub][sub][h2][sup]█[/sup]
[sub]█[/sub][/h2][/sub][sub][h2][sup]█[/sup]
[sub]█[/sub][/h2][/sub][sub][h2][sup]█[/sup]
[sub]█[/sub][/h2][/sub][sub][h2][sup]█[/sup]
[sub]█[/sub][/h2][/sub][sub][h2][sup]█[/sup]
[sub]█[/sub][/h2][/sub][sub][h2][sup]█[/sup]
[sub]█[/sub][/h2][/sub][sub][h2][sup]█[/sup]
[sub]█[/sub][/h2][/sub][sub][h2][sup]█[/sup]
[sub]█[/sub][/h2][/sub][sub][h2][sup]█[/sup]
[sub]█[/sub][/h2][/sub][sub][h2][sup]█[/sup]
[sub]█[/sub][/h2][/sub][sub][h2][sup]█[/sup]
[sub]█[/sub][/h2][/sub][/color][/b][/sup][/cell][cell][color=2e2c2c].[/color]
[color=gray]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eget aliquet nibh praesent tristique magna. Cursus vitae congue mauris rhoncus aenean vel. Integer vitae justo eget magna fermentum iaculis eu non. Nibh sit amet commodo nulla facilisi nullam. Iaculis urna id volutpat lacus laoreet non curabitur gravida. Viverra aliquet eget sit amet tellus. Egestas congue quisque egestas diam in arcu. Velit scelerisque in dictum non. Diam sollicitudin tempor id eu nisl nunc mi ipsum faucibus. Eu feugiat pretium nibh ipsum.

Orci nulla pellentesque dignissim enim sit amet venenatis urna cursus. Ac turpis egestas maecenas pharetra. Nisl suscipit adipiscing bibendum est. Amet justo donec enim diam vulputate ut pharetra sit amet. Enim neque volutpat ac tincidunt. Libero volutpat sed cras ornare. Neque aliquam vestibulum morbi blandit cursus risus at ultrices mi. Elementum curabitur vitae nunc sed velit dignissim sodales. Ut tortor pretium viverra suspendisse potenti nullam ac tortor. Sed felis eget velit aliquet sagittis id consectetur purus ut. Semper viverra nam libero justo laoreet. Tristique senectus et netus et. Varius vel pharetra vel turpis. Nisl nisi scelerisque eu ultrices vitae auctor eu augue ut. Lacus sed turpis tincidunt id aliquet risus feugiat in. Sed viverra ipsum nunc aliquet bibendum enim facilisis gravida neque. Nisi porta lorem mollis aliquam ut porttitor leo a diam. Senectus et netus et malesuada fames ac turpis egestas. Id leo in vitae turpis. Eget gravida cum sociis natoque penatibus et.[/color][/cell][cell][sup][b][color=black][sub][h2][sup]█[/sup]
[sub]█[/sub][/h2][/sub][sub][h2][sup]█[/sup]
[sub]█[/sub][/h2][/sub][sub][h2][sup]█[/sup]
[sub]█[/sub][/h2][/sub][sub][h2][sup]█[/sup]
[sub]█[/sub][/h2][/sub][sub][h2][sup]█[/sup]
[sub]█[/sub][/h2][/sub][sub][h2][sup]█[/sup]
[sub]█[/sub][/h2][/sub][sub][h2][sup]█[/sup]
[sub]█[/sub][/h2][/sub][sub][h2][sup]█[/sup]
[sub]█[/sub][/h2][/sub][sub][h2][sup]█[/sup]
[sub]█[/sub][/h2][/sub][sub][h2][sup]█[/sup]
[sub]█[/sub][/h2][/sub][sub][h2][sup]█[/sup]
[sub]█[/sub][/h2][/sub][sub][h2][sup]█[/sup]
[sub]█[/sub][/h2][/sub][sub][h2][sup]█[/sup]
[sub]█[/sub][/h2][/sub][sub][h2][sup]█[/sup]
[sub]█[/sub][/h2][/sub][/color][/b][/sup][/cell][/row][/table][sup][h1][sup][color=black][sup][sup][color=2e2c2c][sub][sub][sub][sub][sub]..........[/sub][/sub][/sub][/sub][/sub][/color][sub][b]▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇[/b][/sub][/sup][/sup][/color][/sup][/h1][/sup]

_________________________{we'll put all of that here}
_______________________________↓
[table][row][cell][/cell][cell] [/cell][/row][/table]

_{I've bordered mine so it's easy to see what we're doing. This is the result below.}

...................▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ . Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eget aliquet nibh praesent tristique magna. Cursus vitae congue mauris rhoncus aenean vel. Integer vitae justo eget magna fermentum iaculis eu non. Nibh sit amet commodo nulla facilisi nullam. Iaculis urna id volutpat lacus laoreet non curabitur gravida. Viverra aliquet eget sit amet tellus. Egestas congue quisque egestas diam in arcu. Velit scelerisque in dictum non. Diam sollicitudin tempor id eu nisl nunc mi ipsum faucibus. Eu feugiat pretium nibh ipsum. Orci nulla pellentesque dignissim enim sit amet venenatis urna cursus. Ac turpis egestas maecenas pharetra. Nisl suscipit adipiscing bibendum est. Amet justo donec enim diam vulputate ut pharetra sit amet. Enim neque volutpat ac tincidunt. Libero volutpat sed cras ornare. Neque aliquam vestibulum morbi blandit cursus risus at ultrices mi. Elementum curabitur vitae nunc sed velit dignissim sodales. Ut tortor pretium viverra suspendisse potenti nullam ac tortor. Sed felis eget velit aliquet sagittis id consectetur purus ut. Semper viverra nam libero justo laoreet. Tristique senectus et netus et. Varius vel pharetra vel turpis. Nisl nisi scelerisque eu ultrices vitae auctor eu augue ut. Lacus sed turpis tincidunt id aliquet risus feugiat in. Sed viverra ipsum nunc aliquet bibendum enim facilisis gravida neque. Nisi porta lorem mollis aliquam ut porttitor leo a diam. Senectus et netus et malesuada fames ac turpis egestas. Id leo in vitae turpis. Eget gravida cum sociis natoque penatibus et. █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ ..........▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇

_{Now lets remove the same amount of 'block' characters from the top and bottom borders.}

...................▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ . Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eget aliquet nibh praesent tristique magna. Cursus vitae congue mauris rhoncus aenean vel. Integer vitae justo eget magna fermentum iaculis eu non. Nibh sit amet commodo nulla facilisi nullam. Iaculis urna id volutpat lacus laoreet non curabitur gravida. Viverra aliquet eget sit amet tellus. Egestas congue quisque egestas diam in arcu. Velit scelerisque in dictum non. Diam sollicitudin tempor id eu nisl nunc mi ipsum faucibus. Eu feugiat pretium nibh ipsum. Orci nulla pellentesque dignissim enim sit amet venenatis urna cursus. Ac turpis egestas maecenas pharetra. Nisl suscipit adipiscing bibendum est. Amet justo donec enim diam vulputate ut pharetra sit amet. Enim neque volutpat ac tincidunt. Libero volutpat sed cras ornare. Neque aliquam vestibulum morbi blandit cursus risus at ultrices mi. Elementum curabitur vitae nunc sed velit dignissim sodales. Ut tortor pretium viverra suspendisse potenti nullam ac tortor. Sed felis eget velit aliquet sagittis id consectetur purus ut. Semper viverra nam libero justo laoreet. Tristique senectus et netus et. Varius vel pharetra vel turpis. Nisl nisi scelerisque eu ultrices vitae auctor eu augue ut. Lacus sed turpis tincidunt id aliquet risus feugiat in. Sed viverra ipsum nunc aliquet bibendum enim facilisis gravida neque. Nisi porta lorem mollis aliquam ut porttitor leo a diam. Senectus et netus et malesuada fames ac turpis egestas. Id leo in vitae turpis. Eget gravida cum sociis natoque penatibus et. █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ ..........▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇

_{There should now be a noticeable gap between the top and bottom borders and the right wall of the text box. We fix this by adding 'weight' to the left cell of the outermost table in the form of a solid line: "________". Normally we would put this within a color tag that makes it invisible. I will be leaving it visible for this example.}

_______________{line goes here}
__________________↓
[table][row][cell] [/cell][cell][TEXT BOX][/cell][/row][/table]

______________________________________________ This solid line is maintaining the width of our text box as determined by the length of the text box's top and bottom borders.

...................▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ . Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eget aliquet nibh praesent tristique magna. Cursus vitae congue mauris rhoncus aenean vel. Integer vitae justo eget magna fermentum iaculis eu non. Nibh sit amet commodo nulla facilisi nullam. Iaculis urna id volutpat lacus laoreet non curabitur gravida. Viverra aliquet eget sit amet tellus. Egestas congue quisque egestas diam in arcu. Velit scelerisque in dictum non. Diam sollicitudin tempor id eu nisl nunc mi ipsum faucibus. Eu feugiat pretium nibh ipsum. Orci nulla pellentesque dignissim enim sit amet venenatis urna cursus. Ac turpis egestas maecenas pharetra. Nisl suscipit adipiscing bibendum est. Amet justo donec enim diam vulputate ut pharetra sit amet. Enim neque volutpat ac tincidunt. Libero volutpat sed cras ornare. Neque aliquam vestibulum morbi blandit cursus risus at ultrices mi. Elementum curabitur vitae nunc sed velit dignissim sodales. Ut tortor pretium viverra suspendisse potenti nullam ac tortor. Sed felis eget velit aliquet sagittis id consectetur purus ut. Semper viverra nam libero justo laoreet. Tristique senectus et netus et. Varius vel pharetra vel turpis. Nisl nisi scelerisque eu ultrices vitae auctor eu augue ut. Lacus sed turpis tincidunt id aliquet risus feugiat in. Sed viverra ipsum nunc aliquet bibendum enim facilisis gravida neque. Nisi porta lorem mollis aliquam ut porttitor leo a diam. Senectus et netus et malesuada fames ac turpis egestas. Id leo in vitae turpis. Eget gravida cum sociis natoque penatibus et. █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ ..........▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇

_{Here I've removed the table border as the border itself will have an affect on the alignment of our text box walls.}

______________________________________________

...................▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ . Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eget aliquet nibh praesent tristique magna. Cursus vitae congue mauris rhoncus aenean vel. Integer vitae justo eget magna fermentum iaculis eu non. Nibh sit amet commodo nulla facilisi nullam. Iaculis urna id volutpat lacus laoreet non curabitur gravida. Viverra aliquet eget sit amet tellus. Egestas congue quisque egestas diam in arcu. Velit scelerisque in dictum non. Diam sollicitudin tempor id eu nisl nunc mi ipsum faucibus. Eu feugiat pretium nibh ipsum. Orci nulla pellentesque dignissim enim sit amet venenatis urna cursus. Ac turpis egestas maecenas pharetra. Nisl suscipit adipiscing bibendum est. Amet justo donec enim diam vulputate ut pharetra sit amet. Enim neque volutpat ac tincidunt. Libero volutpat sed cras ornare. Neque aliquam vestibulum morbi blandit cursus risus at ultrices mi. Elementum curabitur vitae nunc sed velit dignissim sodales. Ut tortor pretium viverra suspendisse potenti nullam ac tortor. Sed felis eget velit aliquet sagittis id consectetur purus ut. Semper viverra nam libero justo laoreet. Tristique senectus et netus et. Varius vel pharetra vel turpis. Nisl nisi scelerisque eu ultrices vitae auctor eu augue ut. Lacus sed turpis tincidunt id aliquet risus feugiat in. Sed viverra ipsum nunc aliquet bibendum enim facilisis gravida neque. Nisi porta lorem mollis aliquam ut porttitor leo a diam. Senectus et netus et malesuada fames ac turpis egestas. Id leo in vitae turpis. Eget gravida cum sociis natoque penatibus et. █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ ..........▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇

_{You'll notice that the left and right walls will have to be extended again to compensate for the body of text stretching as the space it is in shrinks in size. We've already gone over how to do that so let's go ahead and fix that now. I'll also hide the line we placed in the empty cell.}

______________________________________________

...................▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ . Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eget aliquet nibh praesent tristique magna. Cursus vitae congue mauris rhoncus aenean vel. Integer vitae justo eget magna fermentum iaculis eu non. Nibh sit amet commodo nulla facilisi nullam. Iaculis urna id volutpat lacus laoreet non curabitur gravida. Viverra aliquet eget sit amet tellus. Egestas congue quisque egestas diam in arcu. Velit scelerisque in dictum non. Diam sollicitudin tempor id eu nisl nunc mi ipsum faucibus. Eu feugiat pretium nibh ipsum. Orci nulla pellentesque dignissim enim sit amet venenatis urna cursus. Ac turpis egestas maecenas pharetra. Nisl suscipit adipiscing bibendum est. Amet justo donec enim diam vulputate ut pharetra sit amet. Enim neque volutpat ac tincidunt. Libero volutpat sed cras ornare. Neque aliquam vestibulum morbi blandit cursus risus at ultrices mi. Elementum curabitur vitae nunc sed velit dignissim sodales. Ut tortor pretium viverra suspendisse potenti nullam ac tortor. Sed felis eget velit aliquet sagittis id consectetur purus ut. Semper viverra nam libero justo laoreet. Tristique senectus et netus et. Varius vel pharetra vel turpis. Nisl nisi scelerisque eu ultrices vitae auctor eu augue ut. Lacus sed turpis tincidunt id aliquet risus feugiat in. Sed viverra ipsum nunc aliquet bibendum enim facilisis gravida neque. Nisi porta lorem mollis aliquam ut porttitor leo a diam. Senectus et netus et malesuada fames ac turpis egestas. Id leo in vitae turpis. Eget gravida cum sociis natoque penatibus et. █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ ..........▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇

<sub>Now, if you're like me and you get anal about the small details, you'll also notice that the right wall is no longer perfectly aligned with the top border.

To adjust the position of the right wall, you'll need to add a line to the cell that is holding the body of your post. If you remember, we added a single invisible "." just above your first line of text. We can expand that across the entire cell the same way we added a line to the left most cell of the outer table. The length of this line will have to be determined manually and will be specific to each text box you create.

We start with a simple solid line like so: "_________________________________". However, these alone will typically not be enough to perfectly align your walls with the top and bottom border. It will often under or overshoot it with no option in between. To solve this, we get as close as we can with the solid line and then add a single '.' at the end surrounded by '[sub]' tags. The amount of tags used will be determined by you as you add or remove them to align your walls. If necessary, you can also add more '.' if everything is not quite lining up.

For my example, this is the final solid line, '[sub]' and '.' combination.</sub>

________________________________________________________[sub][sub][sub][sub][sub]..[/sub][/sub][/sub][/sub][/sub]

_{Like the line maintaining the shape of our text box, this will typically be placed within a color tag making it invisible, but I'm keeping it visible here.}

______________________________________________ . . It's also worth pointing out that the line placed within the text box will act as a 'skeleton', preventing your text box from being further compressed by the weight of outside cells. However, it will not prevent your text box from expanding horizontally should those outside cells be removed or their weight reduced and priority transferred to the text box.

...................▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ ________________________________________________________.. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eget aliquet nibh praesent tristique magna. Cursus vitae congue mauris rhoncus aenean vel. Integer vitae justo eget magna fermentum iaculis eu non. Nibh sit amet commodo nulla facilisi nullam. Iaculis urna id volutpat lacus laoreet non curabitur gravida. Viverra aliquet eget sit amet tellus. Egestas congue quisque egestas diam in arcu. Velit scelerisque in dictum non. Diam sollicitudin tempor id eu nisl nunc mi ipsum faucibus. Eu feugiat pretium nibh ipsum. Orci nulla pellentesque dignissim enim sit amet venenatis urna cursus. Ac turpis egestas maecenas pharetra. Nisl suscipit adipiscing bibendum est. Amet justo donec enim diam vulputate ut pharetra sit amet. Enim neque volutpat ac tincidunt. Libero volutpat sed cras ornare. Neque aliquam vestibulum morbi blandit cursus risus at ultrices mi. Elementum curabitur vitae nunc sed velit dignissim sodales. Ut tortor pretium viverra suspendisse potenti nullam ac tortor. Sed felis eget velit aliquet sagittis id consectetur purus ut. Semper viverra nam libero justo laoreet. Tristique senectus et netus et. Varius vel pharetra vel turpis. Nisl nisi scelerisque eu ultrices vitae auctor eu augue ut. Lacus sed turpis tincidunt id aliquet risus feugiat in. Sed viverra ipsum nunc aliquet bibendum enim facilisis gravida neque. Nisi porta lorem mollis aliquam ut porttitor leo a diam. Senectus et netus et malesuada fames ac turpis egestas. Id leo in vitae turpis. Eget gravida cum sociis natoque penatibus et. █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ ..........▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇

PART FOUR

Positioning your text box.

_{To make things a little easier for me going forward, I will be reducing the vertical height of my text box and because I don't want to look at it anymore, that first line will be covered up.}

______________________________________________ Much better. So from here, we can do things like swapping the cells in the outermost table so our text box is on the left instead of the right.

...................▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ ________________________________________________________.. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eget aliquet nibh praesent tristique magna. Cursus vitae congue mauris rhoncus aenean vel. Integer vitae justo eget magna fermentum iaculis eu non. Nibh sit amet commodo nulla facilisi nullam. Iaculis urna id volutpat lacus laoreet non curabitur gravida. Viverra aliquet eget sit amet tellus. Egestas congue quisque egestas diam in arcu. Velit scelerisque in dictum non. Diam sollicitudin tempor id eu nisl nunc mi ipsum faucibus. Eu feugiat pretium nibh ipsum. █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ ..........▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇

_{The easiest way to do this is to grab the entire cell. So this:}
________________________________←[cell][TEXT BOX][/cell]
[table][row] [cell][LINE][/cell][cell]→__________________[/cell][/row][/table]

_{Becomes this:}

[table][row][cell][TEXT BOX][/cell][cell][LINE][/cell][/row][/table]

_{Which gives you this:}

...................▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ ________________________________________________________.. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eget aliquet nibh praesent tristique magna. Cursus vitae congue mauris rhoncus aenean vel. Integer vitae justo eget magna fermentum iaculis eu non. Nibh sit amet commodo nulla facilisi nullam. Iaculis urna id volutpat lacus laoreet non curabitur gravida. Viverra aliquet eget sit amet tellus. Egestas congue quisque egestas diam in arcu. Velit scelerisque in dictum non. Diam sollicitudin tempor id eu nisl nunc mi ipsum faucibus. Eu feugiat pretium nibh ipsum. █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ ..........▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇

______________________________________________ Easy as that.

_{Would you like it more in the center? That is a simple matter of adding a new cell next to your text box so that there is a cell flanking it on either side. Then, you simply cut any length of the line you've already created (the one maintaining the weight of the empty cell), and paste it into the new cell.}

_________________________________________________________✂________
_____________________ ↓ _______________________________________↑
[table][row][cell] [NEW CELL] [/cell][cell][TEXT BOX][/cell][cell][LINE][/cell][/row][/table]

____________________

...................▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ ________________________________________________________.. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eget aliquet nibh praesent tristique magna. Cursus vitae congue mauris rhoncus aenean vel. Integer vitae justo eget magna fermentum iaculis eu non. Nibh sit amet commodo nulla facilisi nullam. Iaculis urna id volutpat lacus laoreet non curabitur gravida. Viverra aliquet eget sit amet tellus. Egestas congue quisque egestas diam in arcu. Velit scelerisque in dictum non. Diam sollicitudin tempor id eu nisl nunc mi ipsum faucibus. Eu feugiat pretium nibh ipsum. █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ ..........▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇

________________________

PART FIVE

Customizing your text box.

_{So now you have a working text box that is a specific size and in your preferred position, but maybe you'd like it to be a different color or a different style. Changing the color is as simple as locating and replacing the color codes specific to the border walls. It might sound intimidating considering your code might look a little convoluted at this point, but once you know what you're looking for, it's pretty easy to find and change. For this example, I've isolated the code for the top border and one of the borders on the side and highlighted the color tag that can be changed. These will be the same on their counterpart.}

[sub][h1][sub][/color][color=black][sub][sub][color=2e2c2c].[sub][sub][sub][sub][sub][sub][sub][sub][sub]..................[/sub][/sub][/sub][/sub][/sub][/sub][/sub][/sub][/sub][/color][sup][b]▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇[/b][/sup][/sub][/sub][/color][/sub][/h1][/sub]

[sup][b][color=black][sub][h2][sup]█[/sup]
[sub]█[/sub][/h2][/sub][sub][h2][sup]█[/sup]
[sub]█[/sub][/h2][/sub][sub][h2][sup]█[/sup]
[sub]█[/sub][/h2][/sub][sub][h2][sup]█[/sup]
[sub]█[/sub][/h2][/sub][sub][h2][sup]█[/sup]
[sub]█[/sub][/h2][/sub][sub][h2][sup]█[/sup]
[sub]█[/sub][/h2][/sub][sub][h2][sup]█[/sup]
[sub]█[/sub][/h2][/sub][sub][h2][sup]█[/sup]
[sub]█[/sub][/h2][/sub][sub][h2][sup]█[/sup]
[sub]█[/sub][/h2][/sub][sub][h2][sup]█[/sup]
[sub]█[/sub][/h2][/sub][/color][/b][/sup]

_{Here is what a successful color swap might look like:}

____________________

...................▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ ________________________________________________________.. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eget aliquet nibh praesent tristique magna. Cursus vitae congue mauris rhoncus aenean vel. Integer vitae justo eget magna fermentum iaculis eu non. Nibh sit amet commodo nulla facilisi nullam. Iaculis urna id volutpat lacus laoreet non curabitur gravida. Viverra aliquet eget sit amet tellus. Egestas congue quisque egestas diam in arcu. Velit scelerisque in dictum non. Diam sollicitudin tempor id eu nisl nunc mi ipsum faucibus. Eu feugiat pretium nibh ipsum. █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ ..........▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇

________________________

<sub>The next question is if we can change the border to a different style. The quick and easy answer is yes, but in practice, it's difficult and tedious. Picking a different block element or symbol as the character for our border will change its shape. There is no guarantee that the borders of our text box will line up once the characters have been replaced.

While explaining the 'why' would be a nightmare for me to do in a guide, what I can do is try to show you how I would fix any issues I'd run into if I wanted to change the style of our text box to something else. We'll start with the above box and simply swap out every individual character with another. For this new example, I'll be using '═' for the top and bottom, a corner piece like so '╔' for the appropriate corners, and '║' for the sides.</sub>

____________________

...................╔══════════════════════════════════════════════════╗ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ________________________________________________________.. So as you can see, we're running into issues with alignment on both sides and the top and bottom borders do not reach all the way across. But you might also notice that the top border seems smaller then the side walls. The difference is slight but its noticeable. Again, I'm figuring this out now along with you. What I want to try to do right now is adjust the overall size of that top bar. It's too small because it's been [sub] tagged one too many times, a necessity before when the block element for our previous text box was a different size than the right and left walls (did you ever notice they were not the same character?). ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ..........╚══════════════════════════════════════════════════╝

________________________

_{Here is the isolated code for the top bar, pulled out of the cell. I'll be marking the part of the code I've decided to remove.}

[sub][h1][sub][color=#ae2937][sub][sub][color=2e2c2c].[sub][sub][sub][sub][sub][sub][sub][sub][sub]..................[/sub][/sub][/sub][/sub][/sub][/sub][/sub][/sub][/sub][/color][sup][b]╔═══════════════════════════════════════════════════════════════════╗[/b][/sup][/sub][/sub][/color][/sub][/h1][/sub]

_{Removing that [sup] tag serves two purposes. First, it'll enlarge the top bar by a little since every use of the [sub]/[sup] tags further shrinks the affected text. Second, because [sup] moves the affected element up slightly, removing it will drop it down further. Here it was it looks like now:}

____________________

...................╔══════════════════════════════════════════════════╗ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ________________________________________________________.. Not bad! As luck would have it, the left wall is now more perfectly aligned with the top border. The right wall needs to be adjusted again but we already know how to do that. But what about the bottom border? ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ..........╚══════════════════════════════════════════════════╝

________________________

_{The code here is similar but different enough that we cannot remove the same tag that we did from the top border. I'm going to remove something else, as marked below.}

[sup][h1][sup][color=#ae2937][sup][sup][color=2e2c2c][sub][sub][sub][sub][sub]..........[/sub][/sub][/sub][/sub][/sub][/color][sub][b]╚══════════════════════════════════════════════════╝[/b][/sub][/sup][/sup][/color][sup][/h1][/sup]

_{Again, this will both enlarge the text and move it slightly down.}

____________________

...................╔══════════════════════════════════════════════════╗ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ________________________________________________________... And now we're at the final stretch. As you can see, after we changed the size of the lower border, it's moved slightly. Thankfully, there is a section already built into the code can be easily adjusted to fix this. ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ..........╚══════════════════════════════════════════════════╝

________________________

_{I've highlighted the important bit. By adding or removing ellipses or adding or removing [sub]/[sup] tags, we can adjust the border left or right. This can also be applied to the top border.}

[sup][h1][sup][color=#ae2937][sup][color=2e2c2c][sub][sub][sub][sub][sub]..........[/sub][/sub][/sub][/sub][/sub][/color][sub][b]╚══════════════════════════════════════════════════╝[/b][/sub][/sup][/color][/sup][/h1][/sup]

____________________

...................╔══════════════════════════════════════════════════╗ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ________________________________________________________... And there you have it! After a lot of headaches and tedious adjusting all done by eye, you have a fully customized text box that everyone on mobile cannot appreciate. ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ .......╚══════════════════════════════════════════════════╝

________________________

PART SIX

Doing more with text boxes.

_{So what else can we do? How about a single row table with custom borders? All you have to do is add additional cells. Some adjustment to your text box may be necessary.}

[table][row][TOP][/row][row][cell][LEFT][/cell][cell][TEXT BOX][/cell][cell][CENTER][/cell][cell][TEXT BOX][/cell][cell][RIGHT][/cell][/row][/table][BOTTOM]

____________________

...................▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ _________________________.... Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eget aliquet nibh praesent tristique magna. Cursus vitae congue mauris rhoncus aenean vel. Integer vitae justo eget magna fermentum iaculis eu non. █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ _________________________.... Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eget aliquet nibh praesent tristique magna. Cursus vitae congue mauris rhoncus aenean vel. Integer vitae justo eget magna fermentum iaculis eu non. █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ ..........▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇

________________________

_{Want to break up the border for some fun? You can use the following code for the top border. Again, some adjustment may be necessary:}

[sub][h1][sub][color=black][sub][sub][color=2e2c2c][sub]...[/sub][/color][sup][b]▇▇▇[/b][/sup][/sub][/sub][color=2e2c2c]_[sub][sub][sub][sub].[/sub][/sub][/sub][/sub][/color][sub][color=white][color=#a5854a]F[/color] U N[/color][/sub][sub][sub][color=2e2c2c]_[sub][sub][sub][sub].......[/sub][/sub][/sub][/sub][/color][sup][b]▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇[/b][/sup][/sub][/sub][/color][/sub][/h1][/sub]

____________________

...▇▇▇_.F U N_.......▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ _________________________.... Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eget aliquet nibh praesent tristique magna. Cursus vitae congue mauris rhoncus aenean vel. Integer vitae justo eget magna fermentum iaculis eu non. █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ _________________________.... Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eget aliquet nibh praesent tristique magna. Cursus vitae congue mauris rhoncus aenean vel. Integer vitae justo eget magna fermentum iaculis eu non. █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ ..........▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇

________________________

_{And that's as much as I've figured out on my own. I sincerely hope the above is helpful and someone can make use of it for their own creations. Feel free to reply here or DM me if you have questions. I will probably organize them somewhere into a faq. Also please, I'm sure there are ways to vastly improve the above code to make it more efficient or clean or user friendly. Please let me know what can be improved.}

[Exit]

_________________

[+] ...... ...................▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ _______________________________________________________.......... . . . 02._______________ HOW MAKE? █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ ..........▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇ _________________________________

. . . . . . . . . . . . . . . . . . . . . ...................▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ _______________________________________________________.......... . . . 02._______________ A TAB █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ ..........▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇ .

________________________

___________ . contents

PART ONE PART TWO PART THREE PART FOUR PART FIVE

Tab basics. Tab refining. Step one. Tab refining. Step two. Tabbed character sheets Other tab techniques.

PART ONE

Tab basics.

<sub>This was made possible by changes implemented to our bbcode within the past couple of months. I want to reiterate that updates are ongoing so this may not work tomorrow, next month or maybe it'll be around for a few years before it's made obsolete.

This trick takes advantage of two things: Hider functionality and the removal of the horizontal scroll bar. The scroll bar used to pop up when elements of a post bled beyond the page boundary. There were a few reasons this happened, both accidental and intentional, but it was meant to allow users on any device see the content that was pushed out of bounds. As a note, this still happens in specific areas of the website such as in PMs, post previews on user's bios and the editing UI.

Because it was removed, anything pushed beyond the border of the page remains hidden, and because opening a hider is instantaneous, this trick creates the illusion that you're swapping a tab. So, how do we make one?

We'll start by recreating the basic mechanic and worry about making it look pretty later on. Let's simply start with our first tab.</sub>

TAB ONE

_{Now we want a hider. Code looks like this:}

[hider=][/hider]TAB ONE

_{Note that removing the '=' will create a hider button with the word 'hider' in it. The '=' with no text in front of it creates a button with just the '+'. You can add text after the '=', but you'll have to adjust the rest of your tab to compensate, so leaving it empty is easiest. The above code gives:}

[+]

TAB ONE

_{So obviously opening that hider doesn't do anything right now except push our tab down some. What we want to do is push the tab to the right. We can do this by putting our hider and our tab into separate cells of a table.}

[table][row][cell][hider=][/hider][/cell][cell]TAB ONE[/cell][/row][/table]

_{Now we have:}

[+]

TAB ONE

<sub>Opening and closing our hider now pushes the tab horizontally. All we need to do now is add a solid line into the hider which will determine how far we want to move our tab. We would typically hide this with '2e2c2c' color tag, but I'll be leaving it visible for now.

Code will look like this:</sub>

[table][row][cell][hider=]__________________________[/hider][/cell][cell]TAB ONE[/cell][/row][/table]

_{And you get this:}

[+] __________________________

TAB ONE

_{With a long enough line, our tab will fall off the edge of the page.}

[+] __________________________________________________________________________________________________________________________

TAB ONE

<sub>Now, to roughly complete our optical illusion, we can add our second tab, this time into the hider.

I'm doing a simple line break above the solid line before adding in our text and I'll also be hiding our line with a '2e2c2c' color tag:</sub>

[table][row][cell][hider=]TAB TWO
[color=2e2c2c]__________________________________________________________________________________________________________________________[/color][/hider][/cell][cell]TAB ONE[/cell][/row][/table]

[+] TAB TWO __________________________________________________________________________________________________________________________

TAB ONE

_{And now our text is jumping around, but, at its most basic, this is tab switching. Congrats! You did it!}

PART TWO

Tab refining. Step one.

<sub>Now lets start making it actually look like its not a bbcode accident and something we're proud of. As you probably notice, our two tabs are nowhere near each other and when compared to the tab I used to create the title of this guide, it doesn't snap-swap™ the same way.

There are a number of ways we can solve this issue but it mostly comes down to where you want your tab to be and what you're swapping. The general idea is to have your two tabs lined up so that the swap is clean and makes some amount of sense. Since this isn't a character sheet or post template, we just have an empty canvas with no direction. So, let's pick a spot. Left aligned?

If you notice our base tab, our text is in the center. That's because it's in a table's cell and subject to its formatting rules. We'll have to add weight to the cell it's in to make it more flush to the left wall. Also remember that the hider button we're using is in its own cell as well. We will not be able to get fully flushed with the wall as there is an entire table cell between our text and the page border.

Below is our code. You'll see that I've copied and pasted the line we created earlier into the first tab with a line break putting it below the text that reads 'TAB ONE':</sub>

[table][row][cell][hider=]TAB TWO[color=2e2c2c]__________________________________________________________________________________________________________________________[/color][/hider][/cell][cell]TAB ONE
__________________________________________________________________________________________________________________________[/cell][/row][/table]

_{The above will look like this:}

[+] TAB TWO __________________________________________________________________________________________________________________________

TAB ONE __________________________________________________________________________________________________________________________

<sub>That line moves priority to the right cell. It's unreasonably long because the table will try to keep things as balanced as possible until it absolutely cannot anymore, resulting in our text inching ever closer to our hider button with decreasing returns until our line is long enough to break beyond the page border. You can clearly seeing it running off the edge, but because I'll be covering it up with the '2e2c2c' color tag, it won't be a problem.

You'll see that it's also positioned above our text on the second tab and to the right. We can fix one of these issues fairly easily with a technique we've used before. However, be aware that things will begin to look a little convoluted from here on out as we'll be dealing with tables nested within tables.

To ensure we're moving the entire tab and not just the text by itself, we'll need to put 'TAB TWO' into its own table. I will also hide the second line that was added in the last step.</sub>

[table][row][cell][hider=][table][row][cell][/cell][cell]TAB TWO
[color=2e2c2c]__________________________________________________________________________________________________________________________[/color][/cell][/row][/table]
[/hider][/cell][cell]TAB ONE
[color=2e2c2c]__________________________________________________________________________________________________________________________[/color][/cell][/row][/table]

_{In the cell to its left, we'll add [sub] tags and ellipses. Just like in my text box guide, these will be used to adjust our tab horizontally.}

[table][row][cell][hider=][table][row][cell][sub][sub][sub][sub][sub]...[/sub][/sub][/sub][/sub][/sub][/cell][cell]TAB TWO
[color=2e2c2c]__________________________________________________________________________________________________________________________[/color][/cell][/row][/table][/hider][/cell][cell]TAB ONE
[color=2e2c2c]__________________________________________________________________________________________________________________________[/color][/cell][/row][/table]

_{Here it what we have so far:}

[+] ... TAB TWO __________________________________________________________________________________________________________________________

TAB ONE __________________________________________________________________________________________________________________________

PART THREE

Tab refining. Step Two.

<sub>We now arrive at the tricky part. We need to adjust TAB ONE vertically to bring it closer to TAB TWO, but if were to simply add invisible text above it, it will either come up short or over shoot it and the two would not line up. Luckily, there is a fix that exists that works to push objects vertically in the same way we use [sub] tags and ellipses to push objects horizontally. However, this fix is not so simply put together.

What this trick entails is the use of glitched bbcode behavior that happens when you add a [sub] tag to an entire table. By subbing a table and then further subbing text inside it, text placed on individual line breaks will slowly push the boundary of a table down.

Here is what that code looks like:</sub>

[sub][table][row][cell][sub][/sub][/cell][/row][/table][/sub]

<sub>When bordered, here is the result:


If I were to remove the center [sub] tags and enter two lines of text, they end up looking like this:</sub>

This is an example of the weird sub-table glitch behavior.

_{Subbing the contents inside and adding a few line breaks (with text on each line, in this case a period) will separate the two.}

This is an example of the weird . . . . . . . sub-table glitch behavior.

<sub>And this is the behavior we will be taking advantage of to make minor adjustments to our tab. For the next few steps, I will keep this table bordered so you can see it at work.

We will be taking the above code, with text removed, and adding it to our cell holding TAB ONE, placing it above the text.</sub>

[table][row][cell][hider=][table][row][cell][sub][sub][sub][sub][sub]...[/sub][/sub][/sub][/sub][/sub][/cell][cell]TAB TWO
[color=2e2c2c]__________________________________________________________________________________________________________________________[/color][/cell][/row][/table][/hider][/cell][cell][sub][table][row][cell][sub][/sub][/cell][/row][/table][/sub]
TAB ONE
[color=2e2c2c]__________________________________________________________________________________________________________________________[/color][/cell][/row][/table]

_{So far we have this:}

[+] ... TAB TWO __________________________________________________________________________________________________________________________

TAB ONE __________________________________________________________________________________________________________________________

_{Next, we begin adding in periods on individual lines.}

[table][row][cell][hider=][table][row][cell][sub][sub][sub][sub][sub]...[/sub][/sub][/sub][/sub][/sub][/cell][cell]TAB TWO
[color=2e2c2c]__________________________________________________________________________________________________________________________[/color][/cell][/row][/table][/hider][/cell][cell][sub][table][row][cell][sub].
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.[/sub][/cell][/row][/table][/sub]
TAB ONE
[color=2e2c2c]__________________________________________________________________________________________________________________________[/color][/cell][/row][/table]

_{To get this:}

[+] ... TAB TWO __________________________________________________________________________________________________________________________

. . . . . . . . . . . . . . . . . . . . TAB ONE __________________________________________________________________________________________________________________________

_{And now, we can add more ellipses to our cell next to TAB TWO, pushing it further to the right:}

[table][row][cell][hider=][table][row][cell][sub][sub][sub][sub][sub]..................[/sub][/sub][/sub][/sub][/sub][/cell][cell]TAB TWO
[color=2e2c2c]__________________________________________________________________________________________________________________________[/color][/cell][/row][/table][/hider][/cell][cell][sub][table=bordered][row][cell][sub].
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.[/sub][/cell][/row][/table][/sub]TAB ONE
[color=2e2c2c]__________________________________________________________________________________________________________________________[/color][/cell][/row][/table]

_{Your tabs should now be positioned like so:}

[+] .................. TAB TWO __________________________________________________________________________________________________________________________

. . . . . . . . . . . . . . . . . . . . TAB ONE __________________________________________________________________________________________________________________________

_{With border removed (and some small adjustments made to compensate) and ellipses/periods hidden, our tabs look like this:}

[+] .................. TAB TWO __________________________________________________________________________________________________________________________

. . . . . . . . . . . . . . . . . . . . . . TAB ONE __________________________________________________________________________________________________________________________

PART FOUR

Tabbed character sheets.

<sub>So what can you do with tabs? Alternating characters sheets are a good start and fairly easy to implement with our established code depending on which way it's leaning.

Below, I've begun plugging in all the elements of a basic CS and have stopped where there is a problem. Here are the bits of code I've added, highlighted, and the result below it:</sub>

[table][row][cell][img]i.pinimg.com/1200x/8b/08/19/8b0819688…
[color=2e2c2c]_________________________________[/color][/cell][cell][hider=][table][row][cell][sub][sub][sub][sub][sub][color=2e2c2c]..................[/color][/sub][/sub][/sub][/sub][/sub][/cell][cell]TAB TWO

[sub][color=gray]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eget aliquet nibh praesent tristique magna. Cursus vitae congue mauris rhoncus aenean vel. Integer vitae justo eget magna fermentum iaculis eu non. Nibh sit amet commodo nulla facilisi nullam. Iaculis urna id volutpat lacus laoreet non curabitur gravida. Viverra aliquet eget sit amet tellus. Egestas congue quisque egestas diam in arcu. Velit scelerisque in dictum non. Diam sollicitudin tempor id eu nisl nunc mi ipsum faucibus. Eu feugiat pretium nibh ipsum.[/color][/sub]
[color=2e2c2c]__________________________________________________________________________________________________________________________[/color][/cell][/row][/table][/hider][/cell][cell][sub][table][row][cell][sub][color=2e2c2c].
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.[/color][/sub][/cell][/row][/table][/sub]TAB ONE

[sub][color=gray]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eget aliquet nibh praesent tristique magna. Cursus vitae congue mauris rhoncus aenean vel. Integer vitae justo eget magna fermentum iaculis eu non. Nibh sit amet commodo nulla facilisi nullam. Iaculis urna id volutpat lacus laoreet non curabitur gravida. Viverra aliquet eget sit amet tellus. Egestas congue quisque egestas diam in arcu. Velit scelerisque in dictum non. Diam sollicitudin tempor id eu nisl nunc mi ipsum faucibus. Eu feugiat pretium nibh ipsum.[/color][/sub]
[color=2e2c2c]__________________________________________________________________________________________________________________________[/color][/cell][/row][/table]

_________________________________

[+] .................. TAB TWO Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eget aliquet nibh praesent tristique magna. Cursus vitae congue mauris rhoncus aenean vel. Integer vitae justo eget magna fermentum iaculis eu non. Nibh sit amet commodo nulla facilisi nullam. Iaculis urna id volutpat lacus laoreet non curabitur gravida. Viverra aliquet eget sit amet tellus. Egestas congue quisque egestas diam in arcu. Velit scelerisque in dictum non. Diam sollicitudin tempor id eu nisl nunc mi ipsum faucibus. Eu feugiat pretium nibh ipsum. __________________________________________________________________________________________________________________________

. . . . . . . . . . . . . . . . . . . . . . TAB ONE Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eget aliquet nibh praesent tristique magna. Cursus vitae congue mauris rhoncus aenean vel. Integer vitae justo eget magna fermentum iaculis eu non. Nibh sit amet commodo nulla facilisi nullam. Iaculis urna id volutpat lacus laoreet non curabitur gravida. Viverra aliquet eget sit amet tellus. Egestas congue quisque egestas diam in arcu. Velit scelerisque in dictum non. Diam sollicitudin tempor id eu nisl nunc mi ipsum faucibus. Eu feugiat pretium nibh ipsum. __________________________________________________________________________________________________________________________

<sub>As a small summary, I've added more text, an image, and a solid line beneath that image that acts as a 'skeleton' for the cell it is in, preventing that cell from collapsing on our image. Images do not add weight to a cell and are taken over by other cells that have text in them.

As you can see, the body of our text is running off the page because the width of the cell it is in is currently defined by the obscenely long line we placed. That line's original job was to push our tab as far left as possible to make it flush with the page boundary. Although that boundary has moved, it's still doing its job, but now it's also affecting our body of text. Because we still want to maintain the same alignment, we can keep that line but move it to its own cell within the same row. We then add a 'skeleton' into the cell holding our text, ensuring it is not crushed by the weight of the cells flanking it.

I will also be adjusting the left and right position of TAB TWO since it seems to be slightly off.

Here is what our changes will look like and the result below. New lines visible:</sub>

[table][row][cell][img]i.pinimg.com/1200x/8b/08/19/8b0819688…
[color=2e2c2c]_________________________________[/color][/cell][cell][hider=][table][row][cell][sub][sub][sub][sub][sub][color=2e2c2c].................[sub].[/sub][/color][/sub][/sub][/sub][/sub][/sub][/cell][cell]TAB TWO

[sub][color=gray]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eget aliquet nibh praesent tristique magna. Cursus vitae congue mauris rhoncus aenean vel. Integer vitae justo eget magna fermentum iaculis eu non. Nibh sit amet commodo nulla facilisi nullam. Iaculis urna id volutpat lacus laoreet non curabitur gravida. Viverra aliquet eget sit amet tellus. Egestas congue quisque egestas diam in arcu. Velit scelerisque in dictum non. Diam sollicitudin tempor id eu nisl nunc mi ipsum faucibus. Eu feugiat pretium nibh ipsum.[/color][/sub]_________________________________________[/cell][cell][color=2e2c2c]__________________________________________________________________________________________________________________________[/color][/cell][/row][/table][/hider][/cell][cell][sub][table][row][cell][sub][color=2e2c2c].
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.[/color][/sub][/cell][/row][/table][/sub]TAB ONE

[sub][color=gray]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eget aliquet nibh praesent tristique magna. Cursus vitae congue mauris rhoncus aenean vel. Integer vitae justo eget magna fermentum iaculis eu non. Nibh sit amet commodo nulla facilisi nullam. Iaculis urna id volutpat lacus laoreet non curabitur gravida. Viverra aliquet eget sit amet tellus. Egestas congue quisque egestas diam in arcu. Velit scelerisque in dictum non. Diam sollicitudin tempor id eu nisl nunc mi ipsum faucibus. Eu feugiat pretium nibh ipsum.[/color][/sub]_________________________________________[/cell][cell][color=2e2c2c]__________________________________________________________________________________________________________________________[/color][/cell][/row][/table]

_________________________________

[+] .................. TAB TWO Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eget aliquet nibh praesent tristique magna. Cursus vitae congue mauris rhoncus aenean vel. Integer vitae justo eget magna fermentum iaculis eu non. Nibh sit amet commodo nulla facilisi nullam. Iaculis urna id volutpat lacus laoreet non curabitur gravida. Viverra aliquet eget sit amet tellus. Egestas congue quisque egestas diam in arcu. Velit scelerisque in dictum non. Diam sollicitudin tempor id eu nisl nunc mi ipsum faucibus. Eu feugiat pretium nibh ipsum. _________________________________________ __________________________________________________________________________________________________________________________

. . . . . . . . . . . . . . . . . . . . . TAB ONE Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eget aliquet nibh praesent tristique magna. Cursus vitae congue mauris rhoncus aenean vel. Integer vitae justo eget magna fermentum iaculis eu non. Nibh sit amet commodo nulla facilisi nullam. Iaculis urna id volutpat lacus laoreet non curabitur gravida. Viverra aliquet eget sit amet tellus. Egestas congue quisque egestas diam in arcu. Velit scelerisque in dictum non. Diam sollicitudin tempor id eu nisl nunc mi ipsum faucibus. Eu feugiat pretium nibh ipsum. _________________________________________

__________________________________________________________________________________________________________________________

<sub>With the new lines, you can control the width of the body of your text. Remember to copy and paste it into both cells (and hide it) so that they are the same width.

At this point, you can treat each tab as an empty page and expect it to follow all the usual bbcode rules. Which means, I can take the text box code we worked on earlier and plug it directly into our tab code with minimal adjusting.

What I will do is take the following:</sub>

____________________

...................▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ ________________________________________________________.. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eget aliquet nibh praesent tristique magna. Cursus vitae congue mauris rhoncus aenean vel. Integer vitae justo eget magna fermentum iaculis eu non. Nibh sit amet commodo nulla facilisi nullam. Iaculis urna id volutpat lacus laoreet non curabitur gravida. Viverra aliquet eget sit amet tellus. Egestas congue quisque egestas diam in arcu. Velit scelerisque in dictum non. Diam sollicitudin tempor id eu nisl nunc mi ipsum faucibus. Eu feugiat pretium nibh ipsum. █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ ..........▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇

________________________

_{And combine it with the tabbed character sheet we just finished. The following is the full code break down showing where I've removed flanking cells from the text box code that helped define the text box's position, and replaced the content within each tab with the text box code itself:}

[table][row][cell][img]i.pinimg.com/1200x/8b/08/19/8b0819688…
[color=2e2c2c]_________________________________[/color][/cell][cell][hider=][table][row][cell][sub][sub][sub][sub][sub][color=2e2c2c].................[sub].[/sub][/color][/sub][/sub][/sub][/sub][/sub][/cell][cell]TAB TWO

[table][row][cell][color=2e2c2c]____________________[/color][/cell][cell][table][row][sub][h1][sub][color=#ae2937][sub][sub][color=2e2c2c].[sub][sub][sub][sub][sub][sub][sub][sub][sub]..................[/sub][/sub][/sub][/sub][/sub][/sub][/sub][/sub][/sub][/color][sup][b]▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇[/b][/sup][/sub][/sub][/color][/sub][/h1][/sub][/row][row][cell][sup][b][color=#ae2937][sub][h2][sup]█[/sup]
[sub]█[/sub][/h2][/sub][sub][h2][sup]█[/sup]
[sub]█[/sub][/h2][/sub][sub][h2][sup]█[/sup]
[sub]█[/sub][/h2][/sub][sub][h2][sup]█[/sup]
[sub]█[/sub][/h2][/sub][sub][h2][sup]█[/sup]
[sub]█[/sub][/h2][/sub][sub][h2][sup]█[/sup]
[sub]█[/sub][/h2][/sub][sub][h2][sup]█[/sup]
[sub]█[/sub][/h2][/sub][sub][h2][sup]█[/sup]
[sub]█[/sub][/h2][/sub][sub][h2][sup]█[/sup]
[sub]█[/sub][/h2][/sub][sub][h2][sup]█[/sup]
[sub]█[/sub][/h2][/sub][/color][/b][/sup][/cell][cell][color=2e2c2c]________________________________________________________[sub][sub][sub][sub][sub]..[/sub][/sub][/sub][/sub][/sub][/color]
[color=gray]Orci nulla pellentesque dignissim enim sit amet venenatis urna cursus. Ac turpis egestas maecenas pharetra. Nisl suscipit adipiscing bibendum est. Amet justo donec enim diam vulputate ut pharetra sit amet. Enim neque volutpat ac tincidunt. Libero volutpat sed cras ornare. Neque aliquam vestibulum morbi blandit cursus risus at ultrices mi. Elementum curabitur vitae nunc sed velit dignissim sodales. Ut tortor pretium viverra suspendisse potenti nullam ac tortor. Sed felis eget velit aliquet sagittis id consectetur purus ut.[/color][/cell][cell][sup][b][color=#ae2937][sub][h2][sup]█[/sup]
[sub]█[/sub][/h2][/sub][sub][h2][sup]█[/sup]
[sub]█[/sub][/h2][/sub][sub][h2][sup]█[/sup]
[sub]█[/sub][/h2][/sub][sub][h2][sup]█[/sup]
[sub]█[/sub][/h2][/sub][sub][h2][sup]█[/sup]
[sub]█[/sub][/h2][/sub][sub][h2][sup]█[/sup]
[sub]█[/sub][/h2][/sub][sub][h2][sup]█[/sup]
[sub]█[/sub][/h2][/sub][sub][h2][sup]█[/sup]
[sub]█[/sub][/h2][/sub][sub][h2][sup]█[/sup]
[sub]█[/sub][/h2][/sub][sub][h2][sup]█[/sup]
[sub]█[/sub][/h2][/sub][/color][/b][/sup][/cell][/row][/table][sup][h1][sup][color=#ae2937][sup][sup][color=2e2c2c][sub][sub][sub][sub][sub]..........[/sub][/sub][/sub][/sub][/sub][/color][sub][b]▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇[/b][/sub][/sup][/sup][/color][/sup][/h1][/sup][/cell][cell][color=2e2c2c]________________________[/color][/cell][/row][/table][sub][color=gray]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eget aliquet nibh praesent tristique magna. Cursus vitae congue mauris rhoncus aenean vel. Integer vitae justo eget magna fermentum iaculis eu non. Nibh sit amet commodo nulla facilisi nullam. Iaculis urna id volutpat lacus laoreet non curabitur gravida. Viverra aliquet eget sit amet tellus. Egestas congue quisque egestas diam in arcu. Velit scelerisque in dictum non. Diam sollicitudin tempor id eu nisl nunc mi ipsum faucibus. Eu feugiat pretium nibh ipsum.[/color][/sub]
_________________________________________[/cell][cell][color=2e2c2c]__________________________________________________________________________________________________________________________[/color][/cell][/row][/table][/hider][/cell][cell][sub][table][row][cell][sub][color=2e2c2c].
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.[/color][/sub][/cell][/row][/table][/sub]TAB ONE

[table][row][cell][color=2e2c2c]____________________[/color][/cell][cell][table][row][sub][h1][sub][color=#ae2937][sub][sub][color=2e2c2c].[sub][sub][sub][sub][sub][sub][sub][sub][sub]..................[/sub][/sub][/sub][/sub][/sub][/sub][/sub][/sub][/sub][/color][sup][b]▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇[/b][/sup][/sub][/sub][/color][/sub][/h1][/sub][/row][row][cell][sup][b][color=#ae2937][sub][h2][sup]█[/sup]
[sub]█[/sub][/h2][/sub][sub][h2][sup]█[/sup]
[sub]█[/sub][/h2][/sub][sub][h2][sup]█[/sup]
[sub]█[/sub][/h2][/sub][sub][h2][sup]█[/sup]
[sub]█[/sub][/h2][/sub][sub][h2][sup]█[/sup]
[sub]█[/sub][/h2][/sub][sub][h2][sup]█[/sup]
[sub]█[/sub][/h2][/sub][sub][h2][sup]█[/sup]
[sub]█[/sub][/h2][/sub][sub][h2][sup]█[/sup]
[sub]█[/sub][/h2][/sub][sub][h2][sup]█[/sup]
[sub]█[/sub][/h2][/sub][sub][h2][sup]█[/sup]
[sub]█[/sub][/h2][/sub][/color][/b][/sup][/cell][cell][color=2e2c2c]________________________________________________________[sub][sub][sub][sub][sub]..[/sub][/sub][/sub][/sub][/sub][/color]
[color=gray]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eget aliquet nibh praesent tristique magna. Cursus vitae congue mauris rhoncus aenean vel. Integer vitae justo eget magna fermentum iaculis eu non. Nibh sit amet commodo nulla facilisi nullam. Iaculis urna id volutpat lacus laoreet non curabitur gravida. Viverra aliquet eget sit amet tellus. Egestas congue quisque egestas diam in arcu. Velit scelerisque in dictum non. Diam sollicitudin tempor id eu nisl nunc mi ipsum faucibus. Eu feugiat pretium nibh ipsum.[/color][/cell][cell][sup][b][color=#ae2937][sub][h2][sup]█[/sup]
[sub]█[/sub][/h2][/sub][sub][h2][sup]█[/sup]
[sub]█[/sub][/h2][/sub][sub][h2][sup]█[/sup]
[sub]█[/sub][/h2][/sub][sub][h2][sup]█[/sup]
[sub]█[/sub][/h2][/sub][sub][h2][sup]█[/sup]
[sub]█[/sub][/h2][/sub][sub][h2][sup]█[/sup]
[sub]█[/sub][/h2][/sub][sub][h2][sup]█[/sup]
[sub]█[/sub][/h2][/sub][sub][h2][sup]█[/sup]
[sub]█[/sub][/h2][/sub][sub][h2][sup]█[/sup]
[sub]█[/sub][/h2][/sub][sub][h2][sup]█[/sup]
[sub]█[/sub][/h2][/sub][/color][/b][/sup][/cell][/row][/table][sup][h1][sup][color=#ae2937][sup][sup][color=2e2c2c][sub][sub][sub][sub][sub]..........[/sub][/sub][/sub][/sub][/sub][/color][sub][b]▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇[/b][/sub][/sup][/sup][/color][/sup][/h1][/sup][/cell][cell][color=2e2c2c]________________________[/color][/cell][/row][/table][sub][color=gray]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eget aliquet nibh praesent tristique magna. Cursus vitae congue mauris rhoncus aenean vel. Integer vitae justo eget magna fermentum iaculis eu non. Nibh sit amet commodo nulla facilisi nullam. Iaculis urna id volutpat lacus laoreet non curabitur gravida. Viverra aliquet eget sit amet tellus. Egestas congue quisque egestas diam in arcu. Velit scelerisque in dictum non. Diam sollicitudin tempor id eu nisl nunc mi ipsum faucibus. Eu feugiat pretium nibh ipsum.[/color][/sub]
_________________________________________[/cell][cell][color=2e2c2c]__________________________________________________________________________________________________________________________[/color][/cell][/row][/table]

_{Here is the completed, fully customized CS:}

_________________________________

[+] .................. TAB TWO ...................▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ ________________________________________________________.. Orci nulla pellentesque dignissim enim sit amet venenatis urna cursus. Ac turpis egestas maecenas pharetra. Nisl suscipit adipiscing bibendum est. Amet justo donec enim diam vulputate ut pharetra sit amet. Enim neque volutpat ac tincidunt. Libero volutpat sed cras ornare. Neque aliquam vestibulum morbi blandit cursus risus at ultrices mi. Elementum curabitur vitae nunc sed velit dignissim sodales. Ut tortor pretium viverra suspendisse potenti nullam ac tortor. Sed felis eget velit aliquet sagittis id consectetur purus ut. █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ ..........▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇ __________________________________________________________________________________________________________________________

. . . . . . . . . . . . . . . . . . . . . TAB ONE ...................▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ ________________________________________________________.. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eget aliquet nibh praesent tristique magna. Cursus vitae congue mauris rhoncus aenean vel. Integer vitae justo eget magna fermentum iaculis eu non. Nibh sit amet commodo nulla facilisi nullam. Iaculis urna id volutpat lacus laoreet non curabitur gravida. Viverra aliquet eget sit amet tellus. Egestas congue quisque egestas diam in arcu. Velit scelerisque in dictum non. Diam sollicitudin tempor id eu nisl nunc mi ipsum faucibus. Eu feugiat pretium nibh ipsum. █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ ..........▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇

__________________________________________________________________________________________________________________________

PART FIVE

Other tab techniques.

_{What else can you do? How about the reverse? It may sound difficult, but if you think about it, all you're doing is creating two of the same CSs, images and all, for both tabs and changing only the elements you want to on the second. Adjustments may be necessary, the most notable of which for the following was the addition of a sub/table glitch tool above the right image on the first tab to help move it down into place.}

[+] .................. TAB TWO ...................▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ ________________________________________________________.. Orci nulla pellentesque dignissim enim sit amet venenatis urna cursus. Ac turpis egestas maecenas pharetra. Nisl suscipit adipiscing bibendum est. Amet justo donec enim diam vulputate ut pharetra sit amet. Enim neque volutpat ac tincidunt. Libero volutpat sed cras ornare. Neque aliquam vestibulum morbi blandit cursus risus at ultrices mi. Elementum curabitur vitae nunc sed velit dignissim sodales. Ut tortor pretium viverra suspendisse potenti nullam ac tortor. Sed felis eget velit aliquet sagittis id consectetur purus ut. █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ ..........▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇ _________________________________ __________________________________________________________________________________________________________________________

. . . . . . . . . . . . . . . . . . . . . TAB ONE ...................▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ ________________________________________________________.. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eget aliquet nibh praesent tristique magna. Cursus vitae congue mauris rhoncus aenean vel. Integer vitae justo eget magna fermentum iaculis eu non. Nibh sit amet commodo nulla facilisi nullam. Iaculis urna id volutpat lacus laoreet non curabitur gravida. Viverra aliquet eget sit amet tellus. Egestas congue quisque egestas diam in arcu. Velit scelerisque in dictum non. Diam sollicitudin tempor id eu nisl nunc mi ipsum faucibus. Eu feugiat pretium nibh ipsum. █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ ..........▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇

. . . . . . . . . . . . . . . . . . . . . _________________________________ .

__________________________________________________________________________________________________________________________

_{Flipping cards?}

[+] .................. _____________________________ __________________________________________________________________________________________________________________________

. . . . . . . . . . . . . . . . . . . . . _____________________________ .

__________________________________________________________________________________________________________________________

<sub>I think you get the general idea. There's a lot of neat visual tricks you can do with this, much more than what I've done here I'm sure. Good luck with making your own and again, feel free to reply here or DM me questions.

Final note, especially for those like me that care about things being a pixel off. The notice at the top and bottom of every page that indicates if a user or guest is viewing the same page as you, has an effect on the vertical position of table elements. That goes for anything that relies on accurate positioning, not just tabs. The examples here and the tabs I make personally account for that notification being present. It's usually there to let you know that you yourself are viewing the page so I figured usually, it'll be visible for others.

If elements of your tabs or table are moving up and down vertically ever so slightly, check to see if that notification is visible. If it is not, you can refresh and it'll show up.</sub>