Mobafire League of Legends Build Guides Mobafire League of Legends Build Guides

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


Please read jhoijhoi's Guide to Making a Guide for the original presentation. The original has many more tips and tricks to making a good guide and plenty of templates to ensure aesthetic appeal. Further guide writing articles: Ten Commandments of Guide Writing and Guide Basics .


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 jibberish isn't fun to look at. So instead of http://www.mobafire.com/league-of-legends/build/ashes-to-ashes-67331, we want to write Ashe's to Ashes.
Code:
[url=http://www.mobafire.com /league-of-legends/ build/ashes-to-ashes -67331]Ashe's to Ashes[/url]
Effects:
Ashe's to Ashes


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, rune or mastery to achieve this effect. Capitalisation isn't necessary.
Code:
[[doran's blade]] [[ashe]] [[volley]] [[flash]] [[executioner]]
Effects:
Doran's Blade
Ashe
Volley
Flash
Executioner
If a mastery and an ability have the same name, there is a way to fix that problem. Normally, it would show the ability.
Code:
[[Perseverance]] [wiki mastery=Perseverance]
Effects:
Perseverance
Perseverance


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=shen size=50] [icon=ezreal size=50] [icon=xin zhao size=50]
Effects:


If a mastery and an ability have the same name, there is a way to fix that problem. Normally, it would show the ability.
Code:
[[Perseverance]] [wiki mastery=Perseverance]
Effects:
Perseverance
Perseverance

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:
[masteries] [runes] [items] [abilities]
Planner Tools
(click links)
Items
Masteries
Runes

[masteries=http://www.mobafire.com/league-of-legends/mastery-tree-planner#&tree1=3-1-0-0-4-0-0-1-3-0-0-0-0-0&tree2=0-0-1-3-0-4-0-1-3-4-1-1-0-0&tree3=0-0-0-0-0-0-0-0-0-0-0-0-0-0-0]

Masteries
3/5
1/5
4/1
1/1
3/1
1/1
3/1
4/5
1/1
3/1
4/1
1/5
1/5


[runes=http://www.mobafire.com/league-of-legends/rune-page-planner#&rune=275:9-268:9-272:9-338:3]

Runes

Greater Mark of Mana
9

Greater Seal of Mana Regeneration
9

Greater Glyph of Mana Regeneration
9

Greater Quintessence of Ability Power
3


[abilities=qwqwqwqwqwerereree champion=warwick]

Ability Sequence
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18


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









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:
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.

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


Lists



Lists can be used to... list things. I personally don't use lists often, but they can have their uses. To make a numbered list, simply add "=1" to the end of the word "list" in the coding tag.
Code:
[list] [*] Information Here [*] Information Here [*] Information Here[/list]
Effects:
  • Information Here
  • Information Here
  • Information Here


Columns



I have used multiple columns throughout this guide, and to be honest, it's the most fiddly formatting technique due to MobaFire's lack of space between columns. You need to manually create your own space between columns, either via invisible text (<highlight that blank space), indents, or using the width parameter.
Code:
[color=black]Invisible text![/color]
Effects:
I'm AMAZING!


Columns Example: Width Parameters



Code:
[columns] [nextcol width=250]This is one column. [nextcol width=30] [nextcol width=250]This is another. [nextcol width=30] [nextcol width=250]And last one...[/columns]


Effect:
This is one column. This is another. And last one...


Columns Example: Indent



Code:
[columns]This is one column. [nextcol][indent]This is another.[/indent] [nextcol][indent]And last one...[/indent][/columns]


Effect:
This is one column.
This is another.
And last one...


Columns Example: Invisible Text



Code:
[columns][color=black]SPACESPACE[/color] [nextcol]This is one column. [nextcol][color=black]SPACESPACE[/color] [nextcol]This is another. [nextcol][color=black]SPACESPACE[/color] [nextcol]And last one...[/columns]


Effect:
SPACESPACE This is one column. SPACESPACE This is another. SPACESPACE 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. If you ever wonder how someone has coded their work, try highlighting it and seeing if they've used invisible text, indenting or width parameters :)


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]


Spoiler: Click to view



Spoiler #1




Image URLs: In order to have the image be clickable and to redirect you to a certain page, just use the URL tag in the following format:

[url=INSERT URL HERE][img]INSERT IMAGE URL HERE[/img][/url]

For example, if I wanted the image to redirect to http://www.mobafire.com/league-of-legends/build/making-a-guide-101506 via this image http://i1106.photobucket.com/albums/h380/thejhoijhoi/guidemaking.png all I would need to type is:

[url=http://www.mobafire.com/league-of-legends/build/making-a-guide-101506][img]http://i1106.photobucket.com/albums/h380/thejhoijhoi/guidemaking.png[/img][/url]

Which gives me a clickable image:





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

[webm url=http://news.cdn.leagueoflegends.com/public/images/articles/2015/may_2015/SGLAN/Videos/Star_Guardian_Lux_R.webm]




Some possible modifications:
[webm url=http://news.cdn.leagueoflegends.com/public/images/articles/2015/may_2015/SGLAN/Videos/Star_Guardian_Lux_R.webm autoplay=on loop=on width=550]


Quick Comment

You need to log in before commenting.

[-] Collapse All Comments

Sort Comments By
1
[-]
DariusOneTrick | April 20, 2017 4:16am
why is the masteries builder thing broken?
1
[-]
BEASTELELE | April 14, 2017 4:23am
When I write an image code it says its a blacklisted text and i cant save...
1
[-]
SnowBinder | March 16, 2017 8:38am
Nice tut :)
1
[-]
Peeerooo (2) | March 12, 2017 11:24am
It's a wonderful guide. But I didn't know it'd take so much to make a few images appear make sure they aligned correctly.
I hope I give this information good use. Thanks for the tutorial. Or something. <3
1
[-]
Sinister By Choice | March 2, 2017 10:35am
nice work <3
1
[-]
scrubbunny | December 25, 2016 11:14am
too hard for me...
1
[-]
Paul945xD (3) | November 14, 2016 10:41am
Hmm... how do I include a few pages of runes into the text? When I writerunes from main build appear, but I want to make a few of them to explain them furthermore...Link here
1
[-]
weewei (1) | October 17, 2016 5:17pm
how do i make my own dividers? like i want it to be neon green, but i don't know how to make my own x)
1
[-]
Toxic Vibe (4) | June 9, 2016 5:35am
Tried posting my edits to the matchup & more to my guide so many times but it never works! I'm not sure why! I even tried it on different devices. -.- I've been stuck on this issue for so long already! -.- http://www.mobafire.com/league-of-legends/build/-448073?revision&nocache
1
[-]
jokersprank (31) | June 9, 2016 2:47pm
Which browser do you use and did you clear your browser's cache?
1
[-]
Toxic Vibe (4) | June 9, 2016 10:51pm
I use Chrome. I cleared my browsers cache so many times and it just doesn't work. When I press publish or save, nothing comes up and it's not saved or published. :/ Like it doesn't show this: http://puu.sh/pmsjo.png
1
[-]
Emikadon (216) | June 9, 2016 9:29am
Did you first save, and then publish it afterwards?
1
[-]
Toxic Vibe (4) | June 9, 2016 10:53pm
The saved button doesn't work either. I firstly pressed 'publish'. I did so many combos of each but it doesn't work! 0.0 It doesn't show this: http://puu.sh/pmsjo.png
1
[-]
Cachinnation | June 7, 2016 5:28am
Mercury threads
0
[-]
TheSilverDust (45) | June 7, 2016 6:19am
When Vapora comments with a dank meme.
1
[-]
Vapora Dark (503) | June 7, 2016 7:29am
?
1
[-]
Cachinnation | June 7, 2016 4:01am
Loading Comments...
Load More Comments