Sandbox

Editing

This page is designed to give you a quick 'go to' place whenever you need a bit of code to adapt to your own needs. If what you are looking for isn't listed here then please check this page out.

New Style headers:

New Header with bold extras

Are formed by:

<div class="row">
<div class="large-6 column">
<h2  class="subheader">New Header with <strong>bold</strong> extras</h2>
</div>
</div>



Subheaders can be coded with this syntax:

<div class="row">
<h4 class="subheader">New Subheader</h4>
</div>
</div>

Which results in:

New Subheader

The above syntax is especially useful if you want to combine a header with an image or some extra text on the right while keeping things responsive:

New Header with Image

featuring an optional new subheader

Bacon ipsum dolor amet jerky landjaeger short loin fatback beef beef ribs. Spare ribs chicken chuck ribeye pork loin pig prosciutto turkey kielbasa picanha porchetta.

Art Deco Boucheron Bracelet.jpg

This is written as such:

<div class="row">
  <div class="large-6 column">
<h2 class="subheader">New Header with Image</h2>
<h4 class="subheader">featuring an optional new subheader</h4>
<p>Bacon ipsum dolor amet jerky landjaeger short loin fatback beef beef ribs. Spare ribs chicken chuck ribeye pork loin pig prosciutto turkey kielbasa picanha porchetta.</p>
  </div>
  <div class="large-6 column">
[[File:Art_Deco_Boucheron_Bracelet.jpg]]
  </div>
</div>



And then there is of course the old style headers:

Header

Written:

==Header==

And

Subheader

Written:

===Subheader===

All these headers will automatically result in a table of content (TOC) being displayed above the first header (like on this page). Keep in mind that this may be somewhere halfway down the page if this is where the first header is placed. If you don't want a table of content to be displayed you can add __NOTOC__ at the top of the page.

General Editing


In order to create a responsive layout of articles that feature a myriad of media it is important to know how the Grid system works.
There is two rules:
1. The horizontal rule (<div class="row">) which groups stuff horizontally on wide screens but stacks stuff vertically on small screens.
2. The vertical rule (<div class="columns">) which groups stuff vertically and tells the horizontal rule how to stack stuff vertically when the screen gets smaller.

Everything will end up being stacked vertically on small screens, the second rule tells small screens in what order to stack items vertically.

On the vertical there is twelve units so whatever column configuration you are building, the total amount will have to add up to twelve.
Example:

<div class="row">
  <div class="large-6 columns"><p>Bacon ipsum dolor amet sausage frankfurter pastrami bacon chicken meatloaf. Short ribs landjaeger filet mignon kielbasa. Alcatra chicken shoulder, salami doner prosciutto cow venison biltong shank ribeye jerky meatball strip steak. Chicken beef ribs sausage ham hock doner. Ribeye biltong salami porchetta pig ground round beef ribs cupim tongue chuck turducken doner pork belly frankfurter meatloaf. Bresaola prosciutto alcatra boudin salami capicola tongue brisket flank bacon, shankle pancetta beef ham hock meatloaf.</p><p>Sausage swine flank boudin biltong, drumstick pig spare ribs pork belly corned beef cupim ball tip. Short ribs short loin biltong meatball tail chicken tenderloin beef tongue sausage ground round corned beef ham hock. Flank cow alcatra tri-tip frankfurter beef ribs bresaola chuck pork chop cupim landjaeger ball tip pork filet mignon pork belly. Ham hock shank tongue, venison pastrami jowl prosciutto. Bresaola ham hock brisket ground round, short ribs bacon corned beef boudin turkey chuck doner chicken sirloin ball tip. Doner pork chop spare ribs prosciutto. Venison ribeye short loin, pig picanha doner ham pork chop pancetta salami.</p></div>
  <div class="large-6 columns">[[File:Art_Deco_Diamond_Sapphire_Brooch.jpg]]</div>
</div>


Brings you:

Bacon ipsum dolor amet sausage frankfurter pastrami bacon chicken meatloaf. Short ribs landjaeger filet mignon kielbasa. Alcatra chicken shoulder, salami doner prosciutto cow venison biltong shank ribeye jerky meatball strip steak. Chicken beef ribs sausage ham hock doner. Ribeye biltong salami porchetta pig ground round beef ribs cupim tongue chuck turducken doner pork belly frankfurter meatloaf. Bresaola prosciutto alcatra boudin salami capicola tongue brisket flank bacon, shankle pancetta beef ham hock meatloaf.

Sausage swine flank boudin biltong, drumstick pig spare ribs pork belly corned beef cupim ball tip. Short ribs short loin biltong meatball tail chicken tenderloin beef tongue sausage ground round corned beef ham hock. Flank cow alcatra tri-tip frankfurter beef ribs bresaola chuck pork chop cupim landjaeger ball tip pork filet mignon pork belly. Ham hock shank tongue, venison pastrami jowl prosciutto. Bresaola ham hock brisket ground round, short ribs bacon corned beef boudin turkey chuck doner chicken sirloin ball tip. Doner pork chop spare ribs prosciutto. Venison ribeye short loin, pig picanha doner ham pork chop pancetta salami.

Art Deco Diamond Sapphire Brooch.jpg

Whereas this:

<div class="row">
  <div class="large-8 columns"><p>Bacon ipsum dolor amet sausage frankfurter pastrami bacon chicken meatloaf. Short ribs landjaeger filet mignon kielbasa. Alcatra chicken shoulder, salami doner prosciutto cow venison biltong shank ribeye jerky meatball strip steak. Chicken beef ribs sausage ham hock doner. Ribeye biltong salami porchetta pig ground round beef ribs cupim tongue chuck turducken doner pork belly frankfurter meatloaf. Bresaola prosciutto alcatra boudin salami capicola tongue brisket flank bacon, shankle pancetta beef ham hock meatloaf.</p><p>Sausage swine flank boudin biltong, drumstick pig spare ribs pork belly corned beef cupim ball tip. Short ribs short loin biltong meatball tail chicken tenderloin beef tongue sausage ground round corned beef ham hock. Flank cow alcatra tri-tip frankfurter beef ribs bresaola chuck pork chop cupim landjaeger ball tip pork filet mignon pork belly. Ham hock shank tongue, venison pastrami jowl prosciutto. Bresaola ham hock brisket ground round, short ribs bacon corned beef boudin turkey chuck doner chicken sirloin ball tip. Doner pork chop spare ribs prosciutto. Venison ribeye short loin, pig picanha doner ham pork chop pancetta salami.</p></div>
  <div class="large-4 columns">[[File:Art_Deco_Diamond_Sapphire_Brooch.jpg]]</div>
</div>


Brings you this:

Bacon ipsum dolor amet sausage frankfurter pastrami bacon chicken meatloaf. Short ribs landjaeger filet mignon kielbasa. Alcatra chicken shoulder, salami doner prosciutto cow venison biltong shank ribeye jerky meatball strip steak. Chicken beef ribs sausage ham hock doner. Ribeye biltong salami porchetta pig ground round beef ribs cupim tongue chuck turducken doner pork belly frankfurter meatloaf. Bresaola prosciutto alcatra boudin salami capicola tongue brisket flank bacon, shankle pancetta beef ham hock meatloaf.

Sausage swine flank boudin biltong, drumstick pig spare ribs pork belly corned beef cupim ball tip. Short ribs short loin biltong meatball tail chicken tenderloin beef tongue sausage ground round corned beef ham hock. Flank cow alcatra tri-tip frankfurter beef ribs bresaola chuck pork chop cupim landjaeger ball tip pork filet mignon pork belly. Ham hock shank tongue, venison pastrami jowl prosciutto. Bresaola ham hock brisket ground round, short ribs bacon corned beef boudin turkey chuck doner chicken sirloin ball tip. Doner pork chop spare ribs prosciutto. Venison ribeye short loin, pig picanha doner ham pork chop pancetta salami.

Art Deco Diamond Sapphire Brooch.jpg


Of course you can reverse this for images on the left:

Art Deco Diamond Sapphire Bracelet.jpg

Bacon ipsum dolor amet sausage frankfurter pastrami bacon chicken meatloaf. Short ribs landjaeger filet mignon kielbasa. Alcatra chicken shoulder, salami doner prosciutto cow venison biltong shank ribeye jerky meatball strip steak. Chicken beef ribs sausage ham hock doner. Ribeye biltong salami porchetta pig ground round beef ribs cupim tongue chuck turducken doner pork belly frankfurter meatloaf. Bresaola prosciutto alcatra boudin salami capicola tongue brisket flank bacon, shankle pancetta beef ham hock meatloaf.

Sausage swine flank boudin biltong, drumstick pig spare ribs pork belly corned beef cupim ball tip. Short ribs short loin biltong meatball tail chicken tenderloin beef tongue sausage ground round corned beef ham hock. Flank cow alcatra tri-tip frankfurter beef ribs bresaola chuck pork chop cupim landjaeger ball tip pork filet mignon pork belly.


With this code:

<div class="row">
 <div class="large-4 columns">[[File:Art_Deco_Diamond_Sapphire_Bracelet.jpg]]</div>
  <div class="large-8 columns"><p>Bacon ipsum dolor amet sausage frankfurter pastrami bacon chicken meatloaf. Short ribs landjaeger filet mignon kielbasa. Alcatra chicken shoulder, salami doner prosciutto cow venison biltong shank ribeye jerky meatball strip steak. Chicken beef ribs sausage ham hock doner. Ribeye biltong salami porchetta pig ground round beef ribs cupim tongue chuck turducken doner pork belly frankfurter meatloaf. Bresaola prosciutto alcatra boudin salami capicola tongue brisket flank bacon, shankle pancetta beef ham hock meatloaf.</p><p>Sausage swine flank boudin biltong, drumstick pig spare ribs pork belly corned beef cupim ball tip. Short ribs short loin biltong meatball tail chicken tenderloin beef tongue sausage ground round corned beef ham hock. Flank cow alcatra tri-tip frankfurter beef ribs bresaola chuck pork chop cupim landjaeger ball tip pork filet mignon pork belly. </p></div>
</div>


Note that the text consists of two paragraphs, one could replace the second paragraph with another image:

Art Deco Diamond Sapphire Bracelet.jpg

Bacon ipsum dolor amet sausage frankfurter pastrami bacon chicken meatloaf. Short ribs landjaeger filet mignon kielbasa. Alcatra chicken shoulder, salami doner prosciutto cow venison biltong shank ribeye jerky meatball strip steak. Chicken beef ribs sausage ham hock doner. Ribeye biltong salami porchetta pig ground round beef ribs cupim tongue chuck turducken doner pork belly frankfurter meatloaf. Bresaola prosciutto alcatra boudin salami capicola tongue brisket flank bacon, shankle pancetta beef ham hock meatloaf.

Art Deco Engraved Diamond Ring.jpg


By coding the following:

<div class="row">
 <div class="large-5 columns">[[File:Art_Deco_Diamond_Sapphire_Bracelet.jpg]]</div>
  <div class="large-7 columns"><p>Bacon ipsum dolor amet sausage frankfurter pastrami bacon chicken meatloaf. Short ribs landjaeger filet mignon kielbasa. Alcatra chicken shoulder, salami doner prosciutto cow venison biltong shank ribeye jerky meatball strip steak. Chicken beef ribs sausage ham hock doner. Ribeye biltong salami porchetta pig ground round beef ribs cupim tongue chuck turducken doner pork belly frankfurter meatloaf. Bresaola prosciutto alcatra boudin salami capicola tongue brisket flank bacon, shankle pancetta beef ham hock meatloaf.</p><center>[[File:Art_Deco_Engraved_Diamond_Ring.jpg]]</center></div>
</div>


Working with this simple grid system, respecting the 'holy 12', you can format any article to your liking. There is a whole lot more possible with Zurb's grid system, like defining how stuff scales down on small screens but we'll leave that for later.

Links

Linking is one of the most important features of the wiki. There is two possible kinds of links: internal links that refer to other pages on the wiki, and external links which link to other pages on the web.

Here's the syntax for links in Mediawiki pages:

Normal internal link: [[Main Page]], resulting in this: Main Page

Internal link with alternative text: [[Main Page|Alt Text]], resulting in this: Alt Text

Plain external link: http://www.external_links.com, resulting in this: http://www.external_links.com

External Link with alternative text: [http://www.external_links.com External link with alternative text], resulting in this: External link with alternative text

Image syntax

In order to display an image on a page you will first need to Special:Upload the image to the wiki.

The old thumbnails are pesky when it concerns responsiveness so it is far better practice to use a grid structure when you want to use a subscript with an image. When re-editing articles get rid of them unless it is a one-paragraph - one image page.

Here's an example of a grid built thumbnail with some text beside it:

<div class="row">
  <div class="large-3 columns"><center>[[File:Asscher_Cut_D_Flawless_Golconda_Diamond_Ring.jpg]]</center>
    <center><p style="font-size:80%">Subscript</p></center>
  </div>
  <div class="large-9 columns"><p>Bacon ipsum dolor amet sausage frankfurter pastrami bacon chicken meatloaf. Short ribs landjaeger filet mignon kielbasa. Alcatra chicken shoulder, salami doner prosciutto cow venison biltong shank ribeye jerky meatball strip steak. Chicken beef ribs sausage ham hock doner. Ribeye biltong salami porchetta pig ground round beef ribs cupim tongue chuck turducken doner pork belly frankfurter meatloaf. Bresaola prosciutto alcatra boudin salami capicola tongue brisket flank bacon, shankle pancetta beef ham hock meatloaf.</p>
 
<p>Sausage swine flank boudin biltong, drumstick pig spare ribs pork belly corned beef cupim ball tip. Short ribs short loin biltong meatball tail chicken tenderloin beef tongue sausage ground round corned beef ham hock. Flank cow alcatra tri-tip frankfurter beef ribs bresaola chuck pork chop cupim landjaeger ball tip pork filet mignon pork belly.
  </p>
 </div>
</div>


Asscher Cut D Flawless Golconda Diamond Ring.jpg

Subscript

Bacon ipsum dolor amet sausage frankfurter pastrami bacon chicken meatloaf. Short ribs landjaeger filet mignon kielbasa. Alcatra chicken shoulder, salami doner prosciutto cow venison biltong shank ribeye jerky meatball strip steak. Chicken beef ribs sausage ham hock doner. Ribeye biltong salami porchetta pig ground round beef ribs cupim tongue chuck turducken doner pork belly frankfurter meatloaf. Bresaola prosciutto alcatra boudin salami capicola tongue brisket flank bacon, shankle pancetta beef ham hock meatloaf.

Sausage swine flank boudin biltong, drumstick pig spare ribs pork belly corned beef cupim ball tip. Short ribs short loin biltong meatball tail chicken tenderloin beef tongue sausage ground round corned beef ham hock. Flank cow alcatra tri-tip frankfurter beef ribs bresaola chuck pork chop cupim landjaeger ball tip pork filet mignon pork belly.


Of course you can also display images without a subscript:

<div class="row">
  <div class="large-4 columns"><center>[[File:Hidden treasures 19 copy copy.JPG|200px]]</center></div>
  <div class="large-4 columns"><center>[[File:Hidden treasures 19 copy copy.JPG|200px]]</center></div>
  <div class="large-4 columns"><center>[[File:Hidden treasures 19 copy copy.JPG|200px]]</center></div>
</div>


Which results in:

Hidden treasures 19 copy copy.JPG
Hidden treasures 19 copy copy.JPG
Hidden treasures 19 copy copy.JPG

Image link

You can also turn an image into a link by adding the link=Page Name tag to the syntax:

[[File:Hidden treasures 19 copy copy.JPG|center|link=Main Page|200px]]

Which results in:

Hidden treasures 19 copy copy.JPG


Whitespace & enter

Whenever you need a whitespace because you think things are too packed together you can use several <br /> tags. Each <br /> tag will equal one 'enter'.

Tables

For more information on tables, click here.

Here's some basic tables:

{|class="wikitable"
|-
!header
|-
|text
|text
|-
|text
|text
|}

Which results in:

header
text text
text text

A table with a header:

{|class="wikitable"
|-
!colspan="2"|header
|-
|text
|text
|-
|text
|text
|}

Which results in:

header
text text
text text

A table with width defined:

{|class="wikitable" width=80%
|-
|text
|text
|-
|text
|text
|}

Which results in:

text text
text text

Centering bits of text

You can center tables, text, widgets etc by enclosing it in between center tags: <center>text</center>
Resulting in:

text


Widgets

In order to plug all kinds of external features such as youtube videos, google maps, vimeo videos etc etc into the wiki we use widgets. More information about widgets can be found here. Below are a few examples you will use a lot:

Iframe widget

With the iframe widget you can plug any other webpage into the wiki. Simply replace the url that is displayed here with that of the site you want to plug and adjust the parameters width, height and border to your liking.

{{#widget:Iframe
|url=http://en.wikipedia.org/wiki/Diamond
|width=100%
|height=500
|border=0
}}

Results in:

Book embedding Widgets

google books

This widget can be used to plug Google Books texts into the wiki. Here's how you do this:

1. Find a book you want to plug, let's say this book.
2. Copy the url: http://books.google.com/books?id=UmsDAAAAQAAJ
3. Then copy the bit behind 'id=': UmsDAAAAQAAJ
4. Paste that code in the widget shown below.
5. Define the width and height.

So that you get something that looks like this:
{{#widget:Google Books
|id=UmsDAAAAQAAJ
|height=750
|width=700}}

Results in:


archive.org

This widget is the the iframe widget mentioned above with its parameters adapted so that it makes full use of the width of our pages. It can be used to plug online books from archive.org into the wiki. Here's how to do this:

1. Find a book on archive.org. Let's say... this book.
2. On the book page on archive.org, click on 'read online':

Archive.jpg

3. Copy the url of the page that will pop up and paste it in the widget below:

{{#widget:Iframe
|url=http://www.archive.org/stream/historyofbigbona00wrigrich#page/2/mode/2up
|width=950
|height=700
|border=0
}}

This will result in:

Vimeo Video embedding

1. Go the to vimeo video you want to embed.

2. Copy the number behind vimeo.com/

3. Paste the number behind the 'id=' in the following widget:

<center>{{#widget:Vimeo|id=20281170}}</center>

Which results in:

Youtube video

Another widget is used for youtube videos. Here's how that works.

1. Copy the url of the youtube video you want to plug. This should look like this: http://www.youtube.com/watch?v=JIpGc-zvVRI.
2. Copy the bit behind the 'v=' which in this case is: 'JIpGc-zvVRI'
3. Paste that code behind the 'id=' in the following widget code:

{{#widget:YouTube |id=bORAvMd9BnI |width=853 |height=480 |border=0 }}

Then set the width, height and border values the way you want 'm.

The above code results in:

Example: