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:

Here's the CSS coding in my Google Docs

It is just so that it looks similar to the Final Fantasy game infoboxes. The CSS also applies to flash games, puzzle RPGs, visual novels, etc. it can basically be used for everything. Please DO NOT alter the CSS in ANY way for ANY reason.

HetaGame Character Tables
The character template has a revamped table with CSS. However, this is probably targeted for Adventure RPGs.

Here is the table:

The CSS coding is for Adventure RPGs. Only for Adventure RPGs. Please DO NOT alter the CSS.

While the table above is the default for characters, I'm gonna alter the CSS for different game genres. In the case of a puzzle RPG or else a visual novel, it's gonna be this:





















You can delete the last section if this doesn't apply to whatever puzzle RPG/visual novel you're making. Otherwise, the CSS itself CANNOT be altered.

Coloring the Tables
Character articles like this and this have tables colored in, corresponding to whatever HetaGame it belongs to. And I'm referring to the table color scheme. Simply put, whatever color scheme a table has is dependable on the game's mood/setting, or else both. Here below, I'm going to show you how color in tables.

Before I go any further, though, the most important thing to have is a good color sense. Having a good color sense means you have to find the right colors for a character article you're making for your or else somebody else's game. 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.

First, 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:

And there you have it! ^__^ This tutorial will come in handy when you want to make character articles in the future!

I know I didn't cover anything, but like I said, if you want to know more info, you have to check the Tables Help artcle in the Final Fantasy wiki, the link is above.