League of Legends Wiki:LoLWiki Tutorial

Introduction
Welcome to this League of Legends Wiki tutorial made by Tylobic. In this tutorial, we are going to see the basics of programming on LoLWiki.

League of Legends Wiki uses the markup language HTML and Templates. You can code in HTML, but it's actually quite complicated and the Wikia community created Templates to make it easier for everyone to code on the website. With this tutorial, we are going to see the Templates more than HTML language.

On almost every LoLWiki pages, you have the ability to edit a page if you are registered and logged in. The default editor is set to the VisualEditor, which is useful when you don't know anything about programming, but produces poor coding. I highly recommand changing your editor to Source editor. To do so, go to your preferences by clicking here and change your editor to Source editor.

Bold and Italics
To start off, we are going to see Bold and Italics text.
 * To put some text in Bold, you need to add 3 apostrophes on each side of the text.
 * gives Some bolded text.
 * To put some text in Italics, you need to add 2 apostrophes on each side of the text.
 * gives Some italics text.
 * To put some text in Bold and Italics at the same time, you need to add 5 apostrophes on each side of the text (3 for bold, 2 for italics)
 * gives Some bolded italics text.

Bullet Point lists
You can list up your ideas by using an asterisk  at the beginning of a sentence. The more  there are, the more the text will be indented.

* First sentence * Second sentence ** Remark about the second sentence * Third sentence ** Remark about the third sentence *** Remark about the remark about the third sentence

gives


 * First sentence
 * Second sentence
 * Remark about the second sentence
 * Third sentence
 * Remark about the third sentence
 * Remark about the remark about the third sentence

Introduction to templates
Now we are going to talk about the usage of templates. To use a template, you need to use double curly brackets. In the middle of the double curl brackets write the name of the template, and you are good to go. In order to add an argument to a template, you will need to use a pipe divider  to separate your arguments. Some templates require more than one argument.


 * uses the template equals and display the equals sign.
 * uses the tempalte Champion icon (shortened to ci) and has the argument Diana, it will display an icon the of champion and his name linked to his page. Here it will appear as.

List of frequently used templates

 * ci (or Champion icon):
 * cis (or Champion icon with possessive apostrophes):
 * basic attacks
 * cai (or Champion's ability icon):
 * ai (or Ability icon):
 * ais (or Ability icon with possessive apostrophes):
 * damage
 * ii (or Item icon):
 * iis (or Item icon with possessive apostrophes):
 * aura
 * ui (or Unit icon):
 * uis (or Unit icon with possessive apostrophes):
 * attacks
 * si (or Spell icon):
 * sis (or Spell icon with possessive apostrophes):
 * true damage
 * bi (or Buff icon):
 * ri (or Rune icon):
 * mi6 (or Mastery icon Season 2016):
 * mi7 (or Mastery icon Season 2017):
 * tt (or Text tooltip):
 * ap (or Ability progression):
 * as (or Ability scaling):  or
 * fd (or Format decimal):
 * sbc (or Small bold capitals):
 * pp (or Passive progression):  or   or   or
 * pp18 (or Passive progression from level 1 to 18):
 * ft (or Flip text):
 * (81)±310 or 4
 * (345)527
 * clr (or Clear):  or   or
 * Will clear out the zone where you placed the, preventing other elements to pile up.
 * clrl (or Clear Left):  or
 * Will clear out the left part of the zone where you placed the, preventing other elements to pile up.
 * clrr (or Clear Right):  or
 * Will clear out the right part of the zone where you placed the, preventing other elements to pile up.
 * mi7 (or Mastery icon Season 2017):
 * tt (or Text tooltip):
 * ap (or Ability progression):
 * as (or Ability scaling):  or
 * fd (or Format decimal):
 * sbc (or Small bold capitals):
 * pp (or Passive progression):  or   or   or
 * pp18 (or Passive progression from level 1 to 18):
 * ft (or Flip text):
 * (81)±310 or 4
 * (345)527
 * clr (or Clear):  or   or
 * Will clear out the zone where you placed the, preventing other elements to pile up.
 * clrl (or Clear Left):  or
 * Will clear out the left part of the zone where you placed the, preventing other elements to pile up.
 * clrr (or Clear Right):  or
 * Will clear out the right part of the zone where you placed the, preventing other elements to pile up.
 * fd (or Format decimal):
 * sbc (or Small bold capitals):
 * pp (or Passive progression):  or   or   or
 * pp18 (or Passive progression from level 1 to 18):
 * ft (or Flip text):
 * (81)±310 or 4
 * (345)527
 * clr (or Clear):  or   or
 * Will clear out the zone where you placed the, preventing other elements to pile up.
 * clrl (or Clear Left):  or
 * Will clear out the left part of the zone where you placed the, preventing other elements to pile up.
 * clrr (or Clear Right):  or
 * Will clear out the right part of the zone where you placed the, preventing other elements to pile up.
 * ft (or Flip text):
 * (81)±310 or 4
 * (345)527
 * clr (or Clear):  or   or
 * Will clear out the zone where you placed the, preventing other elements to pile up.
 * clrl (or Clear Left):  or
 * Will clear out the left part of the zone where you placed the, preventing other elements to pile up.
 * clrr (or Clear Right):  or
 * Will clear out the right part of the zone where you placed the, preventing other elements to pile up.
 * Will clear out the left part of the zone where you placed the, preventing other elements to pile up.
 * clrr (or Clear Right):  or
 * Will clear out the right part of the zone where you placed the, preventing other elements to pile up.

Wiki links
If you need to send to link to a page, you need to add double square brackets  on each side of the link. You can also rename the link by adding a pipe divider  just after the link text and just before closing the square brackets


 * will create a link to the page Ability power
 * will create a link to the page Attack Damage but will appear like this: Offensive Stat.

When you want to use the plural of an article title (or add any other suffix) for your link, you can add the extra letters directly outside the double square brackets.


 * will create a link to the page Monster but will appear like this: Monsters.

Internet links
If you need to send to link to a Internet page, you need to add only one square bracket on each side of the link. You can put a name on the link but adding a space just after the text and just before the bracket, then the name you want to display.


 * will create a link the page google.com and will appear like this: Google.

Headings
Headings are an effective way to organize your pages, they are simple and quick to use, and allow an user checking on your page to quickly navigate through your page.

Headings are created with equals sign  and each side of the title, starting with 2, up to 5.
 * A main heading can be created by adding 2 equals sign to each side of the text.
 * will display a big heading
 * A subheading works the same way but with 3 equals sign.
 * will display a smaller heading
 * A sub-subheading works the same way but with 4 equals sign.
 * will display a heading as big as text
 * A sub-sub-subheading works the same way but with 5 equals sign.
 * will display a heading smaller than text

Table of Content
When using a certain number of headings, a Table of Content (TOC) is going to appear automatically on your page, in most cases at the beginning of your page.

You can control the position of the Table of Content by typing two underscores  followed by   and two others underscores  :. Where you placed  on the page will represent the position of the Table of Content on your page. The Table of Content will, by default, appear on the left side of the screen, if you want your Table of Content to appear on the right side of the page, type.

Otherwise, if you don't need a Table of Content or just find it unnecessary on your page, you can type the following at any point of the page just like the previous command with underscores:  meaning no Table of Content. This command will simply remove the Table of Content from your page.

Tabbers
Tabbers are used to display informations divided into tabs. The user can only see one tab at a time. This is very useful to create compact pages, which almost doesn't require the user to scroll down. You can even create tabbers into tabbers, but it's harder to code and it's going to be harder to use for the user, use with caution.

Tabbers are not created with a template but with a HTML-like command:. Here the content is, first, a tabber subtitle followed with the equals sign, then write want you want to say, and when you're done, close the current tabber with a pipe   followed with a dash   and another pipe. After you've closed the current tabber you can repeat the operation: new tabber subtitle, content, close, until you're done with your whole tabber. To close the tabber write the following.

To create tabbers into tabbers you will need to use  within the. The start of the inner tabber is:, then put the title normally ; to separate   ; and to end. This requires experience with tabbers, don't do it otherwise.

Structure of a tabber:

Theme1= This is where you add the content of the Theme1

|-|Theme2= Content of Theme2

|-|Theme3= This is the Theme3's content

will give

Theme1= This is where you add the content of the Theme1

Content of Theme2
 * -|Theme2=

This is the Theme3's content
 * -|Theme3=

With concrete elements:

Champions= * *  *  *  *

|-|Items= * *  *  *

|-|Spells= * *  *  *  *  *

will give

Champions=


 * -|Items=


 * -|Spells=

Example of tabber into tabber, try to navigate through it:

Menu A=


 * -|Menu B=


 * -|Menu C=

Indenting
You can "indent" your text by using  at the beginning of some text. One  represents one "indent", two   represents two "indents", three   represents three "indents", etc. ...

::Some more indented text :::Some even more indented text

gives


 * Some indented text
 * Some more indented text
 * Some even more indented text

Numbered lists
You can do the same thing as with Bullet Point lists but with numbers, by using the hash symbol  at the beginning of a sentence. The more  there are, the more the text will be indented.


 * 1) First element
 * 2) Second element
 * 3) First element of the second element
 * 4) Second element of the second element
 * 5) Third element
 * 6) First element of the third element
 * 7) First element of the first element of the third element
 * 8) Second element of the first element of the third element
 * 9) Third element of the first element of the third element

gives


 * 1) First element
 * 2) Second element
 * 3) First element of the second element
 * 4) Second element of the second element
 * 5) Third element
 * 6) First element of the third element
 * 7) First element of the first element of the third element
 * 8) Second element of the first element of the third element
 * 9) Third element of the first element of the third element

General Internet Tips
If you ever need to find something on a page, a specific information, you can press  and they type what you're looking for. The  tool can automatically bring you to the first occurrence of the word, and then, to navigate to the other occurrence of the word you will have to press   for each occurrence of the word.

If you're editing text, and you need to select one or more character, you can do so by using the arrows  and. will add one character from the left side of your current selection. will add one character from the right side of your current selection. In the same philosophy,  with the arrows   move your current selection from one word. will move your current selection to one word to the left. will move your current selection to one word to the right. You can also combine  and   with the arrows   to add one word to your current selection. will add one word at the left of your selection. will add one word at the right of your selection.

Double-click will select the word placed under your mouse. Triple-click will select the paragraph placed under your mouse.

Tab and Window
While you're not in a text zone, you will be able to execute these shortcuts:
 * will create a new tab
 * will restore the most recently closed tab
 * will create a new window
 * will restore the most recently closed window (only on Firefox)
 * will close the current tab
 * will close the current window
 * allow you to navigate throw your tabs
 * allow you to navigate throw your tabs backwards
 * move you to tab number 1 to 9
 * or  will zoom in
 * or  will zoom out
 * will restore the zoom to 100%