Coding Guide

Here is a guide for those who need help with coding!

## Text

Text has a handful of different things you can do to change and edit it's appearance. Here are some of the basics.

```
<b>text</b>
```

This creates bolded text like this: **Olive floated higher.**

```
<u>text</u>
```

This created underlined text like this: Emma sparked a blaze.

```

text

```

This creates a strikethrough: ~~Fiona reached for a leaf.~~

```
<small>text</small>
```

This creates small text: The hollow leapt at Hugh.

```
<big>text</big>
```

This creates large text: The wight glared at the peculiars.

**Wikitext**

Wikitext is used when you click the italic or bold buttons. It works like the regular commands.

```
''text''
```

This creates italic text: *Miss Perigrine flew south.*

```
'''text'''
```

This creates bold text: **Bronywn picked up a boulder.**

```
'''''text'''''
```

This creates bold and italic text: ***Jacob controlled the hollow.***

## Color

There are a few different ways to use the color codes, this will just cover the Hex code.

**Hex**

Hex codes are six digit codes, the numbers going (#RRGGBB). The first two digits are red, the middle green, and the end blue. #ffffff would be white, while #000000 would be black. If you want transparency, add two numbers to the end of the code. #ffffff00 would show up as white but completely transparent.

**ColorHexa**

ColorHexa is a great way to find colors for your pages. Here is the link.

## Background

There are various ways to set up the background. This will explain a basic background and a gradient background.

**Basic**

```
<div style="background: #ffffff; border: 2px solid #000000; padding: 10px; color: #000000;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
```

This would show up as this:

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

**Gradient**

```
<div style="background: radial-gradient(#a0f090, #9198e5); border: 2px solid #000; padding: 10px; color: #000000;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
```

Would make this:

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

## Infoboxes

Infoboxes are things that show a lot of information about something in a short amount of writing. Peculiars, Peculiar Animals, Ymbrynes, and Loops all have infobox examples here.

**Pecuiliar Infobox**

This is a example of a peculiar infobox.

```
<noinclude>
{| cellpadding="4" style="border-collapse: collapse; float: right; width: 250px; margin: 0 0 7px 14px; background: #eeeeee; border: 1px solid #999999; color: #000000; font-size: smaller; line-height: 1.5;"
! colspan="2" style="background: #cccccc; border-bottom: 1px solid #999; text-align: center; font-size: larger;"| Name here
! colspan="2" style="background: #cccccc; border-bottom: 1px solid #999; border-top: 1px solid #999; text-align: center;" | Background Information
! colspan="2" style="background: #cccccc; border-bottom: 1px solid #999; text-align: center;" | Character Information
</noinclude>
```

**Peculiar Animal**

This is a Peculiar Animal infobox. It is very similar to the Peculiar infobox, however there are a few differences.

```
<noinclude>
{| cellpadding="4" style="border-collapse: collapse; float: right; width: 250px; margin: 0 0 7px 14px; background: #eeeeee; border: 1px solid #999999; color: #000000; font-size: smaller; line-height: 1.5;"
! colspan="2" style="background: #cccccc; border-bottom: 1px solid #999; text-align: center; font-size: larger;"| Name here
! colspan="2" style="background: #cccccc; border-bottom: 1px solid #999; border-top: 1px solid #999; text-align: center;" | Background Information
! colspan="2" style="background: #cccccc; border-bottom: 1px solid #999; text-align: center;" | Character Information
</noinclude>
```

**Ymbryne Infobox**

This is for the Ymbrynes, a basic infobox specialized for them.

```
<noinclude>
{| cellpadding="4" style="border-collapse: collapse; float: right; width: 250px; margin: 0 0 7px 14px; background: #eeeeee; border: 1px solid #999999; color: #000000; font-size: smaller; line-height: 1.5;"
! colspan="2" style="background: #cccccc; border-bottom: 1px solid #999; text-align: center; font-size: larger;"| Name here
! colspan="2" style="background: #cccccc; border-bottom: 1px solid #999; border-top: 1px solid #999; text-align: center;" | Background Information
! colspan="2" style="background: #cccccc; border-bottom: 1px solid #999; text-align: center;" | Character Information
</noinclude>
```

**Loop Infobox**

This is a infobox to give basic information about a loop.

 **Day Repeated** | type here

```
<noinclude>
{| cellpadding="4" style="border-collapse: collapse; float: right; width: 250px; margin: 0 0 7px 14px; background: #eeeeee; border: 1px solid #999999; color: #000000; font-size: smaller; line-height: 1.5;"
! colspan="2" style="background: #cccccc; border-bottom: 1px solid #999; text-align: center; font-size: larger;"| Loop name here
</noinclude>
```