Wiki Guide/Source Code Guide

If you're looking to make your page more complex, it's strongly advised that you utilize the source editor.

## How to Find the Source Editor

There are two basic ways to open the source editor.

### Default Editor

When you open the main editor by clicking the blue edit button, you can find and modify the source code by clicking on the three horizontal bars at the top of your editing screen, then choosing Source Editor.

File:Visual2.png
File:Visual3.png
### Classic Editor

It's a little easier to find on the Classic Editor.

File:Source1.png
File:Source2.png
## Beginning your Character Page

We have a character page template in order to speed up the process. The code below contains the Model Hogwarts character infobox, as well as a few basic headings to get you started.

After pasting this in, you can go ahead and replace **Example** with whatever fits your character best. You don't need to fill out every single part of the infobox.

```
{{Character
}}

((Introduction Text))
==Appearance==
((Text))
==Personality==
((Text))
==Background==
((Text))

```

## Basic Formatting Tips

One of the most important basic rules is to make sure you always close your tags.

```
[[File:image1.jpg
```

```
{{Character
```

```
'''Bold
```

```
<blockquote>Blockquote
```

All of are missing their end tag, and will probably break other stuff if they're not added! This may seem simple, but if something is going wrong, this could be the solution.

### **Bold and Italics**

**Bold** and *Italics* can be used for emphasis.

```
'''Bold''' and ''Italics''

```

### **Headers**

Headers are very easy to make. You can look below for an example as to how the two headers above was made. In order to make subheadings, you increase the amount of the equal signs (**=**) surrounding the words, up until six.

```
== Basic Formatting Tips ==
=== '''Headers''' ===

```

### **Links**

Depending on what you're linking, the exact code will be different. Linked categories must contain a colon (**:**) after the first set of brackets. When you're linking an external source, or just a website link, you'll only use one bracket, through you should add a display name otherwise it shows up like this: [1].

```
[[Page Name]]
[[Page Name#Page Section]]
[[Page Name|Display Name]]
[[:Category:CATEGORYNAME]]
[[File:image.png]]
[website.com Display Name]

```

### **Listing**

Listing can be done with using bullets or numbers with the pound sign (**#**) or an asterisk (**\***).

1. Owl
2. Cat
3. Rat

```
# Rat

```

* Owl
* Cat
* Rat

```
* Owl
* Cat
* Rat

```

* Owl
	+ Cat
	+ Rat

```
* Owl
** Cat
** Rat

```

You can even combine the two.

1. Owl
	* Cat
	* Rat

```
# Owl
#* Cat
#* Rat

```

### Page Breaks

You can create a page break just by pressing enter twice, but you can also use the break tag in order to go to a new line, like this.

This is one line.

This is another line.

```
This is one line.<br>
This is another line.

```

### Blockquotes

Sometimes it's necessary to quote a character. To do this, blockquotes are recommended.

>
> Quote
> — Person
>
>
>
>

```
<blockquote>
Quote
— Person
</blockquote>

```

## Fancy Formatting Tips

### Tabs within a page

You can include tabs in your page in order to show different content.

* First Year
* Second Year
* Third Year
First year was boring.

Second year was a little better.

Third year was awful.

```
<tabber>First Year=First year was boring.
</tabber>

```

As well, you can put tabs in your infobox to show different versions of your character. I can't show a preview of that, but you can find examples on the pages of Christine Marilyn, Estelle Martin and Layla Silverwood.

You can replace whatever is currently in your **image1** slot in your infobox to include this. Make sure to include the **.png** or **.jpg** part of your image file.

```
</tabber>

```

### Tabbed Page

If your page is very long, it sometimes helps to divide it up into tabs. An example of this can be found on the Quidditch page: it is divided into information and years. You do this by creating several pages, and then creating a "main" page that holds all of these pages.

Your main page should be named your character's name (we can call them **John Doe** for now). The sub pages should begin with your character's name, then have a slash (**/**), then have the content you want on that page. So if you want three tabs on your page, you would have four pages total, and they would be named:

* John Doe
* John Doe/Introduction
* John Doe/Background
* John Doe/Relationships

The main page, John Doe, should contain only this code:

```
<tabview>
John Doe/Introduction|Introduction
John Doe/Background|Background
John Doe/Relationships|Relationships
</tabview>

```

The sub pages can contain whatever you like. They will be formatted like "normal" character pages, only they will be separate from each other.

Once you have these pages set up, your page will be tabbed. Remember that if you want to make changes to any of these pages, you can't edit them from the main **John Doe** page. You have to go to each individual page.

For organizational uses, it is highly recommended that you tag all of the sub pages with the category Category:Tab View.

### Galleries

Galleries are fun ways to organize images of your character. You can also have multiple galleres in a page.

Image1.jpgCaption 1Image2.pngCaption 2

```
<gallery orientation="none">
image1.jpg|Caption 1
image2.png|Caption 2
</gallery>

```

## Redirects

Sometimes the title of your character page isn't what people will always be searching for. For example, you want your character's page to be named **John Hubert Doe**, but everyone will be searching for John Doe. Or even worse, he goes by his middle name Hubert most of the time, and nobody knows to look for John.

If that's the case, you should create a redirect. Create a new page and name it what you want to redirect to your current page.

Once you are editing the new page, go into the source editor and put:

```
#redirect [[Page Title]]

```

It may prompt you to confirm that you want the page to redirect. It may not prompt you. Either way, with this code in place, the page will redirect to the one you want if people search for it.