General Infobox Guidelines

These guidelines are intended to help you implement Infobox templates into your pages and ensure that they work properly and look how you want them too.

Formatting infoboxes - {{{name}}} error

After editing an infobox in the pop-up window in Visual mode, be sure to check it in Source mode, as the pop-up window has a tendency to format infoboxes incorrectly. With the exception of information you have added, the layout should match the code displayed in the infobox's Usage Instructions (visible by following the Source link at the bottom of the infobox); there should be only a single field name and corresponding entry on each line, and there should be only a single vertical bar ("|") at the beginning of a line.

Improperly formatted code can cause various problems; most commonly, segments of the infobox's code will be displayed on-screen as plain text. A common example of this is that the infobox header, which should display the Name parameter entered by the user, will instead display "{{{name}}}".

Sizing infoboxes

Infobox width

By default, an infobox will automatically stretch to accommodate the widest object or line of text contained within. To set a fixed width, most infoboxes include a "width" field, which can be used by simply entering a number followed by an abbreviated unit of measurement. Usable units include pixels (px), inches (in), centimeters (cm), and millimeters (mm), among others. (example: "|width=300px", this will make the infobox 300 pixels wide)

You should never set the infobox's width to be narrower than the infobox's image, as this will distort the infobox. Images will not automatically re-size to fit an infobox.

Image width

You can set the width of an image by following the filename with "|###px" (example: "|image = [[File:Image.jpg | 300px]]"). This will set the image's width to entered number of pixels (px), and will scale the height accordingly.

Hiding Subheaders

You can hide unused subheaders by entering any value in the corresponding "hide" field. Hide fields will be listed among the normal fields in the order in which the corresponding subheaders appear, and will be named "hide" followed by either the first letter or an abbreviation of the subheader's title; for example, if the title is "Political Information", the hide field will be "hidep". This is useful when you do not fill out any of the fields under a certain subheader, and do not want it to appear in the infobox.

Colors

When using modular infoboxes, you may customize the display colors. Some non-modular infoboxes may also offer limited color customization.

Themes

See Also:Themes
You may choose from a (growing) list of pre-defined color schemes by typing the name of the desired theme into the "theme" field. This will set background and text colors for the entire infobox, and will override any other custom color settings. Not all themes set every color, however, and those which are not set may still be customized. Theme names are case-sensitive, but some common mis-capitalizations are supported.

Background Colors

Most infoboxes allow you to customize their colors. Typical options include the image background, header, and subheader colors, and some infoboxes have options for the field background.

Typically, the fields will be "imageBG" for the image background, "BG1" for the header, and "BG2" for subheaders. Where available, "BG3" will usually refer to the field background. These names are not absolute, however, so be sure to read the specific instructions on the infobox template's page (visible by following the Source link at the bottom of the infobox).

Text Colors

Where available, text colors will usually be set by the fields "alltxtclr", "hdrtxtclr", "sbhdrtxtclr", and "fldtxtclr". "alltxtclr" will apply a color to all text within an infobox, except for text which is set to a different color by one of the following color options. "hdrtxtclr" will set the Header text color, "sbhdrtxtclr" will set the Subheader text color, and "fldtxtclr" will set the field text color.

Selecting Colors

There are several ways to set colors. The simplest is to enter a Web Color name. Wikipedia has a list of common colors and their hexadecimal values here, and a more expansive list here.

For more flexibility, you may enter colors using their RGB values. This is done by typing "rgb(#, #, #)", replacing each # with the desired value. For example, red would be "rgb(255, 0, 0)".

You may also enter RGB values using hecadecimal color codes. These consist of three hexadecimal values representing the red, green, and blue values of the color. Hex color codes must be entered with no spaces between values and without the hash (#) which normally precedes them. For example, red would be "FF0000". Hex color codes may be shortened to three digits, as long as each value consists of the same digit; from the previous example, red would be shortened to "F00".

A simple method for finding the RGB values of a color is to open Microsoft Paint, paste an image with the desired color, select the color using the Pick Color tool, and go to Colors > Edit Colors > Define Custome Colors. The Red, Green, and Blue values of the selected color will be displayed in the lower right-hand column.

If desired, you can then use MS Calculator to convert these values to hexadecimal, by selecting View > Scientific, selecting "Dec" if it is not already set, entering the decimal value, and then selecting "Hex". In this way you can obtain the two-digit hexadecimal values for the red, green, and blue values, which combine to form the 6-digit color code.