From Ravenblack CityWiki

Jump to: navigation, search

This is a step-by-step tutorial on how to edit or create a userbox. This also applies to vampboxes, since they are a subcategory of userboxes.

You should already be familiar with how to edit or create a basic wiki page. If not, then the guide on how to start a page is recommended to begin with.

Note that the key purpose of templates such as userboxes is to be of use on several pages. If you want a unique box on one page only, see #Unique userbox.


Step 1: Browse existing userboxes

Always begin by looking for what you want among the existing userboxes. Either you:

  1. find it and use that. Done!
  2. find the one that most resembles what you want. Proceed to step 2.

Step 2: Copy existing code

This vampire thirsts for knowledge.

A userbox is a template, and that is basically a wiki page that can be edited like any other. A template's special ability is to be included into any number of other pages. This means that many pages may be affected if you make edits to an existing template.

Click the edit tab for the existing userbox to see the code. It may look like the vampbox {{Scientist}} (seen to the right):

|maintext={{{1|{{charname|This vampire}}}}} thirsts for knowledge.

Note how it mostly consists of the template UserTemplate and its parameters. This forms the actual userbox.

At the end is the noinclude part, with the template VampboxDoc. This creates the standard documentation and categorization of the userbox.

The idea is to mark and copy (ctrl+C) all the code, and later paste it into your new userbox for a working start.

Step 3: Create new template page

Decide on a name for the userbox. It should be unique, appropriate and preferably clear and concise. Avoid acronyms. Never use the & (ampersand) character!

If the name is Pottery, then search for
. You should get the option to create the page Template:Pottery. Click that link to get to edit page of your new userbox.

Paste the code you copied from an exisiting template into the text area.

Click the Show preview button, and see the userbox you copied.

Step 4: Design

To make the new userbox look as you want it to, change the parts that are to be different from the copied one. The look of the userbox is controlled via the UserTemplate parameters.

headertext and maintext

  • The headertext parameter becomes the box title. It is usually in bold:
  • The maintext parameter becomes the text in the lower part. It is usually more descriptive:
    maintext={{{1|{{charname|This vampire}}}}} thirsts for knowledge.
The line
{{{1|{{charname|This vampire}}}}}
will become:
  • the first userbox parameter if provided
  • otherwise the character name if on a character page (see {{charname}} for details)
  • otherwise This vampire

If the maintext for some reason needs to be very long, it may not fit. You can then adjust the mainfontsize down to a lower value like 85% or so.


The image parameter is the file name of the square picture to the left in the userbox. It will be scaled to 60px width. Either find a suitable image among the files already on the wiki, or provide a new one by finding it online or creating it yourself.

If there already is an suitable square image on the wiki, and the file size is less than 15 kB or so then use that. If it is larger then consider downloading it and create a smaller version (see below). The reason for this is that a page usually has several userboxes, all being requested for different pages. Those image files being too large would put unneccessary strain on server bandwidth.

New images for userboxes should be properly preprocessed before upload. Make the image square. I suggest you crop or resize using a program like Paint (comes with Windows) or Paint.NET (free). Recommended sizes are 120x120 or 180x180 pixels for a file size below 10 kB. Recommended image formats are .jpg for photo-like images, and .png for drawn images with sharp contrasts. For help on how to upload the image, see Help:FileUpload.

Color parameters

Several parameters control colors:

  • bordercolor colors the outmost border of the userbox.
  • mainbackground colors the main (lower) field. Use a dark background if the main text contains links.
  • maincolor colors the text in the main (lower) field. Should contrast from mainbackground.
  • background essentially colors the inner borders between image, header and main field.
  • headerbackground colors the header (upper) field.
  • headercolor colors the text in the header (upper) field. Should contrast from headerbackground.

Color format is standard HTML, with a hash followed by red, green and blue components in two-digit hexadecimals. For example, #ff00ff is magenta (red+blue). This offers over 16.7 million color tones. Using only wider steps 00, 33, 66, 99, cc and ff for each component gives a more basic palette of 216 colors. Limiting the choices that way makes it easier to get close to the color you want.

For more about color codes, see

Choose colors freely, subject to:

  • Userbox theme, matching the image
  • Readability, with the right level of text/background contrast
  • Harmony with the colors of other userboxes and the wiki itself

For one of many online color-picking tools, see

Step 5: Categorize and document

For others to find and use your new userbox, it is important to put it into the proper category and to provide any needed instructions. This is done in the noinclude part of the template:



Start by browsing the userbox categories to find the proper place for your userbox. Note the subcategory name.

{{UserboxDoc}} and {{VampboxDoc}} both provide basic use documentation and place the box in a category. Use VampboxDoc for vampire-oriented stuff and UserboxDoc for real-life things.

Write the subcategory as a parameter for the UserboxDoc/VampboxDoc template, like:


If the parameter is left out, it defaults to Userboxes or Vampboxes respectively.

Custom usage description

For basic userboxes there is usually no need for further instructions. If there is something special for the user to consider, describe this by adding a heading and section in the noinclude part of the template.

Step 6: Save and use

Once you are satisfied with the editing, save the new template. It should then be ready to use in any number of wiki pages.

Unique userbox

For a unique userbox, there is no need to create a new template. Instead paste the {{UserTemplate}} code that forms the box directly into the page where the unique userbox should be. Benefits of this are not having to name it, and being able to easily post-edit it in-place. Also you don't have to worry about the noinclude section of a template with documentation, categorization et cetera.

To insert a unique userbox you follow steps 1, 2 and 4 above. Instead of creating a new template just copy-paste the existing code into the target page and proceed to designing it in-place. Remove the entire noinclude part. Replace any
{{{1|{{charname|This vampire}}}}}
with clear text.


|headertext='''There Can Be Only One'''
|maintext=I've got something to say: It's better to burn out than to fade away!


Swords 03.gifThere Can Be Only One
I've got something to say: It's better to burn out than to fade away!
Personal tools