Character Bio Coding ; ; How To Individualize It

[shades]

Hey there,

Well, insomnia has been at it again for an hour. So after watching movies and then slapping myself with cold water; then pacing to Grant Gustin singing. I decided I should share my coding to my character bios. If you have not seen them, I suggest you look. Though the characters themselves are not done, the coding took me an hour and a half to perfect; plus another half hour to find a nice color set. And I hate coding, I really do. Despite being able to speak HTML and BBCode fluently.

The coding itself can be switched out for whole different images; and I'm going to show you how to do them here so I don't have everyone telling me color sets and making me do all the work. Hey, I lost sleep over this just so you know. Then again, it's my fault for being addicted to movies and the internet. Woops.

Let's hope I can do this in one go, hmm?

~ shades

[shades]

What my code looks like in the end:

Name: Gender: Age: Description: Personality: Specific Moral Values: Likes: Dislikes: History: Relationships:

[shades]

The BBCode to it:

[p align="center"]

[/p][div align="center"][table][tbody][tr][td][div align="center"][div style="padding:10px 0px;width:900px;background-image:url('http://4.bp.blogspot.com/-Bsn7QONjtHc/Th9Vhxym8_I/AAAAAAAALMg/erOMnermsWE/s1600/Best-top-desktop-abstract-pattern-wallpapers-hd-wallpaper-pattern-pictures-and-images-50.jpg');"]


[div style="padding:4px 0px 8px;width:750px;text-align:justify;color:rgb(12, 9, 15);font-size:10px;background-image:url('http://www.headsub.com/attachment/hKD4uRec/Templates/Textures/Background_blue01.jpg');"][div style="text-align:center;margin-top:-25px;"][img src="http://i.imgur.com/kHH7vyZ.png?2" style="max-width:100%;"][/div][font face="verdana"][blockquote][b]Name:[/b]
[b]Gender:[/b]
[b]Age:[/b] [/blockquote]
[/font][/div]


[div style="padding:4px 0px 8px;width:750px;text-align:justify;color:rgb(12, 9, 15);font-size:10px;background-image:url('http://www.headsub.com/attachment/hKD4uRec/Templates/Textures/Background_blue01.jpg');"]
[div style="text-align:center;margin-top:-39px;"][img src="http://i.imgur.com/1NznBx2.png?2" style="max-width:100%;"][/div][div align="center"][img src="http://i.imgur.com/ARULgVI.png" style="max-width:400px;"][/div]
[font face="verdana"][blockquote][b]Description:[/b][/blockquote]
[/font][/div]

[div style="padding:4px 0px 8px;width:750px;text-align:justify;color:rgb(12, 9, 15);font-size:10px;background-image:url('http://www.headsub.com/attachment/hKD4uRec/Templates/Textures/Background_blue01.jpg');"][div style="text-align:center;margin-top:-26px;"][img src="http://i.imgur.com/sphrcOc.png?2" style="max-width:100%;"][/div][font face="verdana"][blockquote][b]Personality:[/b]

[b]Specific Moral Values:[/b]

[b]Likes:[/b]

[b]Dislikes:[/b][/blockquote]
[/font][/div]

[div style="padding:4px 0px 8px;width:750px;text-align:justify;color:rgb(12, 9, 15);font-size:10px;background-image:url('http://www.headsub.com/attachment/hKD4uRec/Templates/Textures/Background_blue01.jpg');"][div style="text-align:center;margin-top:-28px;"][img src="http://i.imgur.com/KNqX9wl.png?2" style="max-width:100%;"][/div][font face="verdana"][blockquote]
[b]History:[/b][/blockquote]
[/font][/div]

[div style="padding:4px 0px 8px;width:750px;text-align:justify;color:rgb(12, 9, 15);font-size:10px;background-image:url('http://www.headsub.com/attachment/hKD4uRec/Templates/Textures/Background_blue01.jpg');"][div style="text-align:center;margin-top:-27px;"][img src="http://i.imgur.com/Y2v33DY.png?2" style="max-width:100%;"][/div][font face="verdana"][blockquote][b]Relationships:[/b]
[/blockquote]
[/font][/div]

[/div][/div][/td][/tr][/tbody][/table][/div][p][/p][p][/p][p][/p][p][/p][p][/p][p][/p][p][/p][p][/p][p][/p]

[shades]

How to individualize it:

[p align="center"]

[/p][div align="center"][table][tbody][tr][td][div align="center"][div style="padding:10px 0px;width:900px;background-image:url('http://LINK(1).jpg');"]

LINK(1).jpg is the background image used to the whole bio. The 10px, that's the font size. I wanted to bold that so you know that in every line, each 10px can be enlarged for your eyes if you can't read.
The 900px is the width of the background {http://LINK(1).jpg}. You can make it however large as you want so long as it fits on the forums, of course.


[div style="padding:4px 0px 8px;width:750px;text-align:justify;color:rgb(12, 9, 15);font-size:10px;background-image:url('http://LINK(2).jpg');"][div style="text-align:center;margin-top:-25px;"][img src="http://LINK(3).jpg" style="max-width:100%;"][/div][font face="verdana"][blockquote][b]Name:[/b]
[b]Gender:[/b]
[b]Age:[/b] [/blockquote]
[/font][/div]

LINK(2).jpg is going to back repeatedly. Because it's the background for the font to be on, so the colors should be a bit contrasting to the font color of your choosing. LINK(3) is an optional change, just so you know. If you know how to make banners and .png words without a white wall background, this is where that header would go. I have defaultly made headers, but I know some people might want to get creative and make their own.
750px is for the size of the image {http://LINK(2).jpg} which should be a nice even to the background.


[div style="padding:4px 0px 8px;width:750px;text-align:justify;color:rgb(12, 9, 15);font-size:10px;background-image:url('http://LINK(2).jpg');"]
[div style="text-align:center;margin-top:-39px;"][img src="http://LINK(3).jpg" style="max-width:100%;"][/div][div align="center"][img src="http://LINK4(4)" style="max-width:400px;"][/div]
[font face="verdana"][blockquote][b]Description:[/b][/blockquote]
[/font][/div]

LINK(4).jpg is your face claim. t can be any size or any shape, though I doubt you want to go over 600 px, so I suggest stay between 400 and 500, unless you expand the whole table.

[div style="padding:4px 0px 8px;width:750px;text-align:justify;color:rgb(12, 9, 15);font-size:10px;background-image:url('http://LINK(2).jpg');"][div style="text-align:center;margin-top:-26px;"][img src="http://LINK(3)" style="max-width:100%;"][/div][font face="verdana"][blockquote][b]Personality:[/b]

[b]Specific Moral Values:[/b]

[b]Likes:[/b]

[b]Dislikes:[/b][/blockquote]
[/font][/div]

[div style="padding:4px 0px 8px;width:750px;text-align:justify;color:rgb(12, 9, 15);font-size:10px;background-image:url('http://LINK(2).jpg');"][div style="text-align:center;margin-top:-28px;"][img src="http://LINK(3).jpg" style="max-width:100%;"][/div][font face="verdana"][blockquote]
[b]History:[/b][/blockquote]
[/font][/div]

[div style="padding:4px 0px 8px;width:750px;text-align:justify;color:rgb(12, 9, 15);font-size:10px;background-image:url('http://LINK(2).jpg');"][div style="text-align:center;margin-top:-27px;"][img src="http://LINK(3).jpg" style="max-width:100%;"][/div][font face="verdana"][blockquote][b]Relationships:[/b]
[/blockquote]
[/font][/div]

[/div][/div][/td][/tr][/tbody][/table][/div][p][/p][p][/p][p][/p][p][/p][p][/p][p][/p][p][/p][p][/p][p][/p]