Pika
Co-Owner | Resident Gerbil
Staff member
Dumbass Lesbian
Application Master
Owner
Admin
Donator++
Donator+
Donator
- Joined
- Aug 26, 2019
- Messages
- 1,191
- Points
- 63
- Location
- hell
| ||
| ||
| ||
| ||
| ||
| ||
| ||
| ||
|
« The original infobox code is by Jian! I've rewritten the tutorial for the new forums! »
Do you want a funky clean look for your character's biography but aren't sure how to implement an infobox? You've come to the right place! This is a quick and easy tutorial on how to do just that!
To start, you're going to need the code for the actual infobox. Here's the raw code for the example shown in this tutorial:Do you want a funky clean look for your character's biography but aren't sure how to implement an infobox? You've come to the right place! This is a quick and easy tutorial on how to do just that!
Code
[infobox="float:right;"]
[infoboxheader="background-color: #db8d5c;"]Pika[/infoboxheader]
[infoboximage][IMG]https://i.imgur.com/qaYQp6q.png[/IMG][/infoboximage]
[infoboxheader="background-color: #db8d5c"]Biographical Information[/infoboxheader]
[infoboxcontent="Alias"]Max[/infoboxcontent]
[infoboxcontent="D.O.B."]March 11, 2000[/infoboxcontent]
[infoboxcontent="Status"]Alive[/infoboxcontent]
[infoboxheader="background-color: #db8d5c;"]Personal Information[/infoboxheader]
[infoboxcontent="Likes"]Girls, Small Rodents[/infoboxcontent]
[infoboxcontent="Hates"]Avacados[/infoboxcontent]
[/infobox]From there, it's mostly just a matter of editing the contents to fit your character. It's pretty self-explanatory, but I'll go over each little bit to make it easier for you.
The very first line of code determines the alignment of your infobox. The value can be changed between left or right— whichever works best for you.
Code
[infobox="float:right;"]The second line is the title of your infobox. Typically, it's the name of your character. You can change the background color of the box by inputting any hex code! Here's where I find hex codes.
Code
[infoboxheader="background-color: #db8d5c;"]Pika[/infoboxheader]
Code
[infoboxheader="background-color: #db8d5c"][COLOR=#000000]Pika[/COLOR][/infoboxheader]The next line is a photo of your character. Any directly linked image will work here. You can upload an image as well, though a linked image is guaranteed to work.
Code
[infoboximage][IMG]https://i.imgur.com/qaYQp6q.png[/IMG][/infoboximage]This is where you would include another header. It's the exact same line of code as the one used in the title of the infobox.
Code
[infoboxheader="background-color: #db8d5c"]Biographical Information[/infoboxheader]After that, you're on to the actual content! You can copy and paste this line over and over again to include as much information on your character as you're willing to share. You can edit the colors for the content box just as you would for the header box.
Code
[infoboxcontent="Alias"]Max[/infoboxcontent]...and that's about it! The entire process is just a matter of copying and pasting. Feel free to reply with any questions you may have. I'm hoping I've covered just about everything, though.
