League of Legends Wiki

Comments13

LoLWiki Tutorial (Basic)

Tylobic May 21, 2016 User blog:Tylobic

Ad blocker interference detected!


Wikia is a free-to-use site that makes money from advertising. We have a modified experience for viewers using ad blockers

Wikia is not accessible if you’ve made further modifications. Remove the custom ad blocker rule(s) and the page will load as expected.

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 is using the programming language HTML and Templates. So 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. Basically here 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 a registered and logged in. Your 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.
    • '''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 * 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 {{ }} (Alt Gr + ' and Alt Gr + = on Windows). 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 | (Alt Gr + - on Windows) 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 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 Diana Diana.

List of frequently used templates

  • ci (or Champion icon): {{ci|<Champion>|<Custom name>}}
  • cis (or Champion icon with possessive apostrophes): {{cis|<Champion>}}
  • cai (or Champion's ability icon): {{cai|<Ability>|<Champion>|<Custom ability name>}}
  • ai (or Ability icon): {{ai|<Ability>|<Champion>|<Custom ability name>}}
  • ais (or Ability icon with possessive apostrophes): {{ais|<Ability>|<Champion>}}
  • ii (or Item icon): {{ii|<Item>|<Custom name>}}
  • iis (or Item icon with possessive apostrophes): {{iis|<Item>}}
  • iio (or Item icon-off): {{iio|<Item>|<Number>}}
    • Essence Reaver item
    • Health Potion item5
  • moi (or Monster icon): {{moi|<Monster>|<Custom name>}}
  • mois (or Monster icon with possessive apostrophes): {{mois|<Monster>}}
  • si (or Spell icon): {{si|<Spell>|<Custom name>}}
  • sis (or Spell icon with possessive apostrophes): {{sis|<Spell>}}
  • bi (or Buff icon): {{bi|<Buff>|<Custom name>}}
  • mi6 (or Mastery icon Season 2016): {{mi6|<Mastery>|<Custom name>}}
  • 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>}}
    • (+ 30% AP)
    • 200 energy
    • Healthy's AD
  • fd (or Format decimal): {{fd|<Number>}}
    • 3.14
    • 5.1%
  • 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 」
  • Math Operators: {{plus}} {{minus}} {{plusminus}} {{divided by}} {{times}} {{equals}} {{degree}}
    • (8 − 1) ± 3 = 10 or 4
    • (3 × 45°) ÷ 5 = 27°
  • 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

If you need to send to link to a page, you need to add double square brackets [[ ]] (Alt Gr + ( and Alt Gr + ) on Windows) on each side of the link. You can also rename the link by adding a pipe divider | (Alt Gr + - on Windows) 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

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.

  • [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 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.
    • ==Main Heading== will display a big heading
  • A subheading works the same way but with 3 equals sign.
    • ===Subheading=== will display a smaller heading
  • A sub-subheading works the same way but with 4 equals sign.
    • ====Sub-Subheading==== will display a heading as big as text
  • A sub-sub-subheading works the same way but with 5 equals sign.
    • =====Sub-Sub-Subheading===== 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 TOC and two others underscores _: __TOC__. Where you placed __TOC__ on the page will represent the position of the Table of Content on your page.

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: __NOTOC__ 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: <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 subtible, 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=
*{{ci|Karthus}}
*{{ci|Volibear}}
*{{ci|Lucian}}
*{{ci|Swain}}
*{{ci|Zyra}}
|-|
Items=
*{{ii|Cull}}
*{{ii|Ancient Coin}}
*{{ii|Blade of the Ruined King}}
*{{ii|Guinsoo's Rageblade}}
|-|
Spells=
*{{si|Barrier}}
*{{si|Ghost}}
*{{si|Heal}}
*{{si|Ignite}}
*{{si|Smite}}
*{{si|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 # (Alt Gr + " on Windows) 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
gives

  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 something on a page, a specific information, you can press Ctrl + F and they type what you're looking for. The Ctrl + F tool can automatically bring you to the first occurence of the word, and then, to navigate to the other occurence of the word you will have to press Enter for each occurence 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.

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%

Also on Fandom

Random Wiki