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:

Platform You write You get
On Forum
[i]Hello[/i]
Hello
On Wiki
<i>Hello</i>
Hello

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:

Platform You write You get
On Forum
[i]Hello[/i]
Hello
On Wiki
{{i|Hello}}
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.

Formatting You write You get
Italic Text <i>Italics</i> Italics
Bold Text <b>Bold</b> Bold
Underlined Text <u>Underline</u> Underline
Strike Through Text {{s|Strike}} Strike
Align Left {{left|Left}}
Left
Align Center* <center>Center</center>
Center
Align Right {{right|Right}}
Right
Text Size {{Resize|150%|Size}}
{{Resize|50%|Size}}
Size
Size
Font Face {{Font|Arial|Font}} Font
Text Color** {{color|#FF0000|Color}}
{{Red|Color}}
Color
Color
Disable Wiki Formatting <nowiki><i>Nowiki</i></nowikï>}} <i>Nowiki</i>
* = When centering text, you must put the "<center></center>" tags on the outside of any templates, or else it will cause formatting errors.
--Correct use of centering: <center>{{Larger|Testing}}</center>
--Incorrect use of centering: {{Larger|<center>Testing</center>}}


** = 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 />".

Formatting You write You get
Line Break This is<br />a test This is
a test

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:

{{Spoiler|Test123|This is a spoiler.}}

Results in:

Test123 
This is a spoiler.

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:

{{Col-begin}}
The quick brown fox jumps over the lazy dog
{{Col-2}}
The quick brown fox jumps over the lazy dog
{{Col-end}}

Results in:


The quick brown fox jumps over the lazy dog


The quick brown fox jumps over the lazy dog

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.

Formatting You write You get Function
Italic Text ''Italics'' Italics A MediaWiki alternative to creating italic text.
Bold Text '''Bold''' Bold A MediaWiki alternative to creating bold text.
Title 1 ==(Your text here)==

(Your text here)

The top-level page title/anchor.
Title 2 ===(Your text here)===

(Your text here)

The second-level page title/anchor.
Title 3 ====(Your text here)====

(Your text here)

The third-level page title/anchor.
Title 4 =====(Your text here)=====
(Your text here)
The fourth-level page title/anchor.
Table of Contents __TOC__ (See above) Force a table of contents to render here, linking to all of your title/anchors.
Only one per page.
Disable Table of Contents __NOTOC__ N/A Prevents a table of contents from generating on your page.
No section edits __NOEDITSECTION__ N/A Disables "edit" buttons from appearing next to titles.
Bullets

*This is a test.
*This is a test.

  • This is a test.
  • This is a test.
Creates a bulleted list, each asterisk on a new line adds to it.
Numbered List

#This is a test.
#This is a test.

  1. This is a test.
  2. This is a test.
Creates a numbered list, each asterisk on a new line adds to it.