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 never be more than one " | " symbol on the same line.

Improperly formatted code can cause various problems, and is often the cause of segments of the infobox's code being displayed on-screen as plain text; a common example of this being that the infobox header, which should display the "name" 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

Themes

See Also:Themes
This feature is in the process of being rolled out. Follow the link below for supported infoboxes
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.

• Available Themes (with samples)
• Supported Infoboxes

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). To modify the color, you will need to type the 6-digit hexadecimal RGB code for the desired color into the appropriate field. (see Selecting Colors below for more information)

Text Colors

Where available, text colors will usually be set by the fields "alltxtclr", "hdrtxtclr", "sbhdrtxtclr", and either "fldtxtclr" or "fldtxtclr1" and "fldtxtclr2". "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. In some instances, "fldtxtclr1" will set the text color on the left side (the title of the field), and "fldtxtclr2" will set the text color on the right side (the information entered by the user). As with background colors, you will need to type the 6-digit hexadecimal RGB code for the desired color into the appropriate field.

Selecting Colors

Wikipedia has a list of common colors and their hexadecimal values here, and a more expansive list here. When setting colors, do not type a "#" sign at the beginning, and do not put any spaces within the color code.

A simple method for finding the hexadecimal code of other colors 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, in decimal. You can also drag the cross hairs in the color window and the arrow on the brightness slider to find custom colors. 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.