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 introductory CSS styling.

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


Article Formats

Basic Article Templates

[[include component:rate]]

IMAGE BLOCK CODE (IF APPLICABLE)

OBJECT CLASS SYMBOL

**Registered Phenomena Code:** XXX

**Object Class:** Alpha/Beta/Gamma (containment rating) - Yellow/Orange/Red (lethality rating)

**Hazard Types:**

**Containment Protocols:** [Paragraphs explaining the procedures]

**Description:** [Paragraphs explaining the description]

**Addendum:** and/or **Discovery:** [Optional additional paragraphs]

[[footnoteblock]]

[[=]]
<< [[[RPC-XXX]]] | RPC-XXX | [[[RPC-XXX]]] >>
[[/=]]

Put in the links to the previous and next article here ^

Example of what the navigation at the end should look like:

« RPC-001 | RPC-002 | RPC-003 »

Alternate Article Formats

Interview Template

> **Interviewed:** [The person, persons, or RPC being interviewed]
>
> **Interviewer:** [Interviewer, can be blocked out using █]
>
> **Foreword:** [Small passage describing the interview]
>
> **<Begin Log, [optional time info]>**
>
> **Interviewer:** [speech]
>
> **Person:** [speech]
>
> [Repeat as necessary]
>
> **<End Log, [optional time info]>**
>
> **Closing Statement:** [Small summary and passage on what transpired afterward]

Object Classification Symbols

When publishing an article, you must include an object classification symbol. To determine what classification your article meets, consult the Object Classes Guide. Here is a list of commands you can easily insert into the very top of your article to display the proper symbol, this appears in order of Threat Level:

Alpha

[[f<image https://rpcauthority.wdfiles.com/local--files/component:icons/alpha-white.png]]

[[f<image https://rpcauthority.wdfiles.com/local--files/component:icons/alpha-yellow.png]]

[[f<image https://rpcauthority.wdfiles.com/local--files/component:icons/alpha-orange.png]]

[[f<image https://rpcauthority.wdfiles.com/local--files/component:icons/alpha-red.png]]

[[f<image https://rpcauthority.wdfiles.com/local--files/component:icons/alpha-purple.png]]

[[f<image https://rpcauthority.wdfiles.com/local--files/component:icons/alpha-black.png]]

Beta

[[f<image https://rpcauthority.wdfiles.com/local--files/component:icons/beta-white.png]]

[[f<image https://rpcauthority.wdfiles.com/local--files/component:icons/beta-yellow.png]]

[[f<image https://rpcauthority.wdfiles.com/local--files/component:icons/beta-orange.png]]

[[f<image https://rpcauthority.wdfiles.com/local--files/component:icons/beta-red.png]]

[[f<image https://rpcauthority.wdfiles.com/local--files/component:icons/beta-purple.png]]

[[f<image https://rpcauthority.wdfiles.com/local--files/component:icons/beta-black.png]]

Gamma

[[f<image https://rpcauthority.wdfiles.com/local--files/component:icons/gamma-white.png]]

[[f<image https://rpcauthority.wdfiles.com/local--files/component:icons/gamma-yellow.png]]

[[f<image https://rpcauthority.wdfiles.com/local--files/component:icons/gamma-orange.png]]

[[f<image https://rpcauthority.wdfiles.com/local--files/component:icons/gamma-red.png]]

[[f<image https://rpcauthority.wdfiles.com/local--files/component:icons/gamma-purple.png]]

[[f<image https://rpcauthority.wdfiles.com/local--files/component:icons/gamma-black.png]]

Omega

[[f<image https://rpcauthority.wdfiles.com/local--files/component:icons/omega-white.png]]

[[f<image https://rpcauthority.wdfiles.com/local--files/component:icons/omega-yellow.png]]

[[f<image https://rpcauthority.wdfiles.com/local--files/component:icons/omega-orange.png]]

[[f<image https://rpcauthority.wdfiles.com/local--files/component:icons/omega-red.png]]

[[f<image https://rpcauthority.wdfiles.com/local--files/component:icons/omega-purple.png]]

[[f<image https://rpcauthority.wdfiles.com/local--files/component:icons/omega-black.png]]

These codes go under the rating module.

You can post an RPC by clicking on the Archive I link and selecting any empty RPC article. Make sure to include the "rpc" (no quotes) tag on your page.


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]]

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]]


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.1

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.


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]]
[[tab Tab One]]
Example text.
[[/tab]]
[[tab Tab Two]]
More example text.
[[/tab]]
[[/tabview]]

Makes:

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:


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:

@@ [[div class="example"]] @@

@@ [[/div]] @@

[[div class="example"]]

[[/div]]


Basic CSS

CSS is a language used to apply styling to certain elements on a webpage. It can be used to greatly improve the appearance of your articles. First, we'll cover some basics of how Wikidot's syntax works together with CSS.


Div Elements

In HTML, div elements are used to mark specific sections of a page.

Although Wikidot's syntax is a bit different from HTML, you can still create div elements as follows:

[[div]]
Content.
[[/div]]

Of course, this won't do anything by itself.

Classes and IDs

You can assign a class or ID to your div element by adding the following:

[[div class="firstDiv"]]
Content.
[[/div]]

[[div id="secondDiv"]]
Content.
[[/div]]

Essentially, this gives the browser a way to identify the divs. Later, we can use these classes/IDs to apply styling to them.

The styling for IDs takes priority over the styling for classes. You should use IDs only once, for specific elements, while classes can be reused over and over again to apply the same styling to multiple elements.


CSS Syntax

Before we continue, let's look at basic CSS syntax. Styling is applied through rulesets, which consist of a selector and a declaration block. Here's an example of a ruleset:

.firstDiv {
background-color: black;
border: 1px solid white;
border-radius: 4px;
}

Here, ".firstDiv" is the selector, and the section in the middle is the declaration block. Declaration blocks must be enclosed in braces ({}), and each declaration must end in a semicolon. The spacing and indentation isn't necessary, although it makes the stylesheet a lot more readable. If you want, you can have a ruleset all on one line:

.firstDiv {background-color: black; border: 1px solid white; border-radius: 4px;}

Selectors

There are three main types of selectors:

  • Element Selectors
  • Class Selectors
  • ID Selectors

Here are some examples of the different types:

h1 {…}
.classDiv {…}
#idDiv {…}

The first ruleset would apply to all h1 (heading 1) elements on the page. The second would apply to all elements with the class "classDiv". The third would apply to all elements with the ID "idDiv". Remember: class selectors start with periods, ID selectors start with hashes.

There's another type of selector known as the universal selector, that's used to select all elements on a page, although you generally won't need to use this.

* {…}

Properties

There's one more thing we need to go over: Properties. There are hundreds of properties in CSS, but don't worry - you won't have to use most of them. Here's a short list of the most common properties you'll be using:

  • color: Changes the color of text in the selected element.
    • Values: hex code (#000000), rgb (rgb(0, 0, 0)), etc.
  • background-color: Changes the color of the element's background.
    • Values: hex code, rgb, etc.
  • background-image: Applies a background image to the selected element.
    • Values: url('IMAGEURL'), linear-gradient(…)
  • border: Modifies the element's border.
    • Values: (size [1px, etc.]), (style [solid, dashed, dotted, etc.]), (color [hex, rgb, etc.])
  • border-radius: Rounds the corners of an element's border.
    • Values: pixels, percentage, etc.
  • margin: Changes space between an element and its container (the element it's inside.)
    • Values: pixels, percentage, etc.
      • Sides can be styled independently using margin-top, margin-bottom, etc.
      • When styling all 4 sides using one attribute, spacing is applied clockwise starting from the top; so "1px 2px 3px 4px" will apply a 1px margin to the top, 2px right, 3px bottom, and 4px left.
  • padding: Changes space between an element's border and its content.
    • Values: pixels, percentage, etc.
      • Similar to margins, spacing is applied clockwise from the top. Sides can be styled individually using padding-top, padding-bottom, etc.
  • font-family: Changes the font of text in the selected element.
    • Values: font names
      • You can add multiple fonts here (font-family: Arial, Tahoma, sans-serif;) If one font isn't available for whatever reason, the browser will try to use the next one.
  • font-size: Changes the size of text in the selected element.
    • Values: [8px, etc.], [1em, etc.], smaller, larger, [percentages]
      • 'em' and percentage scale based on the document's current font size. 1em = 100%.
  • font-weight: Changes the weight (thickness) of text in the selected element.
    • Values: normal, bold, lighter, bolder, [100, 200, etc.]
      • Depending on your font, not all values may be available.

Keep in mind that this is only a small handful of properties - w3schools is a great reference if you want to learn more!


Styling Elements

Okay, now we know all about CSS syntax. How do we style our div? There are three methods for doing so:

  • Inline styling
  • Using a CSS module
  • Importing a stylesheet

For now, we'll only cover the first two.

Inline Styling

Inline styling is the simplest, albeit least efficient method of styling elements. You should really only use it for when you have to style one specific element - otherwise, it's far more efficient to use a CSS module. To apply inline styling to an element, add the style attribute to it:

[[div style=" "]]
Content.
[[/div]]

You can paste a declaration block inside the style attribute and it'll be applied to the div. For example:

[[div style="background-color: rgb(0,0,0); color: white;"]]
Content.
[[/div]]

This will create:

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 {
background-color: rgb(0,0,0);
color: white;
}
[[/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 {
background-color: black;
color: white;
font-family: monospace;
padding: 2%;
border-radius: 5px;
}
[[/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.

Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License