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:
| HetaGame Title | |
|---|---|
| Image (if allowed) | |
| Creator | Game creator's name; include DeviantART userpage or any other website |
| Medium | Program used to make the game i.e. RPG Maker VX Ace |
| Genre | Game's story genre i.e. Adventure, Dark Fantasy, etc. |
| Language | What language the game originally was |
| Game Version | Chapter or game version |
| Game Status | What the game's status currently is (Ongoing, Discontinued, etc.) |
| Website | Creator's website (link to DeviantART, Tumblr, etc.) |
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.
| Name | |
|---|---|
| Image | |
| Nation Name | Nation's full name |
| Human Name | Nation's human name, canon or not |
| Age | Nation's biological age, canon or not |
| Species | Nation (default) |
| Birthday | Date nation was granted independence |
| Height | Nation's height, canon or not |
| Hair/Eye Color | Nation's hair and eye color, divided by a "/" |
| Relatives | What relatives a nation has, canon or not, blood-related or not |
| Occupation | What job or career a nation holds (if a puzzle RPG/visual novel is in another AU than Hetalia) |
The following table is meant for Adventure RPG characters only.
| Name | |
|---|---|
| Image | |
| Nation Name | Nation's full name |
| Human Name | Nation's human name, canon or not |
| Age | Nation's biological age, canon or not |
| Species | Nation (default) |
| Birthday | Date nation was granted independence |
| Height | Nation's height, canon or not |
| Hair/Eye Color | Nation's hair and eye color, divided by a "/" |
| Job Class | What job class a nation is assigned as |
| Weapon | What weapon(s) a nation carries |
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:
| Name | |
|---|---|
| Image | |
| Nation Name | Nation's full name |
| Human Name | Nation's human name, canon or not |
| Age | Nation's biological age, canon or not |
| Species | Nation (default) |
| Birthday | Date nation was granted independence |
| Height | Nation's height, canon or not |
| Hair/Eye Color | Nation's hair and eye color, divided by a "/" |
| Job Class | What job class a nation is assigned as |
| Weapon | What weapon(s) a nation carries |
Copy-paste the code to "Nation Name:"
| Name | |
|---|---|
| Image | |
| Nation Name | Nation's full name |
| Human Name | Nation's human name, canon or not |
| Age | Nation's biological age, canon or not |
| Species | Nation (default) |
| Birthday | Date nation was granted independence |
| Height | Nation's height, canon or not |
| Hair/Eye Color | Nation's hair and eye color, divided by a "/" |
| Job Class | What job class a nation is assigned as |
| Weapon | What weapon(s) a nation carries |
For the columns below, type in style="background:darktuquoise;"| (left to the text in the first column) and you will get this:
| Name | |
|---|---|
| Image | |
| Nation Name | Nation's full name |
| Human Name | Nation's human name, canon or not |
| Age | Nation's biological age, canon or not |
| Species | Nation (default) |
| Birthday | Date nation was granted independence |
| Height | Nation's height, canon or not |
| Hair/Eye Color | Nation's hair and eye color, divided by a "/" |
| Job Class | What job class a nation is assigned as |
| Weapon | What weapon(s) a nation carries |
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:
| Example | Example |
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:
| Example | Example |
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 File:Example.image file extension 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):
| Lyrica Prismriver | |
|---|---|
| |
| Example | Example |
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:
| Lyrica Prismriver | |
|---|---|
|
| |
| Example | Example |
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:
| Name | |
|---|---|
| Image | |
| Nation Name | Nation's full name |
| Human Name | Nation's human name, canon or not |
| Age | Nation's biological age, canon or not |
| Species | Nation (default) |
| Birthday | Date nation was granted independence |
| Height | Nation's height, canon or not |
| Hair/Eye Color | Nation's hair and eye color, divided by a "/" |
| Job Class | What job class a nation is assigned as |
| Weapon | What weapon(s) a nation carries |
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):
| Name | |
|---|---|
| |
| Nation Name | Nation's full name |
| Human Name | Nation's human name, canon or not |
| Age | Nation's biological age, canon or not |
| Species | Nation (default) |
| Birthday | Date nation was granted independence |
| Height | Nation's height, canon or not |
| Hair/Eye Color | Nation's hair and eye color, divided by a "/" |
| Job Class | What job class a nation is assigned as |
| Weapon | What weapon(s) a nation carries |
And finally add in some text:
| Lunasa Prismriver | |
|---|---|
|
| |
| Nation Name | ルナサ・プリーズムリバ |
| Human Name | Runasa Puriizumuriba |
| Age | Appears 11 |
| Species | Poltergeist |
| Birthday | Date nation was granted independence |
| Height | 5' 3" (160 cm) |
| Hair/Eye Color | Golden blond/Red |
| Job Class | Illusionist |
| Weapon | Violin |