HetaGame Infobox Templates

'''Note: Please keep the right-column WHITE in your grids (With black text). You may change the left column colour and "Game Name" background to a desired colour.'''

Before you go on ahead with the CSS I'd recommend making a personal sandbox for yourself for practice.

If you remember my most recent blog entry, I've repolished the HetaGame template by adding in a new and refurbished table. The reasons are disclosed there.

You don't have to swtich to source mode to edit the text; you can easily edit it in visual mode. For coding though, you have to do it in source mode.

Game Informtaion Tables
Now, to the tables. For articles regarding HetaGames, the default is this:

You can find the code here in Google Docs

- Please keep this information format constant for all game pages. (If certain information is not know, leave the spaces blank for others to fill in the future.)

- Please do not alter the code.

HetaGame Character Tables
The character template has a revamped table with CSS.

To the right is the basic Hetalia Game character table. Below it is the character table for Adventure RPG characters.

- Please DO NOT alter the CSS.

'''The following table is meant for Adventure RPG characters only. '''

Coloring the Tables
While we want to keep the wiki looking clean by keeping approximately the same layouts for each page, we do allow the table headers (Game/Character Names/Information titles such as "Height" or "Weapon") to be coloured.

'Please keep in mind though, that the colours used must still allow the text to be clearly'' read. '''

Some colour options could be pastel colours with black text or very dark colours with white text. You could also give your character pages a colour theme based on the character or game itelf such as mood or genre. For example, HetaOni, if you're making an article and putting in the CSS coding for a certain character (i.e. Italy), the most appropriate colors would be dark red and crimson. Good examples are this and this, which have the allowed headers to be coloured.

To begin colouring your headers, copy and paste the table CSS.

To add in a color, type in "background:insert first color;" after "width:300px;",(without the quotation marks, obviously) in this case, we're going to use a dark turquoise, which will be "background:darkturquoise;" which yields to this:

Copy-paste the code to "Nation Name:"

For the columns below, type in style="background:darktuquoise;"| (left to the text in the first column) and you will get this:

Coloring Text
Remember the HetaOni example I made earlier? Well, we're gonna make a sample table with darker colors, but with light-colored text, usually white.

Below is the sample table with the darker colors, in this case, dark red and crimson: As you can see, the text is hard to read because, normally, the default text is black. To fix this, type in "color:white;" (once again without the quotation marks) right of the background color, which results in this: That way the text easier to read. Usually, any lighter color would do, but white is the default text with dark colors.

Adding in images
You might notice in the above steps that the two above areas have colspan="2" in them. Well, the "col" refers to "column," so in the case of colspan, it means that the area is extened over two rows, Preferably for the title and image. You can refer to the Help:Tables article on the Final Fantasy wiki for more info on that.

In the source editor you might notice there are 14 buttons on the text field. The sixth button is the "Embed file" button, which means you can embed an image, usually in the form of with .jpg, .gif, .png, etc. (Any other image extension will do.) All you have to do is click on it and type in a file name between [[File: and add in an extension, within the brackets. after colspan="2"|, and it should end up like this (with Lyrica volunteering):

But we can see that the image is too big thus manipulating the table width. No worries, we can fix that by changing image size. To do this, type in whatever image size you want it to be in front of the file name while still in the brackets (after the "|"), in this case, 150 pixels large: Alrighty, now we know about coloring the tables and text and adding in images and resizing them to a reduced size! Now, let's put it all together, shall we?

Putting it all Together
With some basic table CSS knowledge covered, let's code together an infobox. Open up your personal sandbox and switch to source mode. Copy and paste the character infobox CSS code. Type in whatever color you want to use. Remember, first color for the first column and name header, second color for the second column. Light-colored text is for dark colors, like so:

Add in an image and reduce to between 150 and 300 pixels in size (depending on how large the image is (and having Lunasa as our victim HARHAR):

And finally add in some text: