Advanced Columns
Alright, this is it. Columns are easily the most complicated tag to work with, but they're also the most powerful. This will probably be the hardest part of my guide. Stick with it, be patient, and your columns will set you apart from all the other BBcoders out there.
Making space
If your code is all cluttered together, you'll lose whatever it is you're doing. The most important thing to remember is that you have to be in control of your code, or else it will become a mess quickly. Take a look at these two code blocks:
Code:
[columns]Column 1[nextcol]Column 2[nextcol]Column 3[/columns]
Code:
[columns]
Column 1
[nextcol]
Column 2
[nextcol]
Column 3
[/columns]
Of course, one of these sets of columns is way easier to read than the other. That being said, they both look identical when posted.
I know I said this in the previous lesson, but it's worth repeating. If you take one thing away from this entire guide, it's this:
Always leave enough space to make your code readable!!!
This is the #1 way to improve your coding and to make the entire process easier. This will hold especially true in this lesson.
Aligning Columns
By default, a column's text will be vertically centered based on the entire 'columns' tag. This is much easier to demonstrate than explain, so I'll show you like this:
Column 1
|
Column 2
Column 2
Column 2
Column 2
Column 2
Column 2
Column 2
Column 2
Column 2
Column 2
|
Column 3
Column 3
Column 3
Column 3
Column 3
|
Even if Column 1 is only one line, it will take up as much space as column 2. But what if we want to align all of the text to the top and have 3 top-down style lists? That part, luckily for us, is pretty easy.
Blank lines are still take up space as a line does, so that means we just have to make the number of rows in each column the same! Like this:
Code:
[columns]
Column 1
[nextcol]
Column 2
Column 2
Column 2
Column 2
Column 2
Column 2
Column 2
Column 2
Column 2
Column 2
[nextcol]
Column 3
Column 3
Column 3
Column 3
Column 3
[/columns]
Column 1
|
Column 2
Column 2
Column 2
Column 2
Column 2
Column 2
Column 2
Column 2
Column 2
Column 2
|
Column 3
Column 3
Column 3
Column 3
Column 3
|
Doing this will make tables
way easier to create! It is important to note, however, that I do include a blank line at the end of every column. I do that to separate the columns, but that also means every column has that one blank space at the bottom. Keep that in mind if your lines are offset by a small amount!
Formatting a single line
Keeping alignment in mind, let's talk about using tags to format the text in each column.
If you're trying to keep your table aligned, you'll have to apply the same 'size' tags to your text in each column. If you re-size text in one column but not another, you'll get this:
Column 1
Column 1
Column 1
Column 1
Column 1
|
Column 2
Column 2
Column 2
Column 2
Column 2
|
This is an extreme example, but it's only to show how column offsets can occur.
It's also important to note that you
must code your lines on the same line as the text. I've mentioned putting code on one line, hitting enter, and then having the text on the next line, but that will create an extra line. Do this:
Code:
[size=5] [b] Column header [/size]
and not this:
Code:
[size=5][b]
Column header [/size]
Formatting an entire column
Sometimes, your job is easier than formatting a single line. Sometimes we get lucky and we can paint with broad strokes. When that's the case, you can keep the entire column organized extremely easily by putting all of the formatting on the same line as the 'columns' tag, like so:
Code:
[columns][size=4][color=blue]
This text is all formatted!
Every line!
[nextcol]
This column isn't formatted!
Remeber, 'nextcol' breaks all tags!
[/columns]
This text is all formatted!
Every line!
|
This column is formatted separately!
Remeber, 'nextcol' breaks all tags!
|
This is made even easier by the fact that 'nextcol' works as a full close, and you don't need to close the tags at all, as long as the entire column is being formatted!
Column Width
Usually, columns are only as wide as they need to be. This can cause text from different columns to push right up against each other. Luckily, there's one easy way to widen your columns to give them as much space as you want!
Remember the 'color=transparent' from all the way in the beginning? If we create text inside of a column and then make it transparent, we can't see the text, but the column still becomes wide enough to read it! See these two code blocks:
Code:
[columns]
Column 1
[nextcol]
Column 2
[/columns]
Code:
[columns][color=transparent]
_______________[/color]
Column 1
[nextcol][color=transparent]
_______________[/color]
Column 2
[/columns]
_______________
Column 1
|
_______________
Column 2
|
You'll notice in the second one, we can't see the long underlines, but they're actually still there! The column becomes exactly as wide as your invisible text!
This is an incredibly powerful technique, but it comes with some added complexity.
It's not necessary to use underscores, but this is the simplest way to do it for me. If you use another line for the underscores, you can see how much extra room your underline will give you! If you text extends past the underline, you can extend the underscore, or you may have to break your text and create a new line manually, like so:
Code:
[columns][color=transparent]
____________________[/color]
This text is longer than the underscore! Oh no!
[nextcol]
This column is only as wide as this text.
[/columns]
____________________
This text is longer than the underscore! Oh no!
|
This column is only as wide as this text.
|
This creates two problems:
The underscore becomes pointless, and the column becomes as wide as the text.
Also, the underline created a new line, so we have to adjust for that in the other column. Here that is, adjusted to fix those two errors:
Code:
[columns][color=transparent]
____________________[/color]
This text is longer
than the underscore!
Oh no!
[nextcol]
This column is only as wide as this text.
[/columns]
____________________
This text is longer
than the underscore!
Oh no!
|
This column is only as wide as this text.
|
Pay attention to a few things here:
I had to adjust the number of lines in the second column to make up for the underline, but also to make up for breaking column 1's sentence into more lines too!
I broke the sentence into a new line whenever it was going to extend past the underline. Putting the underline where I did makes it incredibly easy to figure out where you'll need to break your text!
Using these column spacers is a good way to control the size of your columns when you otherwise wouldn't be able to. It takes a little extra work, but you can use them to manipulate columns in any way you want! If you wanted to get creative, you could even hide messages in your spacers, since
any text can be turned transparent! Just remember: click and drag, and you can see the transparent text, just like with a 'spoiler' tag... c;
Like this! You caught on fast!
Nesting Columns
Okay, this part may be the most confusing part in the guide, so be prepared. Take your time, and don't continue until you're confident you
get it.
Columns can be nested just like any other tag, but this gets a little bit confusing. I'm going to make a section for a dragon bio to explain:
|
_______________
Dragon name
Dragon role
|
______________
+ Trait 1
+ Trait 2
|
______________
- Trait 3
- Trait 4
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sed rhoncus nisi. Ut vel mollis ipsum. Ut tristique molestie eros, a viverra diam auctor vel. Fusce a ligula tincidunt, feugiat ex sed, rutrum nulla. Sed euismod, urna pulvinar tincidunt ornare, metus nunc hendrerit sem, sit amet laoreet metus odio sit amet arcu. Phasellus sed vestibulum nisi, ac rutrum purus. Suspendisse euismod molestie sagittis. Cras dapibus, lectus sit amet auctor bibendum, nisl leo ullamcorper justo, a pulvinar massa purus sit amet erat. Nullam eget fermentum sem. Nunc pretium dui eget quam imperdiet iaculis. Donec vulputate velit sit amet interdum mollis. Nunc ut varius turpis, ac mattis metus.
|
This might look a little daunting, so I'm going to try to section it off in Paint first, and we'll do one set of columns at a time.
The
red sections are the first column. The biggest one. In the first red column, we have the
blue columns, and under that, (still inside
red but outside of
blue) we have the
green columns.
We'll start from the inside and work our way out, doing them one at a time.
The green columns are simple enough; two columns with equal spacing to give enough room for character traits.
Code:
[columns]
[color=transparent]______________[/color]
+ Trait 1
+ Trait 2
[nextcol]
[color=transparent]______________[/color]
- Trait 3
- Trait 4
[/columns]
In the blue columns, I used the "copy image address" on an image of my dragon's head. That was the first blue column. In the second one, I just spaced out enough room for a name and a role for the dragon in its clan:
Code:
[columns]
[img]http://www1.flightrising.com/rendern/portraits/335688/33568767p.png[/img]
[nextcol]
[color=transparent]_______________[/color]
Dragon name
Dragon role
[/columns]
And then in
red, I simply put the
blue and
green columns inside the first column, and then used some filler text for a backstory or bio in the second column. Since the
blue column was spaced enough for itself, the
red columns don't need any additional spacing.
So, let's create the
red column:
Code:
[columns]
[nextcol]
-- Filler text goes here! --
[/columns]
Easy enough, right?
Now we just have to copy/paste our
blue column into
red's first column:
Code:
[columns]
[columns]
[img]http://www1.flightrising.com/rendern/portraits/335688/33568767p.png[/img]
[nextcol]
[color=transparent]_______________[/color]
Dragon name
Dragon role
[/columns]
-----
[nextcol]
-- Filler text goes here! --
[/columns]
I also added a rule to separate the
blue columns from the
green ones! Remeber that this rule has to exist in the first
red column!
After that, we can simply paste the
green column just below the
blue one, like so:
Code:
[columns]
[columns]
[img]http://www1.flightrising.com/rendern/portraits/335688/33568767p.png[/img]
[nextcol]
[color=transparent]_______________[/color]
Dragon name
Dragon role
[/columns]
-----
[columns]
[color=transparent]______________[/color]
+ Trait 1
+ Trait 2
[nextcol]
[color=transparent]______________[/color]
- Trait 3
- Trait 4
[/columns]
[nextcol]
-- Filler text goes here! --
[/columns]
And that's all it takes! Remember to piece your code together one 'columns' tag at a time to keep things simple.
It's also important to note that since every set of columns is the same tag, you will have to nest them properly. The code knows to close
the most recently opened 'columns' tag when you try to close one, so make sure they're nested properly!
If you've made it this far, congratulations! I mean it, really. This can get really complicated really fast, so you're doing good for yourself. If you're still not there yet, try to practice in the comments here. Click "Preview" a lot to see how you're doing, and do little pieces at a time. Keep going piece by piece and you're sure to make whatever you put your mind to!
The next few sections are up in the air right now. They could be anything. If you're reading this, my guide isn't complete yet, and I'd like feedback. Am I an awful teacher? Did I miss something? Please let me know if I need to clarify anything in the guide! I'd love to see what kinds of things you're making with this guide, so feel free to show off here!
) it will copy the image for you, so you only have to paste it!
: 999,999,999,999,999
: 999,999,999,999,999
