League of Legends BBCode Guide

Learning to BBCode

This MobaFire Wiki Article is aimed towards users who wish to learn more about the coding language used by MobaFire (how to bold text, or how to mask URLs), or those who want to make a visually gratifying guide, but lack the knowledge to do so. Here you will find examples of how to code to help you get started in your guide making endeavours and how to keep up with general coding for use in the forums.

Here you will learn:

How to format your work (columns, lists, font/colour changes) How to make your guide/posts attractive (including: images, videos, coding) How to make a fantastic guide/interesting contribution to the forums

Check out jhoijhoi's Guide to Making a Guide for more coding tricks, chapter templates and tips to making a good guide. Further guide writing articles: Ten Commandments of Guide Writing and Guide Basics.

If you're looking to learn table coding and advanced techniques, make sure to check out Katasandra's Table Coding Guide!

Text Effects

Many of you will have noticed the above bar when commenting on MobaFire or writing guides. You can use the in-built tools to do pretty much 90% of what this guide teaches. When you "Quick Reply" to something, you are not presented with the above toolbar; it is up to you if you want to learn the behind-the-scenes coding.

Simple Text Effects

---

b, i, u, s - Creates bold, italic, underlined, or strike-through text. To achieve these effects, simply add the desired letter before the text you would like to change, as seen to the right. Emphasis is used to add distinction between objects and plain text. We want the reader to pay attention at a particular idea, or thought.

Code: [b]Bold[/b] [i]Italics[/i] [u]Underlined[/u] [s]Strikethrough[/s]

Effects: Bold Italics Underlined Strikethrough

Optional Text Effects

---

Color, SuperScript, SubScript - Additional text effects can help convey information or create style within a paragraph. Use colour sparingly - consider those annoying flashing advertisments that scream you're the 1 trillionth visitor; these ads annoy you, just the way overusing colour would annoy a reader.

Code: [color=red]Red[/color] [color=blue]Blue[/color] [color=green]Green[/color] [sup]Super[/sup]Script [sub]Sub[/sub]Script

Effects: Red Blue Green SuperScript SubScript

Additional Text Effects

---

Headings - Like colour, use these sparingly. There are useful for breaking up text to indicate a change in direction within a chapter, or for title purposes. Each heading automatically adds an enter space after it.

Code: [h1]Heading 1[/h1] [h2]Heading 2[/h2] [h3]And so on...[/h3]

Effects: Heading 1

URL Masking

---

URL Masking is great. Long strings of meaningless gibberish isn't fun to look at. So instead of
https://www.mobafire.com/league-of-legends/build/making-a-guide-101506 we want to write Making a Guide.

Code: [url=https://www.mobafire.com/league-of-legends/build/making-a-guide-101506]Making a Guide[/url]

Effects: Making a Guide

You can also use URL masking around more than just text; images can be hyperlinked to your desired page as well! To direct your viewers to a particular URL when they click a given image, you can use the same technique with URL tags around the image.

Code: [url=https://www.mobafire.com/league-of-legends/build/making-a-guide-101506][img=https://www.mobafire.com/images/avatars/karthus-classic.png width=80][/url]

Effects:

DataBase Wiki Coding

Linking to MobaFire's DataBase

---

The most common form of code you will see used on MobaFire are links to the database. This sort of wiki is easy to implement. Add double square brackets to any item, champion, ability, summoner spell, or rune to achieve this effect. Capitalization isn't necessary.

Code: [[doran's blade]] [[ashe]] [[volley]] [[flash]] [[lethal tempo]]

Effects: Doran's Blade Ashe Volley Flash Lethal Tempo

If two database entries have the same name, there is a way to fix that problem.

Code: [[Eclipse]] [wiki ability=eclipse] OR [[ability eclipse]]

Effects: Eclipse Eclipse Eclipse

Icon-Only Links

---

The second most common form of code you will see used on MobaFire are varying sizes of wiki icons. These can be used to start a paragraph, indicate a champion/item, and more. The possibilities are endless.

Code: [icon=zoe size=50] [icon=trinity force size=50] [icon=arcane comet size=50]

Effects:

If two database entries have the same name, there is a way to fix that problem.

Code: [icon=eclipse size=50] [icon ability=eclipse size=50] OR [icon=eclipse ability size=50]

Effects:

Pulling Data from Your CheatSheet

---

You can now embed build information in any comment on the site, and in your build description. You can do this by using the separate builder tools to get a link to a custom setup, or you can use it in your description to automatically pull build information down into the description without typing it out again.

Code: [items] [runes] [abilities]

Planner Tools Runes

[items=46-294-169] (you can find the ID of any item in its link, e.g. going to Infinity Edge's page you'll find 46 in its link)






[abilities=qwqwqwqwqwerereree champion=warwick]



For champion names with a space, use quotation marks around the champion name.

[abilities=qweqqrqwqwrwweeree champion="lee sin"]

Formatting Techniques

Line Dividers/Separators/Rules

---

Throughout this guide you will have noticed the white line underneath the titles for each section. I call these "line dividers", they can also be known as "rules" or "separators". Use these to separate paragraphs of text when necessary, as they can act as a chapter break. Feel free to use the ones I (jhoijhoi) created for my own personal use; they're the coloured ones below.

Code: ---- OR [rule]

Effects: OR

You can also use the [table] code to create a [rule] with a custom color using basic color words (e.g. red, yellow, green) or HTML color codes (e.g. #ff0000, #ffffff).


Effect:

Indentation

---

The ability to "indent" or in other words "tab" paragraphs. Indents "stack", so using multiple indents will push the text further and further to the right. If you do not close off an indent tag, it produces a cascading effect, as seen below.

Code:
[indent]Format: Having a good format to follow, and not having everything lying around is key to a good guide, it makes your guide easier to follow through. Good formatting includes using coding like Columns, Lists, and Font Effects to emphasise or draw attention to important aspects of your guide.[/indent]

Effect:

Code: [indent][icon=ashe size=50] [indent][icon=syndra size=50] [indent][icon=skarner size=50][/indent][/indent][/indent]

Effect:

Lists

---

Lists can be used to... list things. After the opening list tag, you can add as many bullets as you like before closing the list.

Code: [list] [*] Bullet 1 [*] Bullet 2 [*] Bullet 3 [/list]

Effects: Bullet 1 Bullet 2 Bullet 3

To make a numbered list, simply add "=1" to the end of the word "list" in the coding tag.

Code: [list=1] [*] Number 1 [*] Number 2 [*] Number 3 [/list]

Effects: Number 1 Number 2 Number 3

Columns

---

Columns can be used to align text or images next to each other. Splitting your guide or forum post with columns allows for more control of how you present your content. Do note that columns don't come with any inherent padding (there's no space between them), so you'll need to create that extra space if you want your columns to be separated. The easiest way to do this is by creating an empty column with a fixed width (usually something small, between 10 and 30 pixels should do).

Example:

Effect:

This is one column.

This is another.

And last one...

For More Columns Information...

---

For more information and a thorough in-depth explanation on Columns and examples of column usage, please visit IceCreamy's: How to Use Columns Guide or Astrolia's Columns Guide.

Tables

---

Tables are a lot like columns in that they allow you to control where text and images are shown. Tables are a little more complicated than columns, but they also offer more tools to customize how your content is displayed.

The basic components of a table are the following tags:
[table] - The opening tag, creates a new table
[tr] - Creates a new row of the table
[th] - Creates a header cell (optional, only if you want a special row at the top)
[td] - Creates a new cell. Your content goes in each of these cells.
[/td] - Closes the current cell.
[/th] - Closes the current header cell.
[/tr] - Closes the current row.
[/table] - Closes the table.

When using tables, be very sure to close all of your tags. If you leave open tags, you may see that your guide or post repeats, cuts off or is positioned strangely. If you notice something strange with your guide, always check to see if you missed any closing tags.

There are lots of other interesting parameters for tables that can be used to modify them. Two of the most common parameters that I (PsiGuard) use all the time are width and padding. The width parameter determines how wide the cells in a given column will be (or how large the entire table will be). For example, you can create a cell that's 100 pixels wide like this: [td width=100] or [td width="100px"]. You can also adjust the width of cells based on a percentage of the total width of the table. e.g. [td width=25%]

By adding padding (e.g. [td padding=10]) you create extra space around a given cell so its content isn't too close to adjacent cells' content. Just remember that the padding will be added to all sides (top, bottom, left, right) of your cell, so adding 10 pixels of padding will add 20 pixels of horizontal space to that cell. This can affect how much total space a table will take up in a guide or forum post, especially if you have padding on all your cells.

Example:

Effect:

Row 1, Cell 1	Row 1, Cell 2	Row 1, Cell 3 (it's wider!)	Row 1, Cell 4	Row 1, Cell 5
Row 2, Cell 1	Row 2, Cell 2	Row 2, Cell 3 (it's wider!)	Row 2, Cell 4	Row 2, Cell 5

For More Tables Information...

---

For more information and a thorough in-depth explanation on Tables and examples of table usage, please visit Katasandra's Table Coding Guide or Foxy Riven's Tables Guide! .

Other BBCode Tools

randomize: Create a list of items, each of which will show at random one at a time on page load. This is mainly intended for signatures, so that you can have various signatures that change randomly. Example:

[randomize]
[ri] Item 1
[ri] Item 2
[ri] Item 3
[/randomize]

---

floating: Floating images allows you to easily position an image to the left or right of your text or other content. You can float any image or icon to the left or right by adding "float=left" or "float=right" to the bbcode. Example: [img=/images/something.png float=right] or [icon=Nunu float=left]. When you want to drop below the floated item early you can use the clear tag.

clear: This is used in conjunction with the floating feature. If you float an image to the left or right of some text and then want to jump below the image just put [clear].

---

anchor: Set a position in your text that can be linked directly to. This is best used next to h1/h2 headers in your guide in combination with the "goto" tag to create a table of contents. [anchor=nameofanchor]. You can then link to your page adding #nameofanchor to the end of the URL, allowing you to link directly to a specific section of your guide.

goto: Similar to URL but this links to a specific anchor you created elsewhere in the page. For example, if you had [anchor=conclusion] near the end of your guide, you could put [goto=conclusion]Conclusion[/goto] at the top to link directly to the bottom without reloading the page.

---

spoilers: Spoilers are boxes that can expand on click. They are useful for containing a large amount of text or an image. Simply wrap the [spoiler] tags around the text or image you wish to hide. If you want to name your spoiler you can use code [spoiler=SPOILER NAME HERE][/spoiler]

---

Webm: To embed a video using webm, use the following code:

[webm url=https://giant.gfycat.com/BlondFlawlessHippopotamus.webm]


Some possible modifications:
[webm url=https://giant.gfycat.com/BlondFlawlessHippopotamus.webm autoplay=on loop=on width=550]

Useful Resources

Making a Guide by jhoijhoi
A Table Coding Guide by Katasandra
Responsive columns by Katasandra
Foxy's Tables Guide - Grasping the Table Coding Basics by Foxy Riven
How to Use Columns by IceCreamy
10 Second Guide to Making a Custom Table of Contents by astrolia