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.


The Basics

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. You can add an image block using:

[[include component:image-block name= Image_URL_Location|width=…px|caption= Image_Caption.]]

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


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

[[=]]
Centered text
[[/=]]

[[>]]
Right-aligned text
[[/>]]
[[==]]
Justified text
[[/==]]

Will create:

Left-aligned text

Centered text

Right-aligned text

Justified text.

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 as well as Wikidot, 'div' elements are used to mark specific sections of a page. You may have noticed that this page's content is enclosed in a box with a black border - a div element was used to create this effect.

Creating a div element is as simple as:

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

But there's a problem: This won't do anything by itself.

Classes and IDs

You can assign a class or ID attribute 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 the div element.

The styling for IDs takes priority over the styling for classes. For this reason, it's better to 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. This is exclusive to Wikidot's syntax; 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. Obviously, 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.

More examples to come!

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