Wikitext Cheatsheet: Difference between revisions

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

Margins

<span style="margin:10px">Lorem ipsum ....</span>

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

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

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

<span style="border:1px solid black; border-radius:5px">Lorem ipsum ....</span>

Can place border radius on one or more corners
Example: border-radius-top-right.

Lorem ipsum ....

border shadow

<span style="border:1px solid black; box-shadow:5px 5px 3px lightgray">Lorem ipsum ....</span>

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

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

Lorem ipsum ....

Alignment - horizontal

<span style="text-align:center">Lorem ipsum ....</span>

Can align in center and right.
Default alignment is left.

Lorem ipsum ....

alignment - vertical

<span style="height:50px; line-height:50px">Lorem ipsum ....</span>

Line height has to equal height of container.

Lorem ipsum ....

Tables

{\|	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)

<span style="float:right">Lorem ipsum ....</span>

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

Templates

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:

{{breadcrumb
| 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.

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

↑ This is a footnote

SEO

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.

United States

Missouri

Adair County

Guide to Adair County, Missouri ancestry, family history, and genealogy birth records, marriage records, death records, census records, 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
content	second row second cell content	second row third cell content

Parameters

{{{parameter}}}

Parameters are usually part of a template.
To place a 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

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

All "position absolute" should be within "position relative" attributes.

<div style="position:relative">
<div style="position absolute; top:50px; left:50px">Stuff</div>
</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.

[1] This is a footnote

[1]