Coding Guide

Here is a guide for those who need help with coding! For more help, ask Starflight897.

## 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: **Sera froze time.**

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

This created underlined text like this: John dodged a punch.

```

text

```

This creates a strikethrough: ~~Arlo made a barrier.~~

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

This creates small text: Isen targeted the nearest person.

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

This creates large text: Blyke shot a beam of energy.

**Wikitext**

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

```
''text''
```

This creates italic text: *Remi summoned sparks.*

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

This creates bold text: **Elaine healed an injury.**

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

This creates bold and italic text: ***Rei shot lightning.***

## 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. Buildings and characters have infobox's here.

**Character Infobox**

This is a example of a character 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>
```

 **Building Infobox**

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

 **Inhabitants** | 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>
```