Click to open network menu
Join or Log In
Mobafire logo

Join the leading League of Legends community. Create and share Champion Guides and Builds.

Create an MFN Account






Or

Not Updated For Current Season

This guide has not yet been updated for the current season. Please keep this in mind while reading. You can see the most recently updated guides on the browse guides page

x

How to use Columns

How to use Columns

Updated on November 3, 2014
8.9
61
Votes
5
Vote Vote
League of Legends Build Guide Author IceCreamy Build Guide By IceCreamy 61 5 64,553 Views 77 Comments
61 5 64,553 Views 77 Comments League of Legends Build Guide Author IceCreamy Build Guide By IceCreamy Updated on November 3, 2014
x
Did this guide help you? If so please give them a vote or leave a comment. You can even win prizes by doing so!
Vote
Comment

You must be logged in to comment. Please login or register.

I liked this Guide
I didn't like this Guide
Commenting is required to vote!
Would you like to add a comment to your vote?

Your votes and comments encourage our guide authors to continue
creating helpful guides for the League of Legends community.

Welcome!

Hey everyone,

Welcome to my general guide to using columns. Recently I opened up my review shop, and lots of times I noticed the guides I reviewed made no use of columns. I recommended the authors to use it, but if I understood correctly they were having trouble with columns. Noticing that no one else has ever written anything about using columns, I will try to explain in what ways you could/should use columns!

Now, before starting, I want to link you to two other explanations. They both give good tips on how to use BBCoding, but in my opinion they both lack in their explanations of columns as far as available.
The first one is jhoijhoi's guide to making a guide. Reading this gives you a great jumpstart into the world of making guides on mobafire. It contains such a damn lot about BBCoding in general, it is a must-read.
The second one is Matt's BBCode guide. It is more brief, giving quick summaries of how to use a few things, but it is not complete at all.

Well, just so you know I expect you to have read both of them. If not, you will probably not understand very much of the following.
I will try to guide you through several aspects of columns, hopefully you will learn something from it :) Have fun reading!
Back to Top

Filler

Quoted from the Pros/Cons section from my own Lux guide:
space
Pros


+ Great damage.
+ Lovely ult.
+ Great range.
+ Lots of CC.
+ Easily the best laugh in the game.
space




Finales Funkeln
space
Cons


- Very squishy.
- Often mistaken for a support.
- Long cooldowns on her Q, W and E.
- Often mistaken for a carry.
- Mana trouble.

I will try to illustrate how I did that:



The red parts indicate filler. There are 2 ways to do this: You can use the [indent] command, or you can use some filler text like [color=black]filler[/color].
The green parts are just text that I wrote. Nothing much interesting, here.
The blue part indicates some BBCoding as well, but it is not really interesting for the use of columns.

By now you must have realized that I use 6 columns; 3 red (one is in front, not on the picture), 2 green and 1 blue. Columns work like this: In a random column, you can write text all you want. Every line you write will be aligned vertically (look at the Pros in the example; all the text in there is 1 column). If you give the command [nextcol] you will switch to the right, towards the next column. There you should almost always make a filler. To illustrate what happens if you forget the fillers:

space
Pros


+ Great damage.
+ Lovely ult.
+ Great range.
+ Lots of CC.
+ Easily the best laugh in the game.
space




Finales Funkeln
space
Cons


- Very squishy.
- Often mistaken for a support.
- Long cooldowns on her Q, W and E.
- Often mistaken for a carry.
- Mana trouble.


That is with filler, without it looks like this:

Pros

+ Great damage.
+ Lovely ult.
+ Great range.
+ Lots of CC.
+ Easily the best laugh in the game.




Finales Funkeln
Cons

- Very squishy.
- Often mistaken for a support.
- Long cooldowns on her Q, W and E.
- Often mistaken for a carry.
- Mana trouble.


As you see it looks very cluttered, and it becomes less pleasant to read. Also there is this big empty space on the right side of the page, which does not look appealing.

Note that I could also have used the [list] command. However doing that does not allow you to add more things besides each other, so everything will be lined up below each other. That will make your guide look longer than it actually is, and length might scare potential readers away.
Back to Top

Things to look out for

Above I showed you this:

space
Pros


+ Great damage.
+ Lovely ult.
+ Great range.
+ Lots of CC.
+ Easily the best laugh in the game.
space




Finales Funkeln
space
Cons


- Very squishy.
- Often mistaken for a support.
- Long cooldowns on her Q, W and E.
- Often mistaken for a carry.
- Mana trouble.


Now let's see what happens if you add too much text in 1 column:

space
Pros


+ Great damage.
+ Lovely ult.
+ Great range.
+ Lots of CC.
+ Easily the best laugh in the game.
space




Finales Funkeln
space
Cons


- Very squishy.
- Often mistaken for a support.
- Long cooldowns on her Q, W and E.
- Often mistaken for a carry.
- Mana trouble.
- I wish Lux could grant godmode to all allies for 1 minute, it would make her so much of a better champions and teamfights would go very easy as well! I bet my whole team would be so proud of me if I would grant them that!


This looks all cramped up, and not nice at all. Just to demonstrate what happens when I add way more + than - :

space
Pros


+ Great damage.
+ Lovely ult.
+ Great range.
+ Lots of CC.
+ Easily the best laugh in the game.
+ Epic blondy.
+ Cute!
+ Super fun to play!
+ DEMACIAAAAA!
+ Hottest chick in the game!
+
+
+
+
+
+
+
+

space




Finales Funkeln
space
Cons


- Very squishy.
- Often mistaken for a support.
- Long cooldowns on her Q, W and E.
- Often mistaken for a carry.
- Mana trouble.


As you see, the lay-out of it is completely ruined. Try to keep an equal amount of lines in each column for optimal results :)
This happens because the text always tries to stay as close as possible to the middle. If I were to add another - with about the same text length as the others, both the bottom and the top of the column will move down and up a bit, instead of everything up/down. I hope that clarifies things :)
Back to Top

Text on left and right

On to another example. I have seen lots of guides use this template for their Runes section, I will try to replicate it as good as I can:

filler
M
A
R
K
S
filler Alternative Marks:
- #1 because it is very viable to choose this one. If I don't take my standard choice I usually pick those, but they are very situational.
- #2
- #3
filler
M
A
R
K
S


As you can see it looks really nice, I got uninspirational with the text but that does not affect this example. If you are interested, try to see what happens when the text is not long enough. To fix that, you can add filler text in the same column as the text, in that way everything will be fine.
Back to Top

Icons on left and right (float)

Quoted from my Lux guide:

I can no longer live without it. It is really useful on Lux, though she has various escape mechanisms (snare, slow, shield).


This is a simple way of using columns. I use the float command to create some space between the icons and the text. Just add it to the icon line, just like this: [icon = Flash size = 64 float = left]. Therefore I do not have to add any "filler columns".

I have also seen a really nice variant on this:

I can no longer live without it. It is really useful on Lux, though she has various escape mechanisms (snare, slow, shield).

I can no longer live without it. It is really useful on Lux, though she has various escape mechanisms (snare, slow, shield).


You can achieve this effect by adding [indent][nextcol] before the left icon (but inside columns!) and [nextcol][indent] after the right icon (again, inside the columns).

You can also do it without the float command, but make sure you have enough text. Compare (thanks to MissMaw for the example):

Greater Seal of Resilience //Cost: 205 / Gain +1.41 armor per rune
As an AD carry, laning bot lane usually involves another AD carry :P so you'll need some more armor at the start of the game.

lol


Let's go back to the initial example to see what happens without columns. Well, 2 things happen actually. It will be very hard to make that icon on the right appear at the right place, but also something else:



I can no longer live without it. It is really useful on Lux, though she has various escape mechanisms (snare, slow, shield).


Look, the text appeared below the icon! That is something that does not read smoothly, so try to avoid that (hint: use columns :p)

Above example shows what happens without the float tool, notice what happens with it:



I can no longer live without it. It is really useful on Lux, though she has various escape mechanisms (snare, slow, shield). Now just to show an example of why this fails, I am going to keep on typing some more text. Notice that if the text is quite short it does not matter, but if you keep on typing stuff eventually the text is long enough for this to fail. I am very uninspired at the moment so well, you will have to make do with this.


As you see the text will go behind the icon but eventually something goes wrong. Notice what happens if you use columns:

I can no longer live without it. It is really useful on Lux, though she has various escape mechanisms (snare, slow, shield). Now just to show an example of why this fails, I am going to keep on typing some more text. Notice that if the text is quite short it does not matter, but if you keep on typing stuff eventually the text is long enough for this to fail. I am very uninspired at the moment so well, you will have to make do with this.
Back to Top

Icon and text on left

Quoted from my Lux guide:

Ahri
SPACE She has the same problems as you; decent in lane, but exceptional ganks.


Want to take a guess at how many columns I had to use here? If you select that, you notice that I have written SPACE in black, but it would have been neater to use the [indent] command.
Back to Top

Multiple items in a column

IceCreamy's Lux Guide.
IceCreamy's Janna Guide.
IceCreamy's Caitlyn Guide.
IceCreamy's Soraka Guide.
Rating: x.
Rating: x.
Rating: x.
Rating: x.
Date: xx/xx/xxxx
Date: xx/xx/xxxx
Date: xx/xx/xxxx
Date: xx/xx/xxxx




This is just a simple example of using columns. Note that the [list] command does not satisfy:

  • IceCreamy's Lux Guide.
    Rating: x.
    Date: xx/xx/xxxx.
  • IceCreamy's Lux Guide. filler Rating: x. filler Date: xx/xx/xxxx.
  • IceCreamy's Awesome Lux Guide. filler Rating: x. filler Date: xx/xx/xxxx.


At the first one I used the indent command, the second and third lines are to indicate that by using the [list] command the lines do not start at the same point, whereas you don't have that problem with columns.
Back to Top

Alter images/icons left and right

Now you can always try to make some variations. How about creating your mastery section like this?

Offense

Summoner's Wrath for the improved Ignite

Sorcery for the needed CDR

Blast for the always nice AP

Arcane Knowledge for the awesome MPen

Destruction for the nice extra tower damage

Havoc (1 point) as a filler to advance

Mental Force for even more AP

Spellsword for the bonus damage on AA (goes well with passive/Lich Bane!)

Archmage for EVEN MORE AP!!!

Executioner to finish the tree off, and it obviously helps with bursting people down

Utility

Summoner's Insight to improve Flash (and possibly Clairvoyance or Teleport)

Wanderer (1 point) as filler, just to advance

Meditation for the bonus mana regen

Expanded Mind for the extra mana

Runic Affinity for the longer blue buff duration


Note that I made those pictures myself, no BBCoding involved with them.

But you can also do that with "simpler" stuff, or icons, like this:

I can no longer live without it. It is really useful on Lux, though she has various escape mechanisms (snare, slow, shield).
"But my range is so big, I don't want to get close enough to use it!" This is true, but: Solo top will not take it, support will not take it, jungler will not take it, ad carry will not take it. To counter people like Vladimir and Dr. Mundo a team just needs at least one, and since no one else is taking it you should.
Back to Top

Nested columns

But what happens if you forget to close the columns tag? Something called "nesting" happens; your second columns will appear inside the first one. An example:

blabla

blabla
blabla

blabla

blabla

blabla
blabla

blabla


While actually you want to have it like this:

blabla

blabla
blabla

blabla

blabla

blabla
blabla

blabla


So the lesson here: Never, never ever, forget to close your tags! If you started a [columns] tag always write [/columns] somewhere, and that goes for every single command.
Back to Top

Vertical line divider

Another example of how to use columns creatively:

|
|
|
|
Volley is a great skill. It also applies the slow that Frost Shot would give you with any normal basic attack.


As you see, this vertical line divider looks really cool! The "|" signs should be aligned beneath each other (so hit the enter key after each and every one). What happens if you put a space:

| | | |
Volley is a great skill. It also applies the slow that Frost Shot would give you with any normal basic attack.


And that looks... simply said, terrible.
Back to Top

Double Vertical line divider

With thanks to Jpikachu1999, who shared this example. He makes good use of columns, dividers and BBCoding creating this beautiful piece.



Skills






|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|

Ezreal




Preferred Type of Lane:

Poke Lane

Helpful Information:


Ezreal is a fairly annoying champion. He is pretty hard to catch because of his Arcane Shift. He also is going to constantly poke you with Mystic Shot. How to counter: Stand behind your minions to avoid his Mystic Shot. If you see Ezreal fire his Trueshot Barrage at you, try to sidestep it. Try to move in between his attacks to avoid his skill shots.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|

Common Partners









SPACE


Skills






|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|

Janna




Type of Support:

Kill Lane or Poke Lane

Helpful Information:


Janna tends to sit back and shield her AD carry with Eye of the Storm. She is pretty squishy, but nearly uncatchable if you decide to chase her. She does have a lot of CC, so she can be devastating when a fight breaks out. How to counter: If she shields her carry, just wait for the shield to expire. Both the AD buff and the shield part of it allow her carry to be extremely formidable. Be careful of chasing her, or any allies she may have with her. Her CC is nearly unmatched among supports.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|

Common Partners










As you could guess, this is basically a more advanced way of the example in the previous chapter.
Back to Top

Useful links

astrolia wrote a nice and quick explanation on some BBCoding.

jhoijhoi wrote a very useful blog post on many different ways to use BBCoding.

If you have more suggestions to add in this chapter, don't hesitate and leave a reply or send a PM!
Back to Top

The End!

Well that were pretty much all examples I had. I am not giving all of the code to my examples, though. The reason is simple; I want you to learn something. If you have any follow-up questions or improvements for my examples, please leave a reply or PM me.

I hope this guide has thought you something about using columns, and I also hope you will put your newly acquired knowledge to good use! Good luck, and have fun!
Back to Top

Special Thanks to...

  • jhoijhoi and Matt for their BBCoding guides
  • Kusoku and Taneren for helping me out with the use of columns, back when I started using them
  • Searz, Bloofyre, MeridianPrime, Lameogamer, SirSpankALot, Jpikachu1999, crossfire for all those examples. I know I have not asked for your permission, but I hope you are okay with this.
  • Whoever else I forgot in the list above, hopefully you do not mind I use them here. Since I do not know who made up what, I can not credit you, but if you notice this guide and think "Hey, that is mine" do not hesitate to leave a note and I will gladly credit you for it :)
  • Lugignaf for explaining me how to write [[Volley]] without Code tags
Download the Porofessor App for Windows

League of Legends Champions:

Teamfight Tactics Guide