Infoboxes are standard Fandom wiki templates that share information about something. Generally, they float on the right side of a page.
Adding an infobox to a page
You add infoboxes to wiki pages the same way you add regular templates. Here's how:
Visual editor
- Edit the page where you want to put the infobox.
- Along the top menu, go to "INSERT." Click the dropdown.
- Choose "Template." It is the first option.
- A dialog box appears. Start typing the name of your template in the search bar. It may begin with the word "Infobox." For example, "Infobox concept."
- The template data area will appear. Fill out the fields.
- Apply your changes.
You can go back and edit the infobox fields anytime you want. Just click on the infobox and hit "Edit" to reopen the dialog box.
Source editing
- Open your chosen infobox template in another tab or window. This will be helpful when you fill out fields.
- Edit the page where you want to put the infobox.
- Type the name of the infobox you want between two curly braces. For example, {{Infobox concept}}
- Begin adding parameters. You separate them with | symbols and use name=value for each one.
- Preview your code to make sure it looks good.
Here's an example of how your code might look:
{{Infobox concept
| title = My infobox
| category = Template
| first = Me
}}
Creating an infobox
You can create infobox templates on any wiki.
- Create a new page. Name it "Template:Infobox SOMETHING," replacing "SOMETHING" with whatever suits your template topic. For example,
Template:Infobox concept - A pop-up will appear asking you what type of template this is. Select "Infobox."
- The infobox builder will open.
- Add rows and section headings as needed. This part is fairly easy.
The infobox builder doesn't let you use all the options. You can switch to the source editor to add more info. Here's how to add more features with the source editor:
- Near the bottom right of the infobox builder, hit the button that lets you open the source editor.
- Categorize your infobox by adding noinclude tags and the "Infobox templates" category. Like this:
<noinclude>[[Category:Infobox templates]]</noinclude> - Consider adding or modifying instructions or information between the noinclude tags.
- Consider adding template data. This info will be displayed when people use the template in the visual editor.
Infoboxes on the Coding Help Wiki
We have a variety of infoboxes at the Coding Help Wiki. They can be found in Category:Infobox templates.
Some of the infoboxes you might like to use include:
- {{Infobox user}}, which is great for your profile page
- {{Infobox programming language}}, for describing a coding language
To the right, we have an example of the {{Infobox user}} infobox with a few fields filled out. It has a lot of potential parameters, so if you use it on your profile page, you can say a lot!
Custom infobox templates
Some people code their own infoboxes so they can edit the style in more detail. These can get complicated, so it's important to code carefully. Some tips:
- Remember to close all your tags. Type the closing tag right after the opening one.
- If you're specifying background colors or gradients, specify a text color too. Remember, some users use light mode and some use dark mode, which affects text color.
- Consider accessibility: readable text, calm colors, enough padding, etc.
Code by Josie
{| 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
|- style="border-bottom: 0px solid #999;color:white;"
| '''Intro'''
| Hi, my name is Josie.
|- style="border-bottom: 0px solid #999;color:white;"
| '''AJ User'''
| Alorix
|- style="border-bottom: 0px solid #999;color:white;"
| '''Discord User'''
| jxsie#2163
|- style="border-bottom: 0px solid #999;color:white;"
| '''Favorite Hobbies'''
| coding, formatting, reading
|}
|- style="border-bottom: 0px solid #999;color:white;"
| '''Intro'''
| Hi, my name is Josie.
|- style="border-bottom: 0px solid #999;color:white;"
|'''AJ User'''
| Alorix
|- style="border-bottom: 0px solid #999;color:white;"
|'''Discord User'''
| jxsie#2163
|- style="border-bottom: 0px solid #999;color:white;"
|'''Favorite Hobbies'''
| coding, formatting, reading
|}
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.
Last, the labels. |- style="border-bottom: 0px solid #999;color:white;". This is just the setup for the format and color of the text. |Intro. This is just the name of the label. | Hi, my name is Josie. is the content next to the label the | is necessary as a divider.
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.