Fortnite Esports Wiki

In some regions the distribution of power ranking points is slower, we ask for your patience in this regard. All players will receive their points before the start of the C2S8 competitive season.

READ MORE

Fortnite Esports Wiki
Advertisement
Fortnite Esports Wiki

Overview

In part 1, we explored basic wiki syntax: links, formatting, lists, and charts. In part 2, we're going to take it one step further and look at some more advanced things you will come across when editing Fortnite Esports Wiki. Just like in part 1, each concept that we cover will be accompanied by a task for you to complete so that you can make sure you understand what's going on.


Task 6: Intermediate Tables

For advanced help with tables, see here.

Creating basic tables is pretty straightforward, but there's a lot more you can do with them than just what we did in task 5. Look at this example.

Colspan and Rowspan

Explanation Input Output
Maybe you want to show your favorite teams from different regions like in the example. How do you "merge" the boxes like that? The answer is "rowspan."

Normally, you would write:

|First Column

to put "First Column" into a cell. But instead, you can write:

|colspan=5|First Column

and it will merge the next 5 cells together and put "First Column" in it. You can also do "rowspan" to merge cells vertically. Here's an example input and output:

{|class="wikitable"
!Column 1
!Column 2
!Column 3
|-
|rowspan=3|First Column
|colspan=2|Rest of the first row
|-
|colspan=2|Rest of the second row
|-
|colspan=2|Rest of the third row
|-
|Row 4 Col 1
|Row 4 Col 2
|Row 4 Col 3
|}
Column 1 Column 2 Column 3
First Column Rest of the first row
Rest of the second row
Rest of the third row
Row 4 Col 1 Row 4 Col 2 Row 4 Col 3

Alignment and Cell Width

You can write align="left", align="center", or align="right". Left-aligned text is the default in "normal" rows, and center-aligned text is the default in title rows (rows that start with a !).

This is column 1 This is column 2 This is column 3
left center right

You can also write width=Xpx where X is the number of pixels wide you want the cell to be. For example:

Column 1 Column 2
Text in column 1 Text in column 2
The text for the above is:
{|class="wikitable"
! width=200px|Column 1
! width=500px|Column 2
|-
|Text in column 1
|Text in column 2
You can also specify the height of an entire row on the first cell of that row.
The code for this cell is:
|height=50px|The code for this cell is:

Putting it All Together

Make a page like this one, showing which of your favorite champions can be played in which of 2 positions of your choice. Notice that you can combine multiple style descriptions in the same row, for example:

|colspan=2 style="text-align:center;background-color:{{color|green}};"|Yes

Note that we use variables for commonly-used inline styles, so instead of specifying a hex code you write as the background color (or or ), and the correct variable will be chosen. This does not work for all possible inputs however, as not all color variables have variables assigned to them.

Task 7: Images

Images are great to include! They make pages a lot friendlier to read. But how do you include an image in a page? There's a great help page about it here, and we'll explain the basics here, too. Your goal will be to make a page like this one listing your favorite champion's skins, with their icon in the upper-right corner.

Uploading Images

You won't have to do this now, but bookmark this page. If you lose it, you can find it in the sidebar, underneath Tools. If you ever need to upload a file, simply go to that page, click "Browse," find the file on your computer and select it, and then type an appropriate file name where it says "Destination Filename." An appropriate filename is one that makes it easy to find the image in question.

Examples of acceptable filenames:

Inserting Images

The most basic way to insert an image is very similar to inserting linked text:

Input Equivalent Input Output
[[Image:Cloud9logo square.png]]
[[File:Cloud9logo square.png]]
Cloud9logo square.png

However, there's a lot more you can do!

Input Output Description
[[Image:Cloud9logo square.png|This is the Cloud9 logo.|thumb]]

This is the Cloud9 logo.

. For a caption to show, you must also use the |thumb argument.
[[Image:Cloud9logo square.png|Click the image!|thumb|link=Cloud9]]

Click the image!

By default, click on an image will take you to the file page for that image. However, you can change what page it links to.
[[Image:Cloud9logo square.png|30px]]
Cloud9logo square.png You can adjust the width of an image, and it will scale down to be that width.
[[Image:Cloud9logo square.png|x30px]]
Cloud9logo square.png You can also adjust the height of an image, and it will scale down to be that height.
[[Image:Cloud9logo square.png|100x50px]]
Cloud9logo square.png Specifying both dimensions will not skew the image, but will instead make sure that the image fits in a rectangle of the size you specified.
[[Image:SonaSquare.png|30px|right]]
Cloud9logo square.png
right, the image will align right. If your image is just on the page and not in a table, it'll move all the way to the right of the page.
[[Image:Cloud9logo square.png|30px|center]]
Cloud9logo square.png
Or center
[[Image:SonaSquare.png|30px|left]]
Cloud9logo square.png
And you can specify align left.

<br clear="all">

You may have seen the <br> tag around -- it's a common HTML command that creates a new line and is used in places where you can't necessarily add a new line by pressing enter twice for some reason. "Br" is short for "break" or "line break."

As you may know, when adding images to pages, it's very easy for the formatting to get messed up. One command that comes in handy is <br clear="all">. Similar to <br>, <br clear="all"> forces the next bit of text to start below the image. If you only want to clear the left column or the right column, you may use <br clear="left"> or <br clear="right">.

Task 8: Indexing Page

The rest of the tutorial is for your reference. If you want to practice the topics that are covered, you are absolutely welcome to, but this is the end of the guided exercises. As your last task, make an indexing page like this one with your own pages linked in the Example column. If you apply to join our wiki department, you will be asked to include a link to your indexing page as part of your application. If you have any feedback on the tutorial, please contact us!


Advertisement