FANDOM


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 Edit

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

Game Information
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 TablesEdit

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.

Character Table
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 TablesEdit

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 TextEdit

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 imagesEdit

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
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
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 TogetherEdit

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:

Character Table
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):

Character Table
Name
Lunasa Prismriver
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: 

Character Table
Lunasa Prismriver
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

Ad blocker interference detected!


Wikia is a free-to-use site that makes money from advertising. We have a modified experience for viewers using ad blockers

Wikia is not accessible if you’ve made further modifications. Remove the custom ad blocker rule(s) and the page will load as expected.