Badge Tutorial

WikiText does **not** function in the comments. To test out your coding, please either visit your sandbox or this page's talk page.

## Introduction

Badges are coded items made of Wikitext that are commonly used in articles and on profiles. They tell readers that the user is friends with someone, a club they are in, or that the page contains spoilers from the latest book! Badges are made from things called **templates**, which hold the code of the badge. Templates are **not** the same as articles and **must** be used to make a badge.

This tutorial will teach you how to create and use badges.

## Making Badges/Templates

### Step One: Create Page

Click the "Add new page" button. This should be in the upper right-hand corner of the wiki setup:

### Step Two: Make Template

Name the page. When prompted, name the page:

```
Template:

```
After 'Template:', write the name of the badge. **THIS IS A REALLY IMPORTANT PART, OTHERWISE YOUR PAGE MAY BE DELETED/MOVED! This is because if you do not type 'Template:' before it, it shows up in the edits, can't be inserted easily, and is just an overall hassle.**

### Step Three: Edit Source

Edit the template by clicking on the "Edit source" button. **Note: Badges are made by coding. If you do not know how to code, please request for someone to make the badge for you, or take a look at the beginner's guide and this blog post.**

Example of a friend badge:

A template does not just have to be friend badges, it can contain ANYTHING you like!

### Step Four: Adding Code

Now let's add the codes!

Badges usually refer to the kind of codes that look like friend badges, here is how it typically looks, but you can do whatever you want.

First you want to make a div, if you have no idea how to code, I suggest you read this blog.

```
<div>
Badge text here. You can add as much text as you want.
<div>

```

Now if you want a simple solid background color, you can do something like this:

```
<div style="background: skyblue;">
Badge text here. You can add as much text as you want.
</div>

```

If you want a border, you can also add one. Borders and Border Radius are good articles on that.

Next you need to add padding, padding makes space for the badge and overall just looks more pleasing. But if you want to leave it out that's fine too.

```
<div style="background: skyblue; padding: 10px;">
Badge text here. You can add as much text as you want.
</div>

```

You're basically done at this point, feel free to add more attributes, change the background for a fancier one, change the font, etc!

## Using a Template/Badge

To use a template/badge, type in {{NAMEOFBADGE}} and the badge will appear. **NOTE: You MUST type in the name of the badge EXACTLY right, otherwise this will not work.**

This is also where you'll also want to type in your Variables.

**If you just want to tell someone the code for a badge and don't want the badge to actually appear, type in <nowiki> tags around the {{NAMEOFBADGE}}. Remember to put in a closing nowiki tag:** `</nowiki>`

## Examples

* The {{Renovation}} Badge is used often on pages that are being changed. You can see this badge HERE.
* The {{Warning}} Badge is used on ALL pages to warn users that coding doesn't work in comments! It uses a Variable, too! See this badge HERE.
* The {{SafeSpace}} badge is used to show that users are in a safe space. You can see this badge HERE