| ____________________ | ...................▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇ |
█
█ █
█ █
█ █
█ █
█ █
█ █
█ █
█ █
█ █
█ | _______________________________________________________..........
.
.
.
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]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: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. | █
█ █
█ █
█ █
█ █
█ █
█ █
█ █
█ █
█ █
█ |
..........▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇
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:[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.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:[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. | █
█ █
█ █
█ █
█ █
█ █
█ █
█ █
█ █
█ █
█ █
█ █
█ █
█ █
█ █
█ █
█ █
█ █
█ █
█ █
█ █
█ █
█ █
█ █
█ |
..........▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇ |
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]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. | █
█ █
█ █
█ █
█ █
█ █
█ █
█ █
█ █
█ █
█ |
..........▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇ | ________________________ |
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.| ____________________ | ...................╔══════════════════════════════════════════════════╗ |
║
║ ║
║ ║
║ ║
║ ║
║ ║
║ ║
║ ║
║ ║
║ ║
║ | ________________________________________________________..
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.
