Infoboxes

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

## Wiki Infobox (Visual)

First, enter Visual Editing mode. Infoboxes are produced through the wiki itself are more visual than code.

Then, click this button, as shown in the image.

After clicking the Infobox button, there should be a pop-up. There are already some infoboxes created if you'd like to try them out. To create your own, click the last button called "Add a new template". This should take you to the Infobox Builder.

From there, it's pretty self explanatory. You can create/customize however many titles, labels, or images you want. However, the colors are fixed and can't be customized because you are using the Infobox Builder, which is specific to the color scheme of the wiki. You can also change the names of your Section Header and Labels.

## Section Header

### Label

Text 3 here.

When you finish organizing your infobox, click publish. It will prompt you to create a name. Be sure to make it identifiable and unique.

This will show you the pop-up called "Template editor". Here you can type the text you want in the labels and add the image. Type the name of the image you'd like, such as "infobox.png". You can always come back to this screen by clicking the infobox in visual editor and clicking "Edit". If you ever feel like you need to rename a section header or label, click "View Template page" at the top of the pop-up.

Once you finish customizing, you can end up with something like the infobox on the right:

**This does NOT work with source code. If you try to make a wiki infobox in source code, it will not work because you need to create a template page.**

## Custom Infobox (Source)

When you make an infobox using source code, it's harder, but it is much more personal and customizable and just generally free. I'm only going to be describing a simple infobox without background designs, but feel free to come up with your own designs. Below is an infobox I made. I'll describe each part of the code, so we can all understand.

### Here is the code:

```
{| cellpadding="4" style="background:linear-gradient(to top, lightsalmon, white);border:6px ridge chocolate; border-collapse:collapse; color:white; float:right; font-size:15px; line-height:1.5; margin-right:10px; width:250px;"

! colspan="2" style="border-bottom: 0px solid #999; font-size:larger; text-align:center;box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);background:darkorange;color:white;"| Josie

! colspan="2" style="border-bottom: 0px solid #999; border-top: 0px solid #999; text-align:center;box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);background:darkorange;color:white;" | Random Information
{| cellpadding="4" style="background:linear-gradient(to top, lightsalmon, white);border:6px ridge chocolate; border-collapse:collapse; color:white; float:right; font-size:15px; line-height:1.5; margin-right:10px; width:250px;"
! colspan="2" style="border-bottom: 0px solid #999; font-size:larger; text-align:center;box-shadow: 0 7px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);background:darkorange;color:white;"| Josie
! colspan="2" style="border-bottom: 0px solid #999; border-top: 0px solid #999; text-align:center;box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);background:darkorange;color:white;" | Random Information

```

### Description of Code

Let's first dissect the code section by section. To start with, the `{|` marks the beginning of the code.

Then, `cellpadding="4"`. This is just a description of the space between the border and the contents of the infobox. Next is `style="background:linear-gradient(to top, lightsalmon, white)`. This describes the background of the infobox. You can change the colors, direction, and type of gradient, as described in Gradients and Backgrounds. Then `border:6px ridge chocolate; border-collapse:collapse`. This is just code like from Borders with 6px describing size, ridge describing type, and chocolate describing color. `color:white; float:right; font-size:15px; line-height:1.5`. These describe the text which is white in color, on the right side, size is 15px, and the line-height is 1.5. `margin-right:10px; width:250px;`. This describes the margin size and width respectively. The height is not defined because it depends on the amount/size of text.

The next two sections are almost the same because they describe the headings/titles. `! colspan="2" style="border-bottom: 0px solid #999; font-size:larger; text-align:center;` This is just general formatting of the Text Size, alignment, and Borders. `box-shadow: 0 2px 6px rgba(0,0,0,0.5)` This is the format for the shadow of the heading, showing the shadow length and color. `inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3)`. This is just formatting. And next, these (`background:darkorange;color:white` describe the background color of the heading and the color of the text respectively. Lastly, `| Josie` is the title of the infobox. The sizing of this heading is slightly different than that of the other because it's the title box. The main difference is that the text in the Title is larger.

#### Adding More

The source code version is highly customizable. You can change the background, colors, theme, font, etc. by using the editor or simply putting a div style tag before the infobox with attributes.