If you have been reading on the other notebook manual entries, then you may have noticed various images and quick notes. When writing pages, you can add these in yourself using some special wiki code. The best part is that it's not that hard!

Images

In order to add an image, you need to know the image's URL address.

If the image you want to use is being hosted elsewhere (and you can legally use it), then to obtain the address, right-click and press "Copy Image Location". The link you paste will be the image's URL location.

If the image is on your computer, then you must first upload the image to Wikidot. You can read more on how to do this on the help docs.

Once you have the address, you can use Timothy Foster's Image Box snippet to easily insert an image and give it a caption/heading.

The syntax is simply the following:

[[include :snippets:bs-image
|image=http://notebooks.wikidot.com/local--files/help:editing-pages/sulphur.png
|heading=Sulphur
|caption=Sulphur is one of the 118 elements of the Periodic Table of Elements
|max-width=375px
|kind=primary
|link=none
]]

Sulphur

Image Unavailable

Sulphur is one of the 118 elements of the Periodic Table of Elements

You can of course modify any of the attributes you see above plus a few more that you can find reading about this syntax.

Quick Notes

On the right (or below on small screens), you can see what are called quick notes. They are simply little info bubbles meant to point out either aside or important information. You have probably been noticing them whilst reading through this manual.

These notes are actually created using a feature provided by Twitter's Bootstrap, namely the alert boxes. These notes can be created using the below syntax:

[[div class="alert alert-TYPE"]]
This is a note.
[[/div]]

You replace TYPE with one of the following:

  • info
  • success
  • warning
  • danger

This is an info note.

This is an success note.

This is an warning note.

This is an danger note.

Alternatively, we provide you with a compacted syntax that allows you to easily specify whether it floats on the left or right:

This note was made with the code to the left

[[include note
|type=success
|float=right
|width=250px
|note=This note was made with the code to the left
]]