Wikitext Cheatsheet

From FamilySearch Wiki
Jump to navigation Jump to search
Condensed guide to Wikitext coding

Click on sort icon to put list in alphabetical order

Description Type You Get
Headers ==Header 2==
===Header 3===
Header 2
Header 3
Lists - unordered *Item one
*Item two
*Item three
  • Item one
  • Item two
  • item three
Lists - ordered #Item one
#Item two
#Item three
  1. Item one
  2. Item two
  3. item three
Links - internal [[Missouri Genealogy|Missouri]]
Double square brackets - Name of article - pipe - User-defined link name
Links - external [ Search]
Single square brackets - URL of external link - space - User-defined link name
Family Search
Notice little box and arrow at the end of the name of the link.
Comments <!--Comment goes here between dashes-->
(At least two dashes are required on either side of the comment)
(No comments should appear)
Categories [[Category:name of category]] [[Category:Name of Category]]
Images [[File:name of image|location on page|size in px|caption]] IMAGE
Paragraph <p>Lorem ipsum ....</p>
In-line style <p style="property:change">Lorem ipsum ....</p>
font-size <p style="font-size:16pt">Lorem ipsum ....</p>

Lorem ipsum .....

font-family <p style="font-family:times new roman">Lorem ipsum ....</p>

Click here for all acceptable font styles

Lorem ipsum .....

font-color <p style="color:blue">Lorem ipsum ....</p>

Click here for all acceptable colors

Lorem ipsum .....

bold text <p>'''Lorem ipsum ....'''</p> Lorem ipsum ....
italicized text <p>''Lorem ipsum ....''</p> Lorem ipsum ....
multiple attributes <p style="font-family:times new roman; font-size:14pt; color:blue">Lorem ipsum ....</p>

Note the semi-colon between attributes

Lorem ipsum ....

backgrounds <p style="background:lightgray">Lorem ipsum ....</p>

Click here for all acceptable colors

Lorem ipsum ....

padding <p style="padding:10px">Lorem ipsum ....</p>
  • Padding is the space between the contents and the border whether the border is visible or not.
  • Can pad on just one or more sides: top, right, bottom and left.
  • Example: padding-top:10px
Content ....
Content ....
Margins <p style="margin:10px">Lorem ipsum ....</p>
  • Margins is the space between borders whether the borders are visible or not.
  • Margins can be on just one or more sides: top, right, bottom and left.
  • Example: margin-top:10px
Tip New.jpg
Without borders, the spacing between contents looks about the same whether you use padding or margins. Just be aware of the effects of these attributes if you are using borders around your content.
Contents ....
  • Please note: Margins overlap.
div tag <div style="font-family:times new roman; font-size:14pt; color:blue">Lorem ipsum ....</div>
No builtin margins or padding as in paragraph tags
Lorem ipsum ....
borders <div style="border:1px solid black">Lorem ipsum ....</div>
  • The border property is in three parts.
  • First part is the width of the border line in pixels.
  • Second part is the kind of line, whether solid, dashed, dotted, etc.
  • Third is the color of the border.

Lorem ipsum ....

border radius <p style="border:1px solid black; border-radius:5px">Lorem ipsum ....</p>
  • Can place border radius on one or more corners
  • Example: border-radius-top-right.

Lorem ipsum ....

border shadow <p style="border:1px solid black; box-shadow:5px 5px 3px lightgray">Lorem ipsum ....</p>
  • First number is the distance from bottom of border to bottom edge of shadow.
  • Second number is the distance from right edge of border to right edge of shadow.
  • Third number is height of object above plain of the page.
  • Fourth is the color of the shadow.

Lorem ipsum ....

width and height <p style="width:200px; height:50px">Lorem ipsum ....</p>

Lorem ipsum ....

Alignment - horizontal <p style="text-align:center">Lorem ipsum ....</p>
  • Can align in center and right.
  • Default alignment is left.

Lorem ipsum ....

alignment - vertical <p style="height:50px; line-height:50px">Lorem ipsum ....</p>
  • Line height has to equal height of container.

Lorem ipsum ....

{| Beginning table tag
|+ Table caption
|- Row tag
! Column heading
| Cell tag
|} Ending table tag
  • To add styling to each of these wikitext table tags, use inline styling.
  • Example: {| style="border:1px solid black; width:200px"
Text Wrapping (floating) <p style="float:right">Lorem ipsum ....</p>
Ireland Cemeteries 1.jpg

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus.

Table scrolling <div style="overflow:scroll; width:300px; height:100px"

{| style="border:1px solid red"
. </div>

Fruits Vegetable Nuts Grains
Apples Peas Peanuts Wheat
Pears Carrots Walnuts Oats
Cherries Corn Cashews Barley
Orange Beans Almonds Buckwheat

To save a template:  {{Template:name of template}}
To embed a template:  {{name of template}}

Breadcrumb trails

The Breadcrumb trail is a specialized template where one enters internal links leading to the page you are on:

| link1=[[United States Genealogy|United States]]
| link2=[[Missouri, United States Genealogy|Missouri]]
| link3=
| link4=
| link5=[[Adair County, Missouri Genealogy|Adair County]]

  • Don't forget pipe between Article name and user-defined link name.
  • link5 will always point to the page you are on.

References/Footnotes <ref>This is a footnote</ref>
  • The footnote and ref tags are place right after the item[1] you want to footnote regardless of what comes after it even if in the middle of a sentence.
  • Place a header named References as the last header on the page
  • Under the References header place a list of your footnotes/references using this code: <references/>
  1. This is a footnote
  • A short sentence of about 25 words giving details as to what material is in the article.
  • Appears just under the breadcrumb trail.
  • When you search your browser for a topic this SEO will appear under the title of the web page.
  • Take some pains to create this SEO, the world will see it and hopefully want to visit your page because of what you wrote in the SEO.

Guide to Adair County, Missouri ancestry, family history, and genealogy birth records, marriage records, death records, census records, family history, and military records.

Table column spans

| colspan="2" style="........."| Content to span two columns
| content
| content

  • Notice there is only one cell in the row where the column span is located.
Content to span two columns
content content
Table row span

| rowspan="2" | content
| second row content
| third row content
| second row content
| third row content

  • Notice one less cell in the second row.
content first row second cell content first row third cell content
second row second cell content second row third cell content
Parameters {{{parameter}}}
  • Parameters are usually part of a template.
  • To place a parameter:

{{Name of template
| parameter= name of parameter

  • Note the pipe before the parameter and the equal sign after.
name of parameter
If functions |{{#if:{{{parameter|}}}|name of parameter
{{{parameter}}} }}
  • Be careful and be sure that all symbols are present in your code. If a single pipe is missing, for example, this will not work.

| parameter= If nothing is entered after the equal sign the entire line will be missing.

If the parameter is blank, there is no line. If the parameter is added, the text will show.
Position relative <div style="position:relative">
  • You can place the relative position objects with top or bottom and left or right attributes:

<div style="position:relative;top:20px; left:100px">Stuff</div>

  • Remember relative position places objects in relation to where the browser would put the object on a page, if not told otherwise.
Position-absolute <div style="position:absolute">
  • All "position absolute" should be within "position relative" attributes.

<div style="position:relative">
<div style="position absolute; top:50px; left:50px">Stuff</div>

  • Remember absolute position places items in just where you want it.
  • You are not controlled by the browser as in relative position.'.
  • However, it ignores what is already on the page in the same spot and covers it up.
  • Most of the time your absolute positioned item will be inside relative position object.