5,758 Pages

If you're looking for the League of Legends icon League of Legends tutorial, see Tutorial

Introduction

League Client Alpha Tester profileicon
Welcome to this League of Legends Wiki tutorial made by the user Tylobic. In this tutorial, we are going to see the basics of programming on LoLWiki.

The 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 Wikia's VisualEditor, which is useful when you don't know anything about programming, but provides poor coding environment, and can sometimes change parts of the page that weren't intended, in unpredictable ways. I highly recommend 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 put some text in Bold, you need to add 3 apostrophes on each side of the text.

  • '''Some bolded text.''' gives Some bolded text.

To put some text in Italics, you need to add 2 apostrophes on each side of the text.

  • ''Some italics 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)

  • '''''Some bolded italics text.''''' 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 asterisks 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

Becomes

  • 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

To establish a template, you need to encompass it in 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.

  • {{equals}} uses the template equals and display the equals sign  = .
  • {{ci|Diana}} uses the Champion icon template (shortened to ci) and has the argument Diana, it will display an icon of the champion and her name linking to the page. Here it will appear as Diana OriginalSquare Diana.

Syntax is very important to display elements correctly. If an argument is invalid, it may render an error, or not parse at all. You can view the valid template arguments if you select it in visual editor, or check its coding/documentation by going to leagueoflegends.wikia.com/wiki/Template:Whatevertemplate.
You should always review the documentation before utilizing a template in case you need to make adjustments.

Here are some commonly used arguments, ambiguous sections are quoted:

  • "Custom name"
  • link="true/false/path"
  • icononly="true/false"
  • variant="old#"
  • size="#px"
  • possessive=true

If you want to omit a default element of a template, such as an icon or link, leave the argument without input, or write =*none*.

  • {{csl|Karthus|Pentakill|link=*none*|image=*none*|Pentakill Skin}}
    • Pentakill Skin
  • {{ai|Death Lotus|Spin to Win}}
    • Death Lotus Spin to Win

You can even fit templates as arguments.

  • Ex: {{sti|{{as|<armor>}}}}
    • Armor icon armor

List of frequently used templates

Icons

Generally you can add an "s" to the template nickname to adjust into a possessive form, various examples are showcased. In the table below, templates with possessive apostrophe are represented with a *.

Name and format Example
ci (or Champion icon)
{{ci|<Champion>|<Custom name>}}
{{ci|Fizz}}
Fizz OriginalSquare Fizz
{{ci|Garen|The Might of Demacia}}
Garen OriginalSquare The Might of Demacia
cis (or Champion icon *)
{{cis|<Champion>}}
{{cis|Jhin}} basic attacks
Jhin OriginalSquare Jhin's basic attacks
csl (or Champion skin link icon)
{{csl|<Champion>|<Skin>}}
You do not need to enter the champion's name when describing the skin if it's a simple name like "Traditional Sejuani".
{{csl|Senna|True Damage}}
Senna TrueDamageCircle True Damage Senna
{{csl|Dr. Mundo|Mundo Mundo}}
Dr. Mundo MundoMundoCircle Mundo Mundo
ai (or Ability icon)
{{ai|<Ability>|<Champion>|<Custom ability name>}}
{{ai|Ruthless Predator|Renekton}}
Ruthless Predator Ruthless Predator
{{ai|Glacial Fissure|Braum|Icy Ultimate}}
Glacial Fissure Icy Ultimate
ais (or Ability icon *)
{{ais|<Ability>|<Champion>}}
{{ais|Razor Shuriken|Zed}} damage
Razor Shuriken Razor Shuriken's damage
cai (or Champion's ability icon)
{{cai|<Ability>|<Champion>|<Custom ability name>}}
{{cai|Noxious Blast|Cassiopeia}}
Cassiopeia OriginalSquare Cassiopeia's Noxious Blast Noxious Blast
{{cai|Sapling Toss|Maokai}}
Maokai OriginalSquare Maokai's Sapling Toss Sapling Toss
{{cai|Perseverance|Garen|Health regen passive}}
Garen OriginalSquare Garen's Perseverance Health regen passive
cais (or Champion's ability icon *)
{{cais|<Ability>|<Champion>|<Custom ability name>}}
{{cais|Purge|Urgot}} attacks
Urgot OriginalSquare Urgot's Purge Purge's attacks
{{cais|Depth Charge|Nautilus|devastating ult}} AoE damage
Nautilus OriginalSquare Nautilus' Depth Charge devastating ult's AoE damage
ii (or Item icon)
{{ii|<Item>|<Custom name>}}
{{ii|Trinity Force}}
Trinity Force item Trinity Force
{{ii|Frozen Mallet|Icy Hammer}}
Frozen Mallet item Icy Hammer
iis (or Item icon *)
{{iis|<Item>}}
{{iis|Frozen Heart}} aura
Frozen Heart item Frozen Heart's aura
ri (or Rune icon)
{{ri|<Rune>|<Custom name>}}
{{ri|Electrocute}}
Electrocute rune Electrocute
{{ri|Font of Life|Stoneborn Pact 2.0}}
Font of Life rune Stoneborn Pact 2.0
si (or Summoner spell icon)
{{si|<Spell>|<Custom name>}}
{{si|Flash}}
Flash Flash
{{si|Ignite|Fire}}
Ignite Fire
sis (or Summoner spell icon *)
{{sis|<Spell>}}
​​​{{sis|Barrier}} shield
→ ​​​Barrier Barrier's shield
ui (or Unit icon)
{{ui|<Unit>|<Custom name>}}
{{ui|Baron Nashor}}
Baron NashorSquare Baron Nashor
{{ui|Blue Sentinel|Blue Golem}}
Blue SentinelSquare Blue Golem
uis (or Unit icon *)
{{uis|<Unit>}}
{{uis|Raptor}} attacks
RaptorSquare Raptor's attacks
bi (or Buff icon)
{{bi|<Buff>|<Custom name>}}
{{bi|Crest of Cinders}}
Crest of Cinders buff Crest of Cinders
{{bi|Hand of Baron|Baron buff}}
Hand of Baron buff Baron buff
sti (or Stat icon)
{{sti|<Stat>|<Custom name>}}
Case apparent text, capitalization only affects display name.
{{sti|Attack Damage}}
Attack damage icon Attack Damage
{{sti|MR}}
Magic resistance icon MR
{{sti|Ability Power|link=true}}
Ability power icon Ability Power
{{sti|Movement Speed|Gotta go fast|link=true}}
Movement speed icon Gotta go fast
stil (or Stat icon with link)
{{stil|<Stat>}}
{{stil|Armor}}
Armor icon Armor
tip (or Tip icon)
{{tip|<Effect>|<Custom name>}}
There are many icons that can render from this template.
{{tip|Stun}}
Stun icon Stun
{{tip|Marksman}}
Marksman icon Marksman
{{tip|Sleep|Already Dead}}
Sleep icon Already Dead
TFTc (or TFT champion)
{{TFTc|<Champion>|<Text>|<set=N>}}
{{TFTc|Ashe|set=1}}
Ashe OriginalSquare Ashe
{{TFTc|Ashe|set=2}}
Ashe AmethystSquare Ashe
{{TFTc|Ashe|Crystal Maiden|set=2}}
Ashe AmethystSquare Crystal Maiden
TFTt (or TFT trait)
{{TFTt|<Trait>|<Custom name>}}
{{TFTt|Woodland}}
Woodland TFT icon Woodland
{{TFTt|Mage|Multi-Cast Mages}}
Mage TFT icon Multi-Cast Mages
TFTi (or TFT item)
{{TFTi|<Item>|<Custom name>}}
{{TFTi|Infinity Edge}}
Infinity Edge item Infinity Edge
{{TFTi|Luden's Echo|Luden's damage}}
Luden&#039;s Echo item Luden's damage
WRi (or WR item)
{{WRi|<Item>|<Custom name>}}
{{WRi|Awakened Soulstealer}}
Awakened Soulstealer (Wild Rift) item Awakened Soulstealer
{{WRi|Warmog's Armor|Warmog's Regen}}
Warmog&#039;s Armor (Wild Rift) item Warmog's Regen
WRr (or WR rune)
{{WRr|<Item>|<Custom name>}}
{{WRr|Conqueror}}
Conqueror (Wild Rift) rune Conqueror
{{WRr|Pack Hunter|Wolf Gang}}
Pack Hunter (Wild Rift) rune Wolf Gang
LoR
{{LoR|<Card name or Code>|<Custom name>}}
{{LoR|code=01FR024T3}}
Anivia
{{LoR|Lux}}
Lux
{{LoR|Eggnivia|Eater egg}}
Eater egg

Format

Name and format Example
ap (or Ability progression)
{{ap|<FirstValue to LastValue>}}
{{ap|<FirstValue to LastValue NumberOfValues>}}
{{ap|<Value1>|<Value2>|<...>|<Value6>}}
The number of values defaults to 5.
{{ap|70 to 170}}
→ 70 / 95 / 120 / 145 / 170
{{ap|25 to 100 6}}
→ 25 / 40 / 55 / 70 / 85 / 100
{{ap|180 to 120 3}}
→ 180 / 150 / 120
{{ap|75|115|165|230|300}}
→ 75 / 115 / 165 / 230 / 300
pp (or Passive progression)
{{pp|<FirstValue to LastValue>}}
The number of values defaults to 18. For more details and usage, see the template's page.
{{pp|40 to 720}}
40 − 720 (based on level)
as (or Ability scaling)
{{as|<(+ X% stat)>}}
{{as|<(+ X% stat)>|<stat>}}
This is mainly how you make stat text the corresponding color.
{{as|200 energy}}
200 energy
{{as|(+ 30% AP)}}
(+ 30% AP)
{{as|Healthy's AD|AD}}
Healthy's AD
fd (or Format decimal)
{{fd|<Number>}}
{{fd|3.14}}
→ 3.14
{{fd|5.1%}}
→ 5.1%
sbc (or Small bold capitals)
{{sbc|<Text>}}
{{sbc|New Effect:}}
New Effect:
{{sbc|Important information}}
Important information
tt (or Text tooltip)
{{tt|<Text>|<Tooltip>}}
{{tt|Text|Tooltip}}
Text
{{tt|120 - 240|Formula}}
120 - 240
ft (or Flip text)
{{ft|<Element 1>|<Element 2>}}
{{ft|20 + 5 per stacks|20 - 45 (based on stacks)}}
「 20 + 5 per stacks 」「 20 - 45 (based on stacks) 」
Math Operators
{{plus}} {{minus}} {{plusminus}} {{divided by}} {{times}} {{equals}} {{degree}}
(8{{minus}}1){{plusminus}}3{{equals}}10 or 4
→ (8 − 1) ± 3 = 10 or 4
(3{{times}}45{{degree}}){{divided by}}5{{equals}}27{{degree}}
→ (3 × 45°) ÷ 5 = 27°
clr (or Clear)
{{clr}}
This template clears out the zone where you placed the {{clr}}, preventing other elements to pile up.
clrl (or Clear Left)
{{clrl}}
This template clears out the left part of the zone where you placed the {{clrl}}, preventing other elements to pile up.
clrr (or Clear Right)
{{clrr}}
This template clears out the right part of the zone where you placed the {{clrr}}, preventing other elements to pile up.

Wiki links

To link to another page on the wiki, you need to encompass 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

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.

  • [[Monster]]s will create a link to the page Monster but will appear like this: Monsters.

Internet links

To create a link to an Internet page, you need to add only one square bracket on each side of the link. Make sure that the address is prefixed with "http://www." or "https://www."

You can put a name on the link by adding a space just after the text and just before the bracket, then the name you want to display.

  • [https://www.google.com/ Google] 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 the reader to quickly navigate through your page.

Headings are encompassed by the equal signs = at each side of the title, starting with 2, up to 5.

  • A main heading can be created by adding 2 equal signs to each side of the text.
    • ==Main Heading== will display a big heading.
  • A subheading works the same way but with 3 equal signs.
    • ===Subheading=== will display a smaller heading.
  • A sub-subheading works the same way but with 4 equal signs.
    • ====Sub-Subheading==== will display a heading as big as text.
  • A sub-sub-subheading works the same way but with 5 equal signs.
    • =====Sub-Sub-Subheading===== will display a heading smaller than text.

Table of Content

When using a certain number of headings, a Table of Contents (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 Contents by encompassing two underscores _ followed by TOC and two others underscores _: __TOC__. Where you place __TOC__ on the page will represent the position of the Table of Contents on your page. The Table of Content will, by default, appear on the left side of the screen, if you want your Table of Contents to appear on the right side of the page, type {{tocright}}.

Otherwise, if you don't need a Table of Contents or just find it unnecessary on your page, you can type  __NOTOC__ meaning no Table of Contents. This command will simply remove the Table of Contents 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 tag: <tabber>content</tabber>. 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 </tabber>.

Structure of a tabber:

<tabber>
Theme1=
This is where you add the content of the Theme1
|-|Theme2=
Content of Theme2

|-|Theme3=
This is the Theme3's content
</tabber>

will give

This is where you add the content of the Theme1

Content of Theme2

This is the Theme3's content

With concrete elements:

<tabber>
Champions=
* Karthus OriginalSquare Karthus
* Volibear OriginalSquare Volibear
* Lucian OriginalSquare Lucian
* Swain OriginalSquare Swain
* Zyra OriginalSquare Zyra

|-|Items=
* Cull item Cull
* Ancient Coin item Ancient Coin
* Blade of the Ruined King item Blade of the Ruined King
* Guinsoo&#039;s Rageblade item Guinsoo's Rageblade

|-|Spells=

* Barrier Barrier
* Ghost Ghost
* Heal Heal
* Ignite Ignite
* Smite Smite
* Cleanse Cleanse
</tabber>

will give

Tabbers into tabbers

To create tabbers into tabbers you will need to use {{#tag:tabber|{{!}}-{{!}}}} within the <tabber>. The start of the inner tabber is: {{#tag:tabber|, then put the title normally ; to separate {{!}}-{{!}} ; and to end }}. This requires experience with tabbers, do not do it otherwise.

Example of tabber into tabber:

  • Homemade duck liver paté with cranberries
  • Likava bread with pork fat and onions

  • Chicken salad
  • Grilled prawns salad

  • Fried cheese
  • Fried Camembert with cranberries

  • Poppy seed dumblings with butter and powdered sugar
  • Homemade strudel with whipped cream and chocolate sauce

  • Tripe soup
  • Soup of the day

  • Potato "pirohy" with bryndza
  • Beef stew with root vegetables and mashed potatoes

  • Chicken steak
  • Grilled salmon fillet
  • Fried pork

  • Chicken schnitzel, french fries
  • Chicken rissoto
  • Poppy seed dumplings with chocolate sauce

  • Cheese Pizza
  • Hamburger
  • Veggie Burger
  • Chicken Burrito

  • Smoothies
  • Vitamin Water
  • Water

  • Salad Bar
  • Fruit Bar

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

#First element
#Second element
##First element of the second element
##Second element of the second element
#Third element
##First element of the third element
###First element of the first element of the third element
###Second element of the first element of the third element
###Third element of the first element of the third element

Becomes

  1. First element
  2. Second element
    1. First element of the second element
    2. Second element of the second element
  3. Third element
    1. First element of the third element
      1. First element of the first element of the third element
      2. Second element of the first element of the third element
      3. Third element of the first element of the third element

Confirming an edit

Tylobic Confirming an edit

While editing a page you have access to a panel on the right that complements your edit.

At the top, you have the Edit summary which is an area you can fill to indicate what your edit is about. It's a good habit to always leave an edit summary so that other people on the wiki can understand what you changed or why you changed it.

On the top-right, there is also a tick box that you can tick to indicate if your edit is "minor" or not. In practice, a minor edit indicates that you didn't modify a lot (correcting a typo for example). Ticking the "minor edit" box does not actually change anything, it is only there as an indication for other people on the wiki.

Then, you have the Preview, which is a super helpful feature with which you can, as the name suggests, preview your edit. It will show you the page but with your edits. It is a good way to see how your edit looks and if you need to change stuff or not. The preview feature can be used to show the page as a mobile or a computer would. Note that on template pages, the preview usually does not work, because the wiki needs to refresh the code of the template.

Below that, you have some questionably useful buttons: add a photo and add a video. I do not recommand using these.

You also have the category manager, which shows you all the categories a page currently has. Categories are used to classify a page, template, or file in order to organize them, making them easier to find on the long term. You can even categorize a category, potentially creating a "tree" of categories. You can add a category by typing the corresponding name in the "Add category..." text box, and remove a category from the page by clicking the small trashcan that is on the same line as the category.


General Internet Tips

If you ever need to find specific information on a page, you can press Ctrl + F to type what you're looking for. The Ctrl + F 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 Enter 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 Shift. Shift + ← will add one character from the left side of your current selection. Shift + → will add one character from the right side of your current selection. In the same philosophy, Ctrl with the arrows ← ↑ ↓ → move your current selection from one word. Ctrl + ← will move your current selection to one word to the left. Ctrl + → will move your current selection to one word to the right. You can also combine Ctrl and Shift with the arrows ← ↑ ↓ → to add one word to your current selection. Ctrl + Shift + ← will add one word at the left of your selection. Ctrl + Shift + → will add one word at the right of your selection.

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:

  • Ctrl + T will create a new tab
  • Ctrl + Shift + T will restore the most recently closed tab
  • Ctrl + N will create a new window
  • Ctrl + Shift + N will restore the most recently closed window (only on Firefox)
  • Ctrl + W will close the current tab
  • Ctrl + Shift + W will close the current window
  • Hold Ctrl + Tab allow you to navigate throw your tabs
  • Hold Ctrl and Shift + Tab allow you to navigate throw your tabs backwards
  • Ctrl + 1 to 9 move you to tab number 1 to 9
  • Ctrl + Scroll-up or Ctrl + + will zoom in
  • Ctrl + Scroll-down or Ctrl + - will zoom out
  • Ctrl + 0 will restore the zoom to 100%
Community content is available under CC-BY-SA unless otherwise noted.