Left/Right/Center MethodIf you want to make a signature with more than 3 columns, try using the "Left/Left/Left" method instead.
As explained in Basics of BBCode, the left, right, and center buttons will align your text to the left, right, and center.
✔ DO write the code as "left column, right column, center column" with NO SPACES in between.
Simplified example: [left ]GREEN[/left][right ]PURPLE[/right][center ]BLUE[/center]
- Code: Select all
[left][img]http://i.imgur.com/gBM2DNe.jpg[/img][/left][right][img]http://i.imgur.com/PuzwdBK.jpg[/img][/right][center][img]http://i.imgur.com/3ALGez6.jpg[/img][/center]
✘ DON'T Write it as "left column, center column, right column", or else this happens:
- Code: Select all
[left][img]http://i.imgur.com/gBM2DNe.jpg[/img][/left][center][img]http://i.imgur.com/3ALGez6.jpg[/img][/center][right][img]http://i.imgur.com/PuzwdBK.jpg[/img][/right]
So you can't put those last two columns in the order that you'll see them. Don't ask me why. That's just how it works. *shrug*
✘ DON'T forget to fit the text to the column, or else this happens.
Ew, what a mess. The left column was too wide, so it pushed the center column over and pushed the right column out of line.
GREEN
greengreengreengreengreengreengreengreengreengreengreen
PURPLE
purplepurplepurplepurplepurplepurplepurplepurplepurplepurplepurple
BLUE
blueblueblueblueblueblueblue
- Code: Select all
[left]GREEN
[img]http://i.imgur.com/gBM2DNe.jpg[/img]
greengreengreengreengreengreengreengreengreengreengreen[/left][right]PURPLE
[img]http://i.imgur.com/PuzwdBK.jpg[/img]
purplepurplepurplepurplepurplepurplepurplepurplepurplepurplepurple[/right][center]BLUE
[img]http://i.imgur.com/3ALGez6.jpg[/img]
blueblueblueblueblueblueblue[/center]
✔ DO take care to fit the text into the column. Tah dah!
GREEN
greengreengreengreen
greengreengreengreen
greengreengreen
PURPLE
purplepurplepurple
purplepurplepurple
purplepurplepurple
purplepurple
BLUE
blueblueblue
blueblueblueblue
- Code: Select all
[left]GREEN
[img]http://i.imgur.com/gBM2DNe.jpg[/img]
greengreengreengreen
greengreengreengreen
greengreengreen[/left][right]PURPLE
[img]http://i.imgur.com/PuzwdBK.jpg[/img]
purplepurplepurple
purplepurplepurple
purplepurplepurple
purplepurple[/right][center]BLUE
[img]http://i.imgur.com/3ALGez6.jpg[/img]
blueblueblue
blueblueblueblue[/center]
✘ DON'T Put spaces or extra lines between your column codes or it will push your columns down.
Simplified example of what you should do:
[left ]GREEN[/left][right ]PURPLE[/right][center ]BLUE[/center]
Simplified example of what NOT to do:
[left ]GREEN[/left]
[right ]PURPLE[/right]
[center ]BLUE[/center]
If you add spaces/lines between columns, it turns out like this:
GREEN
greengreengreengreen
greengreengreengreen
greengreengreen
PURPLE
purplepurplepurple
purplepurplepurple
purplepurplepurple
purplepurple
BLUE
blueblueblue
blueblueblueblue
- Code: Select all
[left]GREEN
[img]http://i.imgur.com/gBM2DNe.jpg[/img]
greengreengreengreen
greengreengreengreen
greengreengreen[/left]
[right]PURPLE
[img]http://i.imgur.com/PuzwdBK.jpg[/img]
purplepurplepurple
purplepurplepurple
purplepurplepurple
purplepurple[/right]
[center]BLUE
[img]http://i.imgur.com/3ALGez6.jpg[/img]
blueblueblue
blueblueblueblue[/center]
Centering Text within a ColumnEven if something is in the left or right column, you can still center the text and pictures within that column.
Recall how [left ]GREEN[/left][right ]PURPLE[/right][center ]BLUE[/center] made our columns.
Now, putting a "center" code within the existing column code will center it.
Simplified example: [left ][center ]GREEN[/center][/left][right ][center ]PURPLE[/center][/right][center ]BLUE[/center]
GREEN
greengreengreengreen
greengreengreengreen
greengreengreen
PURPLE
purplepurplepurple
purplepurplepurple
purplepurple
BLUE
blueblueblue
blueblueblueblue
- Code: Select all
[left][center]GREEN
[img]http://i.imgur.com/gBM2DNe.jpg[/img]
greengreengreengreen
greengreengreengreen
greengreengreen[/center][/left][right][center]PURPLE
[img]http://i.imgur.com/PuzwdBK.jpg[/img]
purplepurplepurple
purplepurplepurple
purplepurple[/center][/right][center]BLUE
[img]http://i.imgur.com/3ALGez6.jpg[/img]
blueblueblue
blueblueblueblue[/center]
Left/Left/Left MethodYour columns don't have to stay all spread out like that. Here's how to make them cozy up next to each other.
To make all columns hug the left side, simply put them in order and place the [left ][/left] codes around each of them.
Simplified Example: [left ]GREEN[/left][left ]BLUE[/left][left ]PURPLE[/left]
Tah dah!
GREEN
greengreengreen
greengreengreen
greengreengreen
BLUE
blueblueblue
blueblueblueblue
PURPLE
purplepurplepurple
purplepurplepurple
purplepurplepurple
......................................................................................................................................
- Code: Select all
[left]GREEN
[img]http://i.imgur.com/gBM2DNe.jpg[/img]
greengreengreengreen
greengreengreengreen
greengreengreen[/left][left]BLUE
[img]http://i.imgur.com/3ALGez6.jpg[/img]
blueblueblue
blueblueblueblue[/left][left]PURPLE
[img]http://i.imgur.com/PuzwdBK.jpg[/img]
purplepurplepurple
purplepurplepurple
purplepurplepurple[/left]
Take note of this method's quirks. I placed an unfortunate sentence below our GreenBluePurple signature code. Because of all the extra space this technique frees up, the unfortunate sentence gets moved up next to the signature to fill the space.
✔ Pros: You now have a fourth column to fill with more stuff!
✘ Cons: If you don't want this to happen, you have to put a long line of something underneath to act as
a wall between the signature and everything else. Can you spot where my "wall" is? I made it out of dots.
You can make this wall invisible using the [color=transparent ][ /color] color code if you don't want it to be seen.
GREEN
greengreengreengreen
greengreengreengreen
greengreengreen
BLUE
blueblueblue
blueblueblueblue
PURPLE
purplepurplepurple
purplepurplepurple
purplepurplepurple
Help me, I'm stuck!
......................................................................................................................................
- Code: Select all
[left]GREEN
[img]http://i.imgur.com/gBM2DNe.jpg[/img]
greengreengreengreen
greengreengreengreen
greengreengreen[/left][left]BLUE
[img]http://i.imgur.com/3ALGez6.jpg[/img]
blueblueblue
blueblueblueblue[/left][left]PURPLE
[img]http://i.imgur.com/PuzwdBK.jpg[/img]
purplepurplepurple
purplepurplepurple
purplepurplepurple[/left]
Help me, I'm stuck!
Special thanks to contributor Lya for showing me a simpler way to do this column method.
✘ DON'T Put spaces or extra lines between your column codes or it will push your columns down.
Simplified example of what you should do:
[left ]GREEN[/left][left ]BLUE[/left][left ]PURPLE[/left]
Simplified example of what NOT to do:
[left ]GREEN[/left]
[left ]BLUE[/left]
[left ]PURPLE[/left]
If you add spaces/lines between columns, it turns out like this:
GREEN
greengreengreen
greengreengreen
greengreengreen
BLUE
blueblueblueblue
blueblueblueblue
blueblueblueblue
PURPLE
purplepurplepurple
purplepurplepurple
purplepurplepurple
......................................................................................................................................
- Code: Select all
[left]GREEN
[img]http://i.imgur.com/gBM2DNe.jpg[/img]
greengreengreengreen
greengreengreengreen
greengreengreen[/left]
[left]BLUE
[img]http://i.imgur.com/3ALGez6.jpg[/img]
blueblueblueblue
blueblueblueblue
blueblueblueblue[/left]
[left]PURPLE
[img]http://i.imgur.com/PuzwdBK.jpg[/img]
purplepurplepurple
purplepurplepurple
purplepurplepurple[/left]
Columns within a ColumnIn order to make a column fit in the column, this requires some skill with the techniques above.
✔ DO use the "Left/Left/Left" technique above as your base.
Simplified example: [left ]GREEN[/left][left ]BLUE[/left][left ]PURPLE[/left]
GREEN
- Code: Select all
[left]GREEN
[img]http://i.imgur.com/gBM2DNe.jpg[/img][/left]
✘ DON'T use the "Left/Right/Center" technique. This tutorial does not follow this method.
This technique is more effective by make the columns wide enough so the double columns can be seen. I am going to be adding the double columns within the green column below. To do this, I repeated the green image 3 times close to each other. Chances are if you do this, then you will have an image to fit the whole length.
- Code: Select all
[left]GREEN
[img]http://i.imgur.com/gBM2DNe.jpg[/img][img]http://i.imgur.com/gBM2DNe.jpg[/img][img]http://i.imgur.com/gBM2DNe.jpg[/img][/left]
Now to make the columns!
✔ DO use right alignment commands within a left command in order to ensure that the columns within the columns are made.
Simplified example: [left ][ right]Green[/right ][right ]Blue[/ right][right ]Purple[/ right][/ left]
*Note, the image is there in the code to show that it is a column within a column.
- Code: Select all
[left][img]http://i.imgur.com/gBM2DNe.jpg[/img][img]http://i.imgur.com/gBM2DNe.jpg[/img][img]http://i.imgur.com/gBM2DNe.jpg[/img]
[color=green][right]Green
x
x[/right][/color][color=blue][right]Blue
x
x[/right][/color][color=purple][right]Purple
x
x[/right][/color][/left]
And there you have it, you have your columns within a columns! Remember to close off all of the alignment commands to ensure the coding works!
As you can see, even though the green column was put first, it was the last column from left to right. When you are working with Right alignments, remember that the first right command will always be the first one to the right!
Green
Part 1
Part 1
Blue
Part 2
Part 2
Purple
Part 3
Part 3
- Code: Select all
[left][img]http://i.imgur.com/gBM2DNe.jpg[/img][img]http://i.imgur.com/gBM2DNe.jpg[/img][img]http://i.imgur.com/gBM2DNe.jpg[/img]
[color=green][right]Green
Part 1
Part 1[/right][/color][color=blue][right]Blue
Part 2
Part 2[/right][/color][color=purple][right]Purple
Part 3
Part 3[/right][/color][/left]
And there you have it!