Formatting for the Wiki

Page Needs Update
This page contains outdated, incomplete, inaccurate, or poorly formatted information.

This page will serve as a guide on common HTML and CSS formatting for the clan wiki. If you've used our forums for any period of time, you may be familiar with the common phpbb structure: "[b]Hello[/b]" results in the bold "Hello". Phpbb largely used brackets ("[", "]") for its formatting, but that is not the case on the wiki. Read on to learn about everything from these basic forms of formatting, to more complex ways of formatting and design your page.

HTML vs. TEMPLATES

There are two major types of formatting options on the Wiki, as opposed to the one present on our Phpbb-powered forum. These are "HTML" tags, and MediaWiki "Templates".

HTML Tags

HTML Tags are the simplest, and most recoognizeable, form of formatting coming from our forum. They work mostly the same, except they use greater/less than signs in place of brackets. For example:

[i]Hello[/i]

<i>Hello</i>

This is the single most basic form of HTML formatting, but there are significantly more complex ways to use it which will be covered below. Just know that, for certain basic formatting desires, you can simple swap out brackets for great/less than signs and achieve the same result.

Templates

Templates are user-created formatting tools that are often comprised of more complex HTML or CSS formatting that would otherwise clutter up you editing box. Instead, you can simply insert text into a template and it will automatically apply all of its associated formatting. For example:

[i]Hello[/i]

{{i|Hello}}

As you can see, there is a considerably different format for using templates instead of HTML/Phpbb. The entirety of a template is enclosed within double braces, with the "i" being immediately followed by a pipe("|"). This is the basic formatting for a template, where "{{ }}" starts and ends the template, everything before the pipe("|") is the name of the template you wish to use, and everything after the pipe("|") is your text. While it may seem slightly more complicated than simply using an HTML tag, it makes more complex formatting incredibly simple. You will find that some templates use more than one pipe, this is usually because they have additional settings, such as text size.

You can find a list of all templates on the Templates page.

Basic Text Formatting

The list below covers most of the basic text formatting options and how to go about applying them to yours.

* = When centering text, you must put the "<center></center>" tags on the outside of any templates, or else it will cause formatting errors.

** = There are two types of "color" templates, as seen above. One, "{{Color|#|text}} can be used to generate any color of text you want, so long as you provide the HTML code for it, which you will have to look up yourself. There are, however, a number of templates provided that are simply the name of the color, such as "{{Red|text}}". A list of these templates can be found on the Templates page.

Line Breaks

Line breaks and paragraphs in MediaWiki work slightly differently than on our forums.

The single most important thing to know: Single link breaks do not start a new paragraph. This sentence is being typed on a brand new, completely seperate line from the previous, and yet you're reading it as all one paragraph. There is no line break, it just keeps going.

Alternatively, I have now entered two line breaks, and a new paragraph has started. This can be extremely limiting when you're trying to achieve a certain look for your text, as it requires you to start a new paragraph every time you want to startt a new line. However, there is an HTML tag that will allow you to work around this: "<br />".

As you can see, the use of the "<br />" tag allows you to force a line break, even when one isn't present. This can become extremely useful when you're creating lists or just want to create a line break, without necessarily starting a new paragraph.

Advanced Text Formatting

These are some of the more advanced text formatting options available to you.

Spoilers

You can create "spoiler" boxes to hide text that can then be revealed through a click. These are done through the "Spoiler" template, and areformatted as {{Spoiler|Spoiler Title|Spoiler Text}}. For example:

Results in:

Columns

You can create two columns of paralell text through the use of three seperate templates: "{{Col-begin}}", "{{Col-2}}", and "{{Col-end}}", used in that exact order. For example, this code:

Results in:

Embedding content

Youtube videos

Look at the URL of the video, and take the part after the `?v=`. For example, to embed the video at https://youtube.com/?v=dQw4w9WgXcQ, you use the code:

<youtube>dQw4w9WgXcQ</youtube>

Resulting in:

Twitch

You can embed Twitch in different ways. If you just want to embed a stream (so it'll show up when it's live), you can use "channel=[channel]":

<twitch>channel=clanquest</twitch>

Resulting in:

You can also embed VODs. Just find the video ID in the URL and add use video instead of channel: <twitch>video=v40464143</twitch>.

Twitch clips work a bit differently, so they need to use a separate tag. Just take the slug from the clips page, and use <twitchclip></twitchclip> instead. For example, <twitchclip>ElatedSincereMageRedCoat-vG9xsElR8TsfxvsN</twitchclip> becomes:

Soundcloud

Soundcloud is the most complex of all, as you can't just use the URL you find on Soundcloud. Instead, to share a track, you need to click Share and then the Embed tab. Copy the embed link, which will give you a long piece of code. We only need a small piece of it. Somewhere you will find a URL of the form "api.soundcloud.com/tracks/179828121". The number is what you need.

<soundcloud>179828121</soundcloud>

Will result in:

MediaWiki Formatting

Finally, there are unique text formatting options unique to MediaWiki that allow you some additional levels of formatting, that do not include either HTML Tags OR Templates.