Help:Infoboxes

This page will help you to create an infobox.

How to start- the basic structure
The basic structure of an infobox is like an ordinary table. In case you do not know how tables work, see Help:Tables.

The infobox is added a class called infobox: This class gives the infobox some special properties: if fixes it on the right side of the page, adds a border, background, and padding.

Now, we will add a style for the template: This uses the template InfoboxStyle, which includes the table style- width and border radius.

To save a lot of space...
The proccess of creating the top part of the infobox (that includes the headings and the image) is rather long. this section contains its final look. For the full steps, see Help:Infoboxes/top. The background color of the headings on this example is red. The red color values are marked in red in this section, so you can replace them with a different color value:  {| class="infobox" style=";" ! colspan="2" style="font-size: 120%; padding: 0.5em; background-color: #cc0000 ; color: #ffffff; -moz-border-radius: 5px; -webkit-border-radius: 5px; -o-border-radius: 5px; -icab-border-radius: 5px; -khtml-border-radius: 5px;" | ! colspan="2" style="padding: 0em; background-color: #cc0000 ; color: #ffffff; -moz-border-radius: 7px; -webkit-border-radius: 7px; -o-border-radius: 7px; -icab-border-radius: 7px; -html-border-radius: 7px;" | Information
 * - style="text-align:center"
 * colspan="2" style="padding:0.5em;" | |center
 * - style="text-align:center"

Adding rows
This section will give info for creating rows for the infobox.

A row would look like this:
 * Parameter

First line
The first row looks like any other row, but it has special style that will affect the continues rows. It has an extra style, that will make sure every table cell will have a width of 50% from the entire row. Otherwise, if the values of the parameters of the infobox on a certain page will be very long, the width of their row will be larger than the row with the iformation.

The first row is written like this:
 * style="width: 50%;" | Parameter
 * style="width: 50%;" |

The full rows
This is an example for the rows for an infobox:
 * style="width: 50%;" | Available
 * style="width: 50%;" |
 * Member item
 * Cost
 * Cost
 * Cost
 * Cost

Final step
Congratulations! You have accomplished your infobox :) now the first step is to add the closing part of the infobox, so every text that comes after it will be part of the article and not the infobox. It looks like this: |}

Including categories
You can also include a category in your template, by adding (suppose your category is called Foo):