Formatting Guide

Formatting can play a big part in making readers more interested in your articles. Good formatting is a great asset, and this guide will cover everything - from the basics and essentials to more advanced CSS styling.

Visit the Widget Hub for a collection of modules, formats, and themes

---

Article Formats

Anomaly Format

Anomaly Article Template

[[div style="background-color: #ffffff; border: 1px solid #1434A4; padding: 5px 15px;"]]
[[div style="background-color: #ffffff; padding: 5px 15px;"]]
[[table style="border-bottom: 4px double #939393; vertical-align: center; margin-left: auto; margin-right: auto;"]]
[[row]]
[[cell style="text-align: center; width: 100%;"]]
[[size 150%]] ANOMALY, INDEX NUMBER #XX [[/size]]
= **THE FEDERAL AGENCY FOR THE STRANGE AND ANOMALOUS**
[[/cell]]
[[/row]]
[[/table]]

[[=]]
[[size 130%]] **Codename:** [Insert Codename] [[/size]]
[[/=]]

[[div style="float:left; width: 45%; padding: 0 2%"]]
**SECURITY CLEARANCE**
(Insert Classification Level w/ Designations)

**CONTROL SCALE**
(Insert Control Scale Rating)

**TALI LEVEL**
(Insert TALI Level)

**USABILITY RATING**
@@★☆☆☆☆ [Rate from 0-5 Stars of Usefulness]@

**VEIL STATUS**
Insert Public Status
[[/div]]

[[div style="float:right; width: 30%; padding: 0 5%"]]
**DATE OF REPORT**
[Long Month] [Day], [Year].

**DATE OF ACQUISITION**
[Long Month] [Day], [Year]

**CURRENT LOCATION**
Site-XXX (optional; N/A)

**REPORT BY**
Dr. [Name] [Surname]

**ACQUISITION TEAM**
[Insert STARS Unit's name]
[[/div]]

@@@@
@@@@

[[table style="width: 100%; text-align: center; valign: middle;"]]
[[row]]
[[cell style="width: 60%; vertical-align: middle;"]]
[[size 150%]] **Discovery Date** [[/size]]
//[Long Month] [Day], [Year].//
[[/cell]]
[[cell style="vertical-align: middle;"]]
[[=image https://fasa.wdfiles.com/local--files/images/FASA_Stamp.png style="width: 100px;"]]
//De omnibus dubitandum.//
[[/cell]] [[/row]] [[/table]]
[[/div]]
@@@@
[[div style="background-color: #ffffff; padding: 5px 15px;"]]
[[include component:image-block name=https://i.ytimg.com/vi/DH0BQtwEAsM/maxresdefault.jpg|caption=Image Caption.]]
[[/div]]
[[=]]
[[span style="text-align: center;"]][[size 150%]]**Information**[[/size]][[/span]]
[[/=]]
**Handling Procedures:** [Paragraphs explaining how the Agency is to handle the anomaly. This should include any procedures in place for keeping it in place (containment) as well as any additional procedures (how to utilize the anomaly for a productive outcome, instructions for an approved destruction attempt, etc.)]

**Description & Explanation:** [Paragraphs explaining the anomaly in detail, including a physical and anomalous description as well as any notable details that the Agency would have discovered through research.]

**Discovery Log:** [Paragraphs explaining how the Agency discovered the anomaly.]
[[/div]]

@@@@
@@@@

[[div style="background-color: #ffffff; border: 1px solid #1434A4; padding: 5px 15px;"]]
[[=]]
[[span style="text-align: center;"]][[size 150%]]**Addendums**[[/size]][[/span]]
[[/=]]
[(Optional) Additional paragraphs, documents, interviews, etc.]
[[/div]]

@@@@
@@@@

[[div style="background-color: #ffffff; border: 1px solid #1434A4; padding: 5px 15px;"]]
[[=]]
[[span style="text-align: center;"]][[size 150%]]**Notable Proposals**[[/size]][[/span]]
[[/=]]

[[tabview]]
[[tab PROPOSAL #1]]
> "//Quote from a member of the research team providing a recommendation on what they believe the > Agency should do with the anomaly, specifically in regard to whether should the anomaly be use or destroyed. Depending on the researcher, this section will contain more personal tones, though they may be more clinical in nature. Try to utilize this section to provide a human element to the article, while also exploring methods that the Agency could use in order to utilize the anomaly or destroy it.//"
>
> **- Dr. [Name] [Surname].**
[[/tab]]
[[tab PROPOSAL #2]]
> "//Similar to Proposal A but encompassing a different perspective or perhaps an affirmation to the previous proposal by another member of staff. If you are going to include multiple proposals (which is optional), try to ensure that they are all unique and different from one another, or that they at least provide something new to the article. It should be a quote, so it'll be italicized and in quotes.//"
>
> **- Dr. [Name] [Surname].**
[[/tab]]
[[/tabview]]
[[/div]]

@@@@
@@@@

[[div style="background-color: #ffffff; border: 1px solid #1434A4; padding: 5px 15px;"]]
[[=]]
[[span style="text-align: center;"]][[size 150%]]**STAC Decision**[[/size]][[/span]]
[[/=]]
> "//This is where a written statement from the STAC would be written. This should have a somewhat human tone, and address the most popular proposals featured above. This decision serves as the ultimate factor between whether or not an anomaly will be retained, utilized, destroyed, left alone, etc. Any major decision by the Agency to act upon or refrain from acting upon an anomalous object will come from the STAC's decision.//"
> **- The STAC Council**
[[/div]]
@@@@
[[div class="content-panel standalone" style="width: auto; padding: 5px 20px; margin: 10px auto; background:none; repeat; text-align: center;"]]
[[=]]
+++ 〈END OF REPORT〉
[[/=]]
[[/div]]

Personnel Format

Agency Personnel Format

[[module rate]]
@@
[[div style="background: var(--background-4); border: var(--thick-border); padding: 1px 15px;"]]
[[=image http://fasa.wdfiles.com/local--files/images/FASA_Stamp width="150px"]]
[[=]]
++ **>> Department of Personnel and Management <<**
[[/=]]
----
IMAGE BLOCK CODE (IF APPLICABLE)
**Full Name:** PERSONNEL NAME
**Personnel ID Number:** XXX-XXX-XXXXXX
**Security Clearance:** Level X
**Division:** Research/Protection/Containment/Administration/Inmate

**Position:** PERSONNEL POSITION

**Rank:** PERSONNEL RANK [Optional]

**Sex:** PERSONNEL'S BIOLOGICAL SEX
**Height:** XXXcm
**Weight:** XXkg
**Skin Color:** SKIN COLOR [Optional]
**Hair Color:** HAIR COLOR [Optional]
**Eye Color:** EYE COLOR [OPTIONAL]
**Birthplace:** PLACE OF BIRTH
**Date of Birth:** Long Month DD, YYYY
**Enlistment Date:** Long Month DD, YYYY
**Education History:**
* List education history (YYYY-YYYY)
* List as necessary (YYYY-YYYY)
**Occupational History:**
* List past employment (YYYY-YYYY)
----
[[=]]
+ Overview
[[/=]]
----
WRITE OVERVIEW OF PERSONNEL HERE
----
[[=]]
+ Further Information
[[/=]]
----
WRITE ANY EXTRA INFORMATION HERE

[[/div]]

STARS Profile Format

STARS Agent Profile Format

[[module rate]]
[[div class="aet-profile" style="background: var(--background-4); border: var(--thick-border); padding: 1px 15px;"]]
[[=image http://fasa.wdfiles.com/local--files/start/FASA-Logo%28Large%29]]
----
[[=]]
+ Overview
[[/=]]
----
[[f>URL]] (OPTIONAL STARS EMBLEM)
**Constellation Code:** STARS DESIGNATION
**Codename:** STARS CODENAME
**Motto:** [Optional]
**Garrison/HQ:** [If applicable]
**Roles:** PURPOSE OF STARS Unit
**Established:** DATE THE STARS UNIT WAS FORMED
**Description:** WRITE DESCRIPTION OF THE TEAM HERE
----
[[=]]
+ Engagement Team Composition
[[/=]]
----
NUMBER/STRUCTURE OF SPECIALIZED TEAM MEMBERS GO HERE
----
[[=]]
+ Active Personnel
[[/=]]
----
LINKS TO NOTABLE PERSONNEL FILES GO HERE
----
[[=]]
+ Armaments
[[/=]]
----
SPECIALIZED TEAM EQUIPMENT GOES HERE
----
[[=]]
+ Completed Operations
[[/=]]
----
NOTABLE TALES OR OPERATION LINKS GO HERE
----
[[=]]
+ Containment Assignments
[[/=]]
----
RELATED Anomalies GO HERE
[[/div]]

Anomalous Group Format

Anomalous Group/Agency Format

[[div style="background-color:#efefef; border: solid 1px #283663; color: #00; margin: 13px auto 0; text-align: left; box-shadow: 1 2px 6px rgba(0,0,0,.5); padding: 0 10px;"]]
[[=]]
+ [[[AO HUB PAGE HERE| NAME OF AO HERE]]]
++ (INSERT SIZE LEVEL)
[[/=]]
**Overview:** (A basic description of the AO)

**Handling Procedure:** (What relationship does the FASA have with this group, and what is the current protocols regarding interactions with this organization?)
[[/div]]

Interview Template

Interview Template

> MEMORANDUM OF INTERVIEW
>
> **SUBJECT:** -- (What is the Nature of the Interview?)
> **PARTICIPANTS:** -- (List of Participants)
> **DATE & TIME:** -- (INSERT) (Example: July 25, 2019, 10:00 - 10:15 A.M, EDT)
> **PLACE:** -- (INSERT)
>
> __**Person #1:**__ [speech]
>
> __**Person #2:**__ [speech]
>
> [Repeat as necessary]
>
> **[End Interview]**
>
> **Closing Statement:** [Small summary and passage on what transpired afterward]

---

Wikidot Syntax

For the most part, you can get by with only knowing the very basics of Wikidot's syntax.

• Bolding: **example text**⟶ example text
• Italicizing: //example text//⟶ example text
• Underlining: __example text__⟶ example text
• Strikethrough: --example text--⟶ example text

As a sidenote, you don't necessarily have to memorize these as they're all available in Wikidot's toolbar, but they're still handy to know.

---

Images

Adding images is a great way to improve your article.

[[include component:image-block name=Image_URL_Location|caption=Image_Caption]]

This creates an image block which will expand when hovered over with a mouse. Replace the bold text with whatever is applicable.

There are also some other things you can add to change how the image functions.

[[include component:image-block name=Image_URL_Location|caption=Image_Caption|width=###]]

This will set the image's size. The default is 300 pixels. Make sure to put a unit for it to work. "width=450px" will make it 450 pixels wide. "width=50%" will make it take up half the page content's width.

[[include component:image-block name=Image_URL_Location|caption=Image_Caption|align=ALIGNMENT]]

This will change how the image is aligned. By default, the image will be aligned to the right side of the screen. "align=left" will make it appear on the left side. "align=center" will make it appear at the center of the screen.

[[include component:image-block name=Image_URL_Location|caption=Image_Caption|enlarge=false]]

This will make it so the image does not enlarge when you hover your mouse over it. By default, enlarge hover is enabled.

---

If you want to add normal images (without the image block formatting), simply use:

[[image LINK]]⟶ Creates a normal image.
[[<image LINK]]⟶ Creates an image aligned to the left.
[[>image LINK]]⟶ Creates an image aligned to the right.
[[=image LINK]]⟶ Creates a centered image.
[[f<image LINK]]⟶ Creates an image floating on the left. (Allows text wrapping.)
[[f>image LINK]]⟶ Creates an image floating on the right. (Allows text wrapping.)

There are more advanced uses of images that you can read about here.

---

Collapsibles

Collapsibles work well to hide large blocks of text.

[[collapsible show="SHOW TEXT" hide="HIDE TEXT"]]
TEXT
[[/collapsible]]

SHOW TEXT

TEXT

Additionally, you can use the hideLocation attribute to change where the collapsible closes. This works well with especially long blocks of text. For example:

[[collapsible show="SHOW LONG BLOCK OF TEXT" hide="HIDE LONG BLOCK OF TEXT" hideLocation="both"]]
LONG BLOCK OF TEXT
[[/collapsible]]

SHOW LONG BLOCK OF TEXT

LONG BLOCK OF TEXT

---

Hyperlinks

You can link to other pages by using the following code:

[PAGE-URL LINK-TEXT]

This will make:

LINK-TEXT

If the page you're linking to is on the same Wikidot site, you can simply use /page-name. For example:

[/formatting-guide LINK-TEXT]

This will make:

LINK-TEXT

The simplest way to link to pages on the same site is as follows:

[[[formatting-guide]]]

This will make:

formatting-guide

---

Footnotes and Footnote Blocks

You can add footnotes using the following code:

Example text.[[footnote]]Explanation.[[/footnote]]

Example text.¹

Additionally, you can change where footnotes are shown on your page by using [[footnoteblock]]. Note that there can only be one footnote block per page.

Footnotes

1. Explanation.

---

Headings

You can emphasize text using headings. The following code:

+ Biggest Heading
++ Size 2
+++ Size 3
++++ Size 4
+++++ Size 5
++++++ Smallest Heading

Will create headings of various sizes:

Biggest Heading

Size 2

Size 3

Size 4

Size 5

Smallest Heading

---

Lists

You can create ordered (by number) lists, as well as unordered (bullet point) lists. Adding a space before a list item will increase its nesting.

# Ordered List Item 1
# Ordered List Item 2
@@# Nested Item 1@@
# Ordered List Item 3
* Unordered List Item 1
* Unordered List Item 2
@@* Nested Item 1@@
* Unordered List Item 3

Will create:

1. Ordered List Item 1
2. Ordered List Item 2
   1. Nested Item 1
3. Ordered List Item 3

• Unordered List Item 1
• Unordered List Item 2
  • Nested Item 1
• Unordered List Item 3

---

Tables

Tables can be used to organize information in your article:

||~ Header 1 ||~ Header 2 ||~ Header 3 ||
|| Example 1. || Example 2. || Example 3. ||

This will make:

Header 1	Header 2	Header 3
Example 1.	Example 2.	Example 3.

You can expand this model for as many rows and columns as you need. Remember to add a tilde (~) to each box in your header row.

---

Quote Blocks

Quote blocks are great for testing logs, exploration logs, and so on. Adding a quote block is as simple as adding "> " before each line of your text. So:

> Line 1
>
> Line 2

Will create:

Line 1
Line 2

Note that empty lines require the "> " as well - otherwise, your quote block will be split up! Also, the space after ">" is essential; the code won't work otherwise.

---

Anchors

Anchors can make navigating your page much easier:

[[# anchorname]]To create an anchor.
[#anchorname Link text.]To return to the anchor.

This will create:

Link text.

---

Horizontal Dividers

Horizontal dividers are used to break up the content of a page:

Text
-----
More text

Will create:

Text

---

More text

---

Aligning Text

You can align text to the left, center, and right of the page, as well as justify it:

[[<]]
Left-aligned text
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
[[/<]]

[[=]]
Centered text
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
[[/=]]

[[>]]
Right-aligned text
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
[[/>]]

[[==]]
Justified text
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
[[/==]]

Will create:

Left-aligned text
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Centered text
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Right-aligned text
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Justified text
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Justifying text makes it so that all of the lines are spaced evenly, so it's only visible on large paragraphs.

---

Colored Text

Colored text is very simple to make:

##blue|Blue text.##

Makes: Blue text.

It also works with hex values:

##71e02c|Green text.##

Makes: Green text.

---

Tabs

Tabs can be used to organize pages and keep your sandbox from getting cluttered. Here's how to make them:

[[tabview]]
[[/tabview]]

Makes:

Tab One

Example text.

Tab Two

More example text.

You can add as many [[tab]]s as you need.

Creating multiple [[tabview]] … [[/tabview]] elements will create multiple blocks of tabs. For example:

[[tabview]]
[[tab One]]
[[/tab]]
[[/tabview]]
[[tabview]]
[[tab Two]]
[[/tab]]
[[/tabview]]

Will create:

One

Two

---

Empty Lines

Due to the way Wikidot formats text, having empty lines is normally impossible. However, you can bypass this by using no-parse tags. Normally making empty lines would display as follows:

Text



More text

Text

More text

However, by using no-parse tags, you can make them display properly:

Text
@@@@
@@@@
@@@@
More text

Text



More text

These tags can also be used to display code without it being parsed. For example:

@@@@

Content.

Note that no selector or braces are necessary when using inline styling, although you must still include a semicolon at the end of each declaration.

CSS Module

A more efficient way to style elements is through the use of a CSS module. Its analog in HTML would be a <style> tag. To add a CSS module, place this at the top of your document:

[[module CSS]]
[[/module]]

You can put CSS rulesets inside this module and they'll be applied to the whole article. For example:

[[module CSS]]
.exampleRuleSet {
}
[[/module]]

---

Examples

There are many situations in which using CSS can come in handy.

Scenario A

Say you want to create a div block that looks like a computer terminal. The background would have to be black, with white text. A monospace font would also be good. Let's translate this into CSS!

[[div style="background-color: black; color: white; font-family: monospace; font-size: 16px; padding: 2%; border-radius: 5px"]]
| TEXT
| MORE TEXT
[[/div]]

This creates:

| TEXT
| MORE TEXT

Let's break down what's happening:

• "background-color: black" sets the background to black.
• "color: white" sets the text color to white.
• "font-family: monospace" sets the font to monospace, similar to a computer terminal.
• "padding: 2%" adds a bit of space between the text and the edge of the div block.
• "border-radius: 5px" rounds the div's corners by 5px.

Another way to do this would be:

[[module CSS]]
.terminal {
}
[[/module]]

…

[[div class="terminal"]]
| TEXT
| MORE TEXT
[[/div]]

This would produce the same result, with the added benefit of being easily reusable with multiple divs. Just assign each div the "terminal" class and you're good to go.

---

Custom Themes

If you'd like to add a custom theme to a page, you can create one yourself using CSS, or browse through the already available themes here.

A guide on making your own themes should be available in the near future. It never came.