Infobox Demo and Tutorial

Pika

Resident Gerbil
Staff member
Application Master
Senior Admin
Admin
Donator++
Joined
Aug 26, 2019
Messages
276
Points
28
Age
20
Location
hell
Pika
Biographical Information
AliasMax
D.O.B.March 11, 2000
StatusAlive
Personal Information
LikesGirls, Small Rodents
HatesAvacados


« 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:
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]
You can change the color of the text as well, like so:
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.






 

jianmingyong

Website Developer - The Dialga Team
Staff member
Owner
Admin
Joined
Apr 17, 2019
Messages
9
Points
3
Website
gatewayroleplay.org
If you want different background colors for the content, you could use:
Code:
[infoboxcontentstyle="background-color: #db8d5c"][infoboxcontenttext="Alias"]Max[/infoboxcontenttext][/infoboxcontentstyle]
:p Have fun!
 
Top