Help:Editing guide

This is a basic guide on how to use wiki syntax to format articles. The software allows for the usage of HTML syntax, but one should use the wiki syntax, as this makes the code more readable.

This page provides several examples on how to use wiki syntax as well as the code necessary to achieve it.

If you would like to test your edits, please do so in the sandbox.

Paragraphs

To separate paragraphs, you must leave a blank line between one paragraph and the next (two line breaks), so that the second paragraph will appear separated from the first. If you only insert one line break (i.e., when you press "Enter"), all of the text appears together, as if a line break had not been inserted. If you leave more than one blank line, the space between paragraphs will increase, so therefore we ask you do not leave any more than one blank line. Here are some examples:

This text is written as an example to show how to edit a wiki. We are stretching this text so that it appears on multiple lines.

This is the second paragraph, which, as you can see, is separated from the previous one by two line breaks, that is, with a blank line in between. This text is an example to illustrate how to edit a wiki.

This text is written as an example to show how to edit a wiki. We are stretching this text so that it appears on multiple lines.

This is the second paragraph, which, as you can see, is separated from the previous one by two line breaks, that is, with a blank line in between. This text is an example to illustrate how to edit a wiki.

This text is written as an example to show how to edit a wiki. We are stretching this text so that it appears on several lines. This is a new line but it actually appears to be part of the previous one because there is no blank line between it and the previous line.

This text is written as an example to show how to edit a wiki. We are stretching this text so that it appears on multiple lines.
This is a new line but it actually appears to be part of the previous one because there is no blank line between it and the previous line.

Links

Internal links

Links are the best way to interrelate all the articles around PikloDex. If you think it might be relevant to put a link to another PikloDex article in your text, go ahead! This will make it easier for a reader to reach that article and learn more about it, if it exists. If the article does not exist, they will also know because the link will appear in red and they can create it by clicking on it.

To insert a link, type the title of the page you want to link to (not the address) in double brackets. Use the '|' symbol to display a different text. Alternatively, click the link button to the right of the italicized I button in the editing toolbar and add the link in the top input and the display text in the bottom input.

Link to existing page: Main Page

[[Main Page]]

Link to a non-existent page

Non-existent page

[[Non-existent page]]

Link to a page but displaying a different name in the link

The following link will take us to the home page.

The following [[PikloDex|link]] will take us to the home page.

Link to a section of a page showing another name in the link

Pokémon games will take us to the "Games" section within the "Pokémon" page.

[[Pokémon (franchise)#Games|Pokémon games]] will take us to the "Games" section within the "Pokémon" page.

Link to a page using the page name with a suffix

Moves

[[Move]]s

Links to image pages: To display a link to the image page and not the image itself, you must add two dots (:) before the page name. See below for images.

Pikachu illustration by Ken Sugimori

[[:File:Pikachu.png|Pikachu illustration by Ken Sugimori]]

Links to other wikis

In some cases you may find it necessary to link to another wiki, such as Wikipedia. They are known as interwikis, which are done in the same way as internal links, but by adding one or more prefixes to the name of the page to be linked. Examples:

Link to a Fandom wiki: The prefix is wikia: followed by the wiki prefix and another dot (e.g. pokemon:), and the page name (e.g. Bulbasaur). When put together, this makes wikia:pokemon:Bulbasaur. wikia:pokemon:Bulbasaur

Link to Wikipedia and similar projects

Wikipedia, Wikibooks, Wikimedia Commons, MediaWiki

[[wikipedia:Main Page|Wikipedia]],
[[wikibooks:Main Page|Wikibooks]],
[[wikimediacommons:Main Page|Wikimedia Commons]],
[[mediawikiwiki:Main Page|MediaWiki]]

Note that to link to any of the four wikis above in a different language, you need to add a language code (e.g. es for Spanish) between the interwiki and the page title, which may have to be adjusted accordingly. For example, [[wikipedia:es:Portada]] links to the front page of the Spanish Wikipedia.

External link

For other cases, you can use the web address directly, without brackets. You can also put it in single brackets. If you want a different name to appear, you should not use a |, but a space. The first space found will separate the address from the text to be displayed.

Alternatively, you can also add an external link by clicking the link icon to the right of the italicized I icon, clicking the button left of "To an external page," and repeating the same steps as when using the toolbar to add a regular link, except the top input is for adding the link (note that it adds the http:// prefix automatically).

Text to display

Example, SourceForge, Email

[http://www.example.com/ Example],
[https://sourceforge.net/ SourceForge],
[mailto:[email protected] Email]

Modify the text

Bold and italics

You can format text in bold and italics. This is achieved by placing triple and double apostrophes (') around the text respectively. You can also use the B and I buttons on the editing toolbar to add sample bold and italic text, respectively.

Bold and italic text

Bold and italic text

Text in '''bold''' and ''italic''.

Bold and italics combined

We add italics to this bold text

To this text in '''bold we add '''italics'''''

Changing the color

It is possible to adjust the color of text from its default black to another color. To do this, you must input {{color| before the word, followed by a word of the color and lastly two closing brackets. For example, you can format "Mario" in red by inputting {{color|Mario|Red}}, thereby producing Mario.

There is the more cumbersome method of adding the prefix , where the desired color is added after color: and the text between the prefix and closing tag  (e.g. Mario results in Mario). However, because we have the Color template, we ask that you do not use this method.

It may be advisable to use colors in hexadecimal format, which begin with a pound sign and are followed by by six digits (e.g. #FF0000 for red) instead of the names of the colors themselves, as the latter is not supported in all browsers.

They could possibly be used to indicate the colors of a table, as a legend. Note:

Green: They are correct.
Red: The are incorrect.

This is the code:

* {{color|Green|green}}: They are correct.
* {{color|Red|red}}: The are incorrect.

If you want to change the color of a linked text, then the code would be as follows:

* {{color-link|Bulbasaur|green}}

Bulbasaur

For a list of possible colors to use, see the color palette page.

Warning: This should be avoided in most cases, as changing the color can make the text unreadable depending on the combination of text color and background color.

Modify the font

By default, the text always has a font, but it is possible to change it. This can be used, for example, to decorate a title. To do this,  write the font you want in the white space. At the end of the text, write . Its use is the same as to change the color.

Look at an example:

Comic Sans is a classic. Times New Roman is also a classic. Calibri has both formal and informal uses.

Look at its code:

<span style="font-family:'Comic Sans MS';">Comic Sans is a classic</span>.
<span style="font-family:'Times New Roman';">Times New Roman is also a classic</span>. 
<span style="font-family:'Calibri';">Calibri has both formal and informal uses</span>.

Warning: This should not be used on articles. There is a risk that a custom font may not be installed by certain users or readers, in which case the browser selects a substitute font and causes the article to look different. In the worst case, the font can make the text unreadable.

Modify the size

Changing the size of a word or text is used to highlight it, normally it is not necessary since there are headings. For special cases, this is what you have to do: from where it is inserted  to where it is inserted , the size will change.

Look at an example:

The word text is at 150% size.
Now the size of the word text has been made large.

This is the code:

* The word <span style="font-size:150%;">text</span> is at 150% size.
* Now the size of the word <span style="font-size:large;">text</span> has been made large.

To change the size you can also enclose the text between , which reduces the size, and <big>, which enlarges it.

Headings

Headings or subheadings are for separating different parts of an article and organizing information. Note that they will also automatically generate a table of contents, as long as there are at least four headings in the article or as you have configured in your preferences.

Headings are created by adding equal signs (=) to the beginning and end of a line. The more signs are added, the lower-level the heading is, making it less prominent. The highest-level heading should consist of two equal signs on each side.

Here is an example, a heading scale. In this example you can compare the difference between each heading. This other one, which is a more common example, is the structure presented in nearly every article.

This would be your code:

 == Headline ==
 ===Subtitle===
 Text
 === Another section ===
 More text.
 == More information ==
 Information

Images

To insert images into PikloDex, you must first upload them, or choose one that is already uploaded. Simply insert a link to the image page or click the fourth button in the editing toolbar, to the right of the link button. The list of all extensions that can be used on the image can be found in the upload form.

The image can have several parameters that control its position and display, in any order, but it is recommended to leave the descriptive text of the image for last. Only the name of the image is mandatory.

[[File:IMAGE NAME.EXTENSION|FORMAT|POSITION|SIZE|DESCRIPTIVE TEXT.]]

Extensión

jpg / jpeg: Most commonly used extension for photographic images. It supports compression with loss of quality, though it does not support transparency. It is recommended only for large images.
png: Higher quality extension for graphics, diagrams, sprites, and official images. It allows for transparent backgrounds, true colors, and lossless compression. It is recommended for images with large areas of similar colors.
gif: An animated image extension that only supports 256 colors. It has support for simple transparency and animations. The extension is only recommended for small, low-color images and animations.
svg: Extension used for graphics and diagrams. It allows for transparent backgrounds and real colors. They are vector images that can be resized without losing quality. Internally, they are an XML file, so they are very easy to modify. When using svg, they are converted to PNG format on the fly, because not all browsers support the format.
oga: An extension used to listen to sounds and short songs without a background. It stores data in files for computers and transmits audiovisual streams.

Format

thumb / thumbnail: A scaled-down version (200px maximum if no other size is specified) of the image appears and is aligned to the right (unless otherwise specified).
frame: The image is displayed in a frame, in its original dimensions.

Alignment

right: Aligns the image to the right, with the text floating to the left. This is always done by default, so adding this is redundant.
left: Aligns the image to the left, with text floating to the right.
center: Aligns the image to the center. The text is displayed below the image.
none: The image is not aligned and is on the same line as the text.

Link

link=Page: Adding the title of an article after the equals sign makes it so that clicking on the image links to the article instead of the image description page. If link= is left blank, the link is left blank and does nothing when clicked.

Size

numberpx. Specifies the width of the image in pixels. If numberxnumberpx is specified, the number will specify the maximum height and width of the image while always retaining the image aspect ratio. This does not work with frame.

Descriptive text

Any other text not recognized as a parameter. It appears when you hover over the image, and if the format is thumb or frame, it will appear below it.

Examples

[[File:Pikachu.png|thumb|Thumb format]]
[[File:Pikachu.png|thumb|320px|At 320px]]

When multiple images need to be displayed, it is preferable to use galleries, which display the images side by side, with a short description below, and no text around them. This way, the images always appear in their place regardless of the width of the screen and the length of the surrounding text.

The basic syntax is:

<gallery widths="190px">
File:Pikachu.png|Image of Pikachu
File:Pichu.png|Image of Pichu
</gallery>

Which is displayed as this:

Image of Pikachu
Image of Pichu

For more information, see Help:Images.

Lists

Lists are used to make enumerations or to show a sequence.

List of bowling alleys

They are created by starting the line with an asterisk. If we put more asterisks in a row, the line will be more indented.

This is an item
- This is another item more indented than the first one
- Same as above
We return to the upper level

*This is an item
**This is another item more indented than the first one
**Same as above
*We return to the upper level

Ordered list

They are created by starting each line with one or more pound sign (#), like the bowling list.

First action
Second action
1. This action has subsections
2. Other
We continue

# First action
# Second action
## This action has subsections
## Other
# We continue

Definition list

They consist of a title and one or more elements that depend on it. Although it is possible to use only one of the two elements. It is used to indent comments in talk pages or paragraphs. The title is formed by starting the line with a semicolon (;) and the elements with two points (:)

Holder: An item; Another item.

; Holder
: An item
: Another item.

A comment

Another indented comment

Even more indented

We are back

A comment
: Another indented comment
:: Even more indented
: We are back

Tables

There is a button to generate in the rightmost button of the editing toolbar, under "Advanced," but it is better to understand how they work. The table syntax is by lines. The first line of a table must be {| followed by optional HTML attributes that will modify the appearance of the entire table. The last line will be |}.

The table is made up of rows. Each row is a line that starts with |- followed by optional HTML attributes that will modify the appearance of the row and its cells.

Cells can be written on the same line or on different lines. There are two types: normal cells and title cells. Normal cells start the line with a vertical bar (|) followed by the content, or by HTML attributes and the content separated by another vertical bar. To separate two cells, either type the cell next to the first one, separating it with two vertical bars, or start a new line, as if it were the first cell. Title cells always format the text bold and center it, and they are formed the same as normal cells but start the line with an exclamation mark (!) and separate the cells on the same line with two exclamation marks instead of two vertical bars.

Title 1a-1b		Title 1c	Title 1d
Cell 2a-3a	Cell 2b	Cell 2c	Cell 2d
Cell 2a-3a	Cell 3b	Cell 3c-3d 4c-4d
cell 4a	cell 4b	Cell 3c-3d 4c-4d

{| class="table" style="margin:auto; width: 80%"
|- style="color:blue; background:orange;"
! colspan="2" | Title 1a-1b
! Title 1c
! Title 1d
|-
| rowspan="2" style="text-align:center" | Cell 2a-3a
| Cell 2b
| Cell 2c
| Cell 2d
|-
| Cell 3b
| colspan="2" rowspan="2" | Cell 3c-3d 4c-4d
|-
| cell 4a
| cell 4b
|}

As you can see, some example HTML attributes have been added. If you don't know how to improve a table in an article, that's okay. Someone who knows will give it a tweak. Likewise, if you need a table for your article, you can ask veteran users like Gstar (talk · contribs).

Predefined table styles

There are some predefined styles in this wiki that can be applied to tables easily and without having to write much code. To do this, you need to add a table-level property. You can put multiple styles separated by spaces inside the class property class="styles to apply".

Hay algunos estilos predefinidos en esta wiki que se pueden aplicar a tablas de forma fácil y sin tener que escribir apenas código. Para ello hay que agregar como propiedad a nivel de tabla un class="estilos a aplicar". Multiple styles separated by spaces can be put inside the class property.

Default wiki style

It will add border to cells and background colors. class="wiki"

To make the first act as the table header and appear in a different color, you must use a color at the first row level class="heading"

Heading 1	Heading 2
data 1	data 2
data 3	data 4

{| class="wiki"
|- class="header"
! Heading 1 !! Heading 2
|-
| data 1 || data 2
|-
| data 3 || data 4
|}

Alternatively, you can use simply the table class if you want your table to have black borders:

Heading 1	Heading 2
data 1	data 2
data 3	data 4

{| class="table"
! Heading 1 !! Heading 2
|-
| data 1 || data 2
|-
| data 3 || data 4
|}

List style

This adds borders to the cells and background colors and also highlights the row over which the mouse pointer is positioned. The height of the cells are also reduced slightly. To use this, add class="list".

To prevent the first row (or more than one) from being highlighted when you hover over it, use class="heading".

Heading 1	Heading 2
data 1	data 2
data 3	data 4
data 5	data 6
data 7	data 8

{| class="list"
|- class="header"
! Heading 1 !! Heading 2
|-
| data 1 || data 2
|-
| data 3 || data 4
|-
| data 5 || data 6
|-
| data 7 || data 8
|}

Gallery

Adding class="gallery" is the same as the default style but applying a column width of 80px, to insert sprites. Take one with Pokémon, for example:

Trainer	Bulbasaur	Squirtle	Charmander

Rival	Level 5

{| class="gallery"
|- class="header"
! Trainer
! [[Bulbasaur]]
! [[Squirtle]]
! [[Charmander]]
|-
| [[File:Blue FRLG.png|Rival]]
| [[File:Bulbasaur FRLG.png|Bulbasaur]] <br />[[File:Grass type icon FRLG.png|Grass]] [[File:Poison type icon FRLG.png|Poison]]
| [[File:Squirtle FRLG.png|Squirtle]] <br />[[File:Water type icon FRLG.png|Water]]
| [[File:Charmander FRLG.png|Charmander]] <br />[[File:Fire type icon FRLG.png|Fire]]
|- class="header"
| Rival
| colspan="3" | Level 5
|}

Column alignment

To align columns, you can use table-level styles of the type class="col1cen col2left col3right". They use the following syntax: col + column number + alignment ( left; center; right)

Esta alineación se realiza con CSS, especificación que soporta la mayoría de los navegadores ámpliamente usados, excepto Internet Explorer anterior a la versión 7. Si usas Internet Explorer 6 o inferior piensa en usar navegadores más seguros y funcionales como Mozilla Firefox u Opera.

Cells are aligned left by default, but if you want all cells centered except one, use: (for example, column 2 left aligned)

{| class="col2left" style="text-align:center;"

For an example see the next section.

Sortable tables

For cases where it might be useful to sort a list alphabetically or numerically, buttons will appear in the first row to sort the remaining rows from the selected column. This is handled by class="sortable", and the arrows will appear only if JavaScript is enabled.

In order for one of the columns not to be sortable, because it contains a description that will not be useful for sorting, one must place class="unsortable" at the cell level of the first row.

Item	Price	Description	Type
Cheri Berry	350	Cures paralysis	Fire
Oran Berry	50	Restores HP	Normal
Pecha Berry	150	Cures poisoning	Grass
Magost Berry	200	To make Pokéblocks	Water

{| class="sortable list col2right col4center"
|- class="header"
! Item !! Price !! class="unsortable" | Description !! Type
|-
| Cheri Berry  || 350 || Cures paralysis || Fire
|-
| Oran Berry || 50  || Restores HP || Normal
|-
| Pecha Berry  || 150 || Cures poisoning || Grass
|-
| Magost Berry || 200 || To make Pokéblocks || Water
|}

Escape the code

Sometimes you may need to use some of the notations described here for other purposes, such as starting a line with an asterisk but not wanting it to look like a bowling list. In such cases, code that might confuse the software (because it doesn't know whether you really want to format it as a bowling list or have it appear as is) should be enclosed between the <nowiki> and </nowiki> respectively. Alternatively, the tags can be added from the editing toolbar, by clicking the icon of double brackets struck out, under "Advanced." Remember that everything included between these tags will be displayed as is and will not recognize links. You don't need to put all the text between the tags either. If you want to display double brackets without creating a link, for example, you can use them in part of the text:

This [[link]] will not be seen as such

This <nowiki>[[</nowiki>link]] will not be seen as such

* This, which would normally appear as a list, will not actually be displayed like this.

<nowiki>*</nowiki> This, which would normally appear as a list, will not actually be displayed like this.

https://www.ssbuniverses.com/ with link and https://www.ssbuniverses.com/ without link

https://www.ssbuniverses.com/ with link and <nowiki>https://www.ssbuniverses.com/</nowiki> without link

Hidden text

In certain situations, it is useful to put text in the article that is only visible when editing the article, but not if you are just viewing it. This can be useful for giving editors directions on things that need to be fixed, how to edit a certain part of the article, and so forth. This is known as a comment or an HTML comment.

Anything between  will not be displayed in the article, but will be displayed in the edit box when someone edits it.

For example (check it by clicking on the edit link in this section):

This is a sentence. There is hidden text between the previous sentence and this one.

This is a sentence. <!--
 *** hidden text that will not be displayed ***
--> There is hidden text between the previous sentence and this one.

Special pages

Redirects

Sometimes the subject of the article may be known by several names. Then "redirects" are created, which are special pages that go directly to the correct name. For example, in Europe and Australia, the name of the second game of the Luigi's Mansion series is Luigi's Mansion 2, but in North America, it Luigi's Mansion: Dark Moon. If you click the former link, you will see that it redirects to Luigi's Mansion: Dark Moon, as American English titles take precedence on PikloDex over British English. Also, if you look closely, you will see that when accessing a page from the redirect, it appears under the title Redirected from <link>.

Redirects are very easy to create. And they are used for different purposes:

As in the previous example, when there are several names of a subject.
When a name is prone to misspelling or may be misspelled with a common spelling ( WarioWare Twisted -> WarioWare: Twisted! ).
When an article can be searched by the plural ( Poison Mushrooms -> Poison Mushroom ).

In short, create any redirect that you feel is necessary for the reader when searching for an article.

Redirects are created as follows, edit the name you want to redirect and enter #REDIRECT [[page name]]. For example, for Picachu to redirect to Pikachu, its code is #REDIRECT [[Pikachu]].

Note: Although this is usually unnecessary and therefore uncommon, redirects are sometimes categorized. For more information, see Help:Categories#Categorizing redirects.

Disambiguation

Sometimes the name of an article can refer to several things. In these cases, disambiguation pages are created. An introductory phrase is put, such as XXX can refer to: and the possibilities are listed below. Finally, the most important thing is to add {{disambiguation}} at the end.

A good example would be Pearl. In Pokémon games, there is an object called pearl, but there is also a character with that name. So if you visit the page you will find them listed. You can edit that page to see the syntax.

Advanced syntax

There are more things that can be done on a wiki, but this usually occurs in only a very few cases. You can visit the Wikipedia editing guide: Help:Editing or Help:Cheatsheet, where some aspects that are not mentioned here are mentioned. Likewise, if you ever need to use them but you don't know how to use them or you need help, you can consult a veteran user, such as Gstar (talk · contribs).