Userboxes are colorful templates that share information about a person. People can add userboxes to their profile pages. They are a common, fun part of wiki culture. Some userboxes are simple, while others use parameters for complex customization.

Here are a few examples of userboxes:

Using userboxes

Adding existing userboxes to your profile page is easy.

Here's how to do it in the visual editor:

1. Edit your profile page.
2. Go to Insert > Template.
3. Start typing the userbox's name into the search bar. The first word will be "User." Once you find the userbox you want, select it.
4. You will probably be shown a list of parameter options (e.g. box color). Fill that out however you like.
5. Save it and see what you think! To make changes, just click the userbox (while editing the page). It'll let you edit it.

In source mode, you add userboxes the same way you add other templates. For example, typing {{User kind|color=Pink}} will add the {{User kind}} template and make the box color pink. (Make sure to check the template's page to see what parameter options you have.)

The Coding Help Wiki has the {{Userbox display columns}} template. This allows you to arrange userboxes in columns. Try it out if you'd like!

Remember that you can add multiple instances of a userbox to your page. For example, perhaps you love Star Trek and The Hunger Games, and you want to say so with {{User fan}}. You don't need to cram both into one template. Instead, add {{User fan}} twice. Put "Star Trek" in one and "The Hunger Games" in the other.

Creating userboxes

Anyone can create a userbox.

On the Coding Help Wiki, userboxes use either the {{Userbox}} or {{Userbox themed}} template as a base. {{Userbox themed}} is more common because it comes with a pretty predefined color set.

If you're working with a wiki that doesn't have userboxes yet, scroll down to the next section to get set up first. Then come back here.

Here's how to make a new userbox on wikis that already have userbox templates:

1. Create a new template. Name it "Template:User..." and fill in whatever name you want. For example, "Template:User loves userboxes"
2. In another tab, open an existing userbox to use as a base. We recommend {{User loves solving puzzles}} as a convenient base.
   1. {{User loves solving puzzles}} is simple, with color parameters only. (Not ready to adjust parameters? You don't need to touch that part at all!)
   2. {{User kind}} has color parameters and a parser function with icon options. This can be a good base if you want to let users pick between icons.
   3. {{User is young}} has an example of conditional color filters. You can reference that if you plan to adjust icon colors.
   4. {{User has X}} is one of our most complex userboxes. That could be a good starter if you're planning a complicated magnum opus.
3. Copy-paste the code of that userbox into your new userbox.
4. In your new userbox, replace references to the old name with the new name. Use Control + F (Windows) or Command + F (Mac). Find instances of the old name (e.g. "Template:User loves solving puzzles"). Replace them with the new name.
5. Change up the template code itself. You may want to change text, icon options, and more. Preview often to see how it looks.
6. Edit the template data so it matches your changes. This helps make sure users don't get confused when they use your userbox.
7. Change the description between the noinclude tags. You want it to match your code and its parameters.
8. Add whatever categories seem fitting. Our userbox categories can be seen in Category:Userboxes. The "List of userboxes" category will be auto-added.
9. Once it looks good, save it. It's ready to use!

As an alternative, you can use {{Userbox}} or {{Userbox themed}} directly on your profile page and fill out the fields to your liking.

Coding Help Wiki tip You can check Category:Icons for icons you can use in your userboxes. We have quite a few!

Bringing userboxes to a wiki you love

Maybe a wiki you like doesn't have userboxes yet. You can add them!

First, you'll need to pick a template. You can use:

• The traditional userbox template (found at the Templates Wiki)
• The {{Userbox}} template created by MissLunaRose (which is what we have, and which includes an extended version called {{Userbox themed}}). This one has additional options, like letting you apply CSS filters to images.

Pick whatever you prefer. If you plan to copy over a batch of userboxes from a different wiki, you should use the same base template that the wiki has.

Let's say you're using our {{Userbox}} template as a base. (If using the other, just modify the instructions to match.)

1. Go to your wiki and create a template called Template:Userbox.
2. Copy our {{Userbox}} code and paste it in there. If it asks for a template type, you can call it "Non-article."
3. In the "More info" section, mention that you copy-pasted it from the Coding Help Wiki and link back to our template. (It's nice to give credit.)
4. Save the page.
5. Create our two recommended categories, Category:Userboxes and Category:List of userboxes.
   1. Category:Userboxes is a subcategory of Category:Templates. If you decide that you want userbox subcategories in the future (e.g. "User fandom" or "User favorite things"), you can put them in here.
   2. Category:List of userboxes is a subcategory of Category:Userboxes. All userboxes using {{Userbox}} and {{Userbox themed}} get automatically added to this category. It lets people see all existing userboxes in one place.

That's all you technically need to do. But maybe you're not done yet. It might be nice to...

• Copy over {{Userbox display columns}}. This can be handy whenever people want to put userboxes in columns.
  • The template's description uses {{Userbox themed}}, some images, and an infobox template. Swap in images and templates as needed.
• Copy over {{Userbox themed}}. This lets people pick between premade color themes.
  • The template's description uses {{Userbox display columns}} and some images. Add the template and swap in different images as needed.
  • It comes with a preprogrammed color scheme. If you're comfortable playing with parser functions, you can adjust the colors to match your wiki's color scheme.
• Copy over some of our icons. These are free to use with credit.
  • Go to Special:NewFiles, drag in the icon, and hit "More options" before finishing. Then write "Art by ARTIST NAME" (using the artist's name). You have now credited the artist. Cool!
  • When you download images, you may get them in .webp format instead of the original (e.g. .png). You may convert them back to .png or just leave them as-is. But keep file extensions in mind when you're reusing them. If your file extensions don't match, the images won't display!
• Copy over some of our existing userboxes. Once you've got the templates and the icons, you can copy over exact userboxes. For example, maybe you want {{User favorite color}}, {{User loves music}}, or more. Go ahead and copy-paste!
• Admins: Enable link color control classes. Go to your wiki's custom CSS. On both desktop and mobile, add CSS for link color control. (Feel free to change the specific colors and add/change classes.) Here's an example you can use as a template:

  • /* Link color classes for templates like Userbox */
    .dark-links a { color: MidnightBlue; }
    .light-links a { color: LightCyan; }
    

• Go to the discussions/forums and announce that you've added userboxes. Maybe share a screenshot. This lets people know they can start adding userboxes to their pages too!

The joy of userboxes is meant to be shared. All our userboxes and icons are free to copy over unless stated otherwise.

See also

• Badge Tutorial
• Barnstars
• Parser functions
• Templates
• Template parameters

External links

• Userboxes at The Wiki Wiki