FANDOM


This page is a guide for the source editor and wikitext which can be used for advanced editing. The page contains information on the most common uses of wikitext in editing, a full description of wikitext and its uses can be found on these pages:

Examples on the page are shown as the source text first and then below it, how it will display on the page:

Source text which you put in the source editor

Text which will appear on the page

Wikitext

Wikitext, also known as Wiki markup or Wikicode, consists of the syntax and keywords used by the MediaWiki software to format a page. It contains many different uses including HTML elements, templates, galleries, tables and much more.

Source Editor

Source2

Accessing the source editor from the classic editor (Recommended)

Soure

Accessing the source editor from the visual editor (Not recommended)

The source editor has to be used if you want to edit wikitext. You can access the source editor in both the visual editor and classic editor, however the classic editor is recommended. Make sure syntax highlighting is enabled, if not it can be changed at My Preferences > Editing, where you can also set the source editor as your standard if you wish.

Source Editor is recommended even if you are not editing wikitext, as you have much more control over the contents of a page and you can not mess things up by accidentally clicking somewhere or pressing enter. Multiple elements like templates usually have to be inserted with the source editor and the templates themselves can only be edited in source.

Everything on this page is supposed to be typed into the source editor, it will not work in the visual editor.

Images

Images can be added to a page by adding [[File:Filename]]. Note that the filename has to include the extension (Sparrow.png). There are also multiple parameters you can add to the image. Its position can be set to either "right", "left", "center" or "thumb" (thumbnail). The image can be linked by adding "link=" and then the pagename. The width can be set by adding it in pixels ("300px"). A caption can also be added, but only to images with thumb positioning. Each of the parameters have to be seperated by a "|". An image example is provided below.

[[File:Happy.png|center|150px|link=Sparrow]]
Happy

Templates

Templates are used to reuse certain navigation elements or infoboxes on multiple pages. This wiki uses many templates including notice boxes, navigation boxes and infoboxes. Templates have the advantage of automatically updating if you change them, so you don't have to update every single page.

To create a template you type in the url "https://entry-point.fandom.com/wiki/Template:[Template name]" and replace the brackets with what you want to name your template. When you first create a template you will have to choose what kind of template you want. Most options only affect the category, except for "infobox" which will send you to the custom infobox editor. Once you have created a template you can find it by searching for it at the top and changing the search settings to "Other".

Template usage

To insert a template you just have to write {{Template name}}. If for example your template only consisted of the word "Sparrow" then where you inserted that template the word "Sparrow" will appear. Templates also have the option of adding parameters to help you configure the template each time you use it. To add a parameter you have to add Default value (the default value is optional). If you have a template with parameters you have to specify those when inserting the template by adding Paramter name=Parameter value into the double brackets of the template seperated by a "|".

Example Template

This is a template which displayes a welcome message for sombody specified in the parameter "User" with a default value of "Unknown user". The template will be called "WelcomeMessage". This is the source code of the template:

Welcome to the Sparrow Zone {{{User|Unknown user}}}!

You can check out the template page here. To use this template you have to write this:

{{WelcomeMessage|User=breakbar}}

Welcome to the Sparrow Zone breakbar!

Since we added a default parameter we can leave out the parameter on the page if we want. It is recommended to always add default values to parameters.

{{WelcomeMessage}}

Welcome to the Sparrow Zone Unknown user!

Another example of the {{ContentBox}} template we use on our home page.

{{ContentBox|Header=Warning!|Content=This is an example, you have been warned}}
Warning!
This is an example, you have been warned

Infoboxes

Infobox

Our "Mission" infobox in the editor

Infoboxes are special templates that display on the right side of a page. To create an infobox you open the url with your template like mentioned above and choose the "infobox" option at the template type selection. This will send you to the infobox editor which can be used to rows, images and section headers. The names you choose for your rows will be the parameters you have to use when adding the infobox on a page.

As an example we would like to add the Mission infobox to a page. The infobox rows can be seen on the right. The section headers can be overwritten with a parameter if you want to change them.

{{Mission
|title1=The Deposit
|image1=Depositmissionpic.PNG
|date=April 17th, 2015
}}

In this example we have defined the infobox title, image and one row. The parameter names of the title and images are "title1" and "image1", with the number increasing if you have multiple. If you do not specify parameters they will not appear. You can also see how infoboxes have priority over other content and will always occupy their space on the right side of the page.





Tables

Tables are useful to display sorted data or other informaton which can be grouped into rows and columns. Wikitext uses multiple shortcuts to easily create diverse tables. A table is opened and closed with {| and |}. On the first line you can specify the table's class, which is article-table for the standard styling, or wikitable for a simpler one. The table content consists of 3 different elements: A table header !, a table cell | and new row |-. Everything will display in one row until you set a new row. If you want bigger cells you can also specify rowspan and colspan before a header or cell (insert | after it).

{| class="article-table"
!Table header
!I am still on the same row
|-
|Oh a new row!
!Headers don't have to be at the top
|}
Table header I am still on the same row
Oh a new row! Headers don't have to be at the top
{| class="article-table"
! rowspan="3" |I am big and cover 3 rows
|Row 1
|-
|Row 2
|-
|Row3
|}
I am big and cover 3 rows Row 1
Row 2
Row3
{| class="wikitable"
! colspan="3" |This table
| rowspan="3" |is
|-
!a
| rowspan="2" colspan="2" |bit
|-
|more
|-
! colspan="4" |complex
|}
This table is
a bit
more
complex

HTML Elements

One of the features that wikitext supports are HTML elements. The two most common and most used ones are <div> and <span>, which are containers for page elements. Each of them has to be opened and closed, the closing tag always has a "/" before the tagname (</div> / </span>). Anything that is inbetween them will be styled according to the styling you specified. The main difference between div and span can be seen here (the stylings used on them will be explained below):

Divs cover the whole text box height and width of the page.

<div style="background-color: darkblue;">My background spans over the whole page</div>
My background spans over the whole page

Spans only cover the text.

<span style="background-color: darkblue;">My background only covers the text</span>

My background only covers the text

Text before and after divs will be displayed on seperate lines as they are considered linebreaks, however spans will not.

This text <div>will not display</div> on one line
This text
will not display
on one line

Classes

One of the easiest way to style elements is by using CSS classes. Some of these classes are provided by MediaWiki while others were added by me. To apply a class to a div or span you have to add it a "class" attribute. This can be done by typing it in the opening tag like shown below.

<span class="Sparrow">LOOK IT'S J-DAWG</span>

LOOK IT'S J-DAWG

The custom classes which are currently availible:

  • All character names (Rose, Wren, Director, Jackdaw, ...), which will color the text to the character's text color.
  • XP, Money (blue and green color)
  • Autowidth (an image inside of a div with this class will always take up the whole page width regardless the resolution or screen size)

Styling

The easiest method to style an element is to add it a "style" attribute. This attribute does not accept words like the "class" attribute, instead you have to write CSS (Cascading Style Sheets), which is used to specify how you want to style an element. The CSS you want to add to an element has to be inbetween the " " of the style attribute. Every CSS property has to be specified by the following template (whitespace does not matter):

[CSS property name] : [property]; 

There are many CSS properties you can add to an element, most of which you can find here. The most common ones are listed here:

  • "color" - Text color, accepts colors ("red", "blue",...), hex ("#092f71") and rgb ("rgb(255, 99, 71)")
  • "background-color" - Color of the text background, accepts same as "color"
  • "font-size" - Text size, accepts size in pixels (px)
  • "text-align" - Aligns the text ("left", "right", "center")
  • "border" - Adds a border around the elements, has 3 parameters each seperated by a space ("width" "type" "color"), width is in pixels, type can be solid/dotted/dashed/double and color is the same as with text color
  • "text-shadow" - Adds text shadow, has 4 parameters ("horizontal offset" "vertical offset" "blur" "color"), the offsets are how many pixels away the shadow is from the text, the blur adds blur to the shadow (recommended to be between 2px and 6px, but it's optional) and color is the color of the shadow

Examples

<div style="color: red; font-size: 20px; text-align: center;">Hey there, I am big, red and centered</div>
Hey there, I am big, red and centered
<span style="color: black; background-color: aquamarine;">I am just a span</span>

I am just a span

<div style="color: lightgreen; text-shadow: 2px 2px 0px black; border: 2px solid lightgreen;>I have a fancy shadow and border</div>
I have a fancy shadow and border
<span style="color: white; background-color: black; border: 1px dotted white;">Notice how my border is smaller since I'm just a span</span>

Notice how my border is smaller since I'm just a span

Tabbers

Tabbers are useful for splitting up information on a page. They are similar to an html element, as they open and close with <tabber>. The title of a tab can be written after the tag, and putting a "=" next to it will start the tab content. More tabs can be added by adding a "|-|" on a new line, after which you can specify the tab title and content the same way.

<tabber>
Tabber tab=Hello I am a tabber
|-|Click me!=Thanks for checking out my tab!
|-|No, click me instead!=I knew you would click on me
</tabber>

Hello I am a tabber

Thanks for checking out my tab!

I knew you would click on me

Collapsibles

Collapsibles are a good way of hiding content that takes up a lot of space, such as data or dialogue. Collapsibles are not a wikitext element like others, but instead a class which you can apply on many different elements. Applying the mw-collapsible to an element will make it collapsible and you can also add the me-collapsed class to have it collapsed by default. Optionally you can also set the text that is shown on the button by changing the data-collapsetext and data-expandtext attributes (not classes) in the element.

<div class="mw-collapsible" data-collapsetext="Make it disappear" data-expandtext="Make it appear">Hello I can be collapsed</div>
Hello I can be collapsed


<span class="mw-collapsible mw-collapsed">You found me!</span>

You found me!

Community content is available under CC-BY-SA unless otherwise noted.