Introduction

LCA 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. 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 the of champion and her name linking to the page. Here it will appear as DianaSquare 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.

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 [S|L]
  • {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.

  • cis (or Champion icon with possessive apostrophes): {{cis|<Champion>}}
  • 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." This does not apply to redundant names.
  • ais (or Ability icon with possessive apostrophes): {{ais|<Ability>|<Champion>}}
  • sis (or Spell icon with possessive apostrophes): {{sis|<Spell>}}
  • sti (or Stat icon): {{sti|<stat>|<Custom name>}}
    Case apparent text, capitalization only affects display name. To enable link, use stil.
  • uis (or Unit icon with possessive apostrophes): {{uis|<Unit>}}

Format

  • tt (or Text tooltip): {{tt|<Text>|<Tooltip>}}
    • Text
    • 3 - 2.1
  • ap (or Ability progression): {{ap|<Value1>|<Value2>|<...>|<Value6>}}
    • 30 / 40 / 50
    • 22 / 21 / 20 / 19 / 18
    • 2 / 1.8 / 1.6 / 1.4 / 1.2
    • 60 / 85 / 110 / 135 / 160 / 185
  • as (or Ability scaling): {{as|<(+ X% stat)>}} or {{as|<(+ X% stat)>|<stat>}}
    This is mainly how you make stat text the corresponding color.
    • (+ 30% AP)
    • 200 energy
    • Healthy's AD
  • fd (or Format decimal): {{fd|<Number>}}
    • 3.14
    • 5.1%
  • sbc (or Small bold capitals): {{sbc|<Text>}}
    • New Effect:
    • Important information
  • pp (or Passive progression): {{pp|<Size>|<Value1>|<Value2>|<...>|<ValueN>|<Level1>|<Level2>|<...>|<LevelN>}} or {{pp|Size|type=X|Value1|...|ValueN|Level1|...|LevelN}} or {{pp|Size|formula=X|Value1|...|ValueN|Level1|...|LevelN}} or {{pp|Size|color=X|Value1|...|ValueN|Level1|...|LevelN}}
    • ​​​​​​​30 / 40 / 50 / 60
    • 10 - 24 (based on level)
    • 8% / 16% / 24%
    • 10 / 11 / 12 / 13 / 14
    • 30% / 35% / 40%
  • pp18 (or Passive progression from level 1 to 18): {{pp18|<Val1>|<Val2>|<...>|<Val17>|<Val18>}}
    • ​​​​​​​ 20 - 37 (based on level).
  • ft (or Flip text): {{ft|<Element 1>|<Element 2>}}
    • ​​​​​​​ 「 20 + 5 per stacks 」「 25 / 30 / 35 / 40 / 45 」
  • clr (or Clear): {{clr}} or {{clear}} or {{clearBoth}}
    • Will clear out the zone where you placed the {{clr}}, preventing other elements to pile up.
  • clrl (or Clear Left): {{clrl}} or {{clearLeft}}
    • Will clear out the left part of the zone where you placed the {{clrl}}, preventing other elements to pile up.
  • clrr (or Clear Right): {{clrr}} or {{clearRight}}Will clear 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, ydou 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>.

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, don't do it otherwise.

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=
* KarthusSquare Karthus
* VolibearSquare Volibear
* LucianSquare Lucian
* SwainSquare Swain
* ZyraSquare 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

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

  • 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

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%