Help Tips for improving this character sheet?

[monxmiracle]

So I am happy to announce I have successfully made a functional and finished code entirely done in BBCode without any sort of BBCode+. It’s not the best by any means, but I do like how it turned out. But other than that, I was wondering if you had any tips for improving, specifically with alignment of images, text, and the scrollbox. I wanted the scrol box to cover the whole width but when I did that it just turned out wonky. So if you guys have any advice to make it better please share!

Spoiler: “code here”

[div=padding:10px; background-color: #EBEBEA; border:5px solid DarkRed; width:350px; height: 550px; margin:auto;] 
[center][heightrestrict=150][img]https://data.whicdn.com/images/313563554/original.jpg [/img][/heightrestrict] [/center]
[color=#731803]
[font=Playfair Display][b][center][size=5]Character Name[/size][/center] [/b] [/font]
[centerblock=80][center][scroll=225px]
[font=Playfair Display][b][size=6] Basics [/size][/b][size=6][/size]
[size=4][i] ❝Quote❞[/i][/size][i][/i][/font]
[font=Raleway][b][u][size=4] Faceclaim [/size][/u][/b][u][/u]-realsitic only
[font=Raleway][b][u][size=4]Gender[/size][/u][/b][u][/u]-
[font=Raleway][b][u][size=4] Name [/size][/u][/b][u][/u]-
[font=Raleway][b][u][size=4] Nicknames [/size][/u][/b][u][/u]-
[font=Raleway][b][u][size=4] Alias [/size][/u][/b][u][/u]- hero or villain name
[font=Raleway][b][u][size=4] Age[/size][/u][/b][u][/u]-18-25 (for students), 30+ for Professors
[font=Raleway][b][u][size=4] Major [/size][/u][/b][u][/u]- List of potential majors will be provided
[font=Raleway][b][u][size=4] Birthday [/size][/u][/b][u][/u]-
[font=Raleway][b][u][size=4]Sexuality[/size][/u][/b][u][/u]-
[font=Playfair Display][b][size=6] Personality [/size][/b][size=6][/size]
[size=4][i] ❝Quote❞[/i][/size][i][/i][/font]
[font=Raleway][b][u][size=4] MBTI [/size][/u][/b][u][size=4][/size][/u][size=4] - Look up on 16 personalities
[font=Raleway][b][u][size=4] Zodiac [/size][/u][/b][u][size=4][/size][/u][size=4]-
[font=Raleway][b][u][size=4] Blood Type [/size][/u][/b][u][size=4][/size][/u][size=4] -
[font=Raleway][b][u][size=4] Alignment [/size][/u][/b][u][size=4][/size][/u][size=4]- Based off of D&D 
[font=Raleway][b][u][size=4] Enneagram [/size][/u][/b][u][size=4][/size][/u][size=4]- Look up enneagram types
[font=Raleway][b][u][size=4] Description [/size][/u][/b][u][size=4][/size][/u][size=4]- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Iaculis at erat pellentesque adipiscing. Pulvinar proin gravida hendrerit lectus. Felis eget velit aliquet sagittis id consectetur purus. Eros in cursus turpis massa tincidunt dui ut. Vulputate mi sit amet mauris. Semper eget duis at tellus at urna condimentum mattis. Scelerisque viverra mauris in aliquam sem fringilla. Libero justo laoreet sit amet cursus sit amet. Mi proin sed libero enim sed. Arcu cursus euismod quis viverra nibh. In egestas erat imperdiet sed. Arcu vitae elementum curabitur vitae nunc sed. Lorem mollis aliquam ut porttitor leo a diam sollicitudin tempor. Eu scelerisque felis imperdiet proin fermentum leo vel. Odio morbi quis commodo odio aenean sed.
[table=none]
[tr][th][font=Playfair Display][b][size=6] Relationships  [/size][/b][size=6][/size][/font][/th][/tr]
[tr][td][heightrestrict=150][img]https://data.whicdn.com/images/313563554/original.jpg [/img][/heightrestrict][/td]
[td=2] [font=Raleway][b][u][size=4] Parents [/size][/u][/b] - [/font][/td][font=Raleway] [/font][/tr][font=Raleway]
[tr][td][font=Raleway][b][u][size=4] Pets [/size][/u][/b] - [/font][/td][font=Raleway] [/font][/tr][font=Raleway] [/font][/font][/table][font=Raleway][font=Raleway]
[center][heightrestrict=150][img]https://data.whicdn.com/images/313563554/original.jpg [/img][/heightrestrict] [/center]
[font=Playfair Display][b][size=6] Backstory [/size][/b][/font][b][size=6][/size][/b]
[font=Raleway][size=4][i] Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Iaculis at erat pellentesque adipiscing. Pulvinar proin gravida hendrerit lectus. Felis eget velit aliquet sagittis id consectetur purus. Eros in cursus turpis massa tincidunt dui ut. Vulputate mi sit amet mauris. Semper eget duis at tellus at urna condimentum mattis. Scelerisque viverra mauris in aliquam sem fringilla. Libero justo laoreet sit amet cursus sit amet. Mi proin sed libero enim sed. Arcu cursus euismod quis viverra nibh. In egestas erat imperdiet sed. Arcu vitae elementum curabitur vitae nunc sed. Lorem mollis aliquam ut porttitor leo a diam sollicitudin tempor. Eu scelerisque felis imperdiet proin fermentum leo vel. Odio morbi quis commodo odio aenean sed. [/i][/size][i][/i]
[font=Playfair Display][b][size=6]  Mun Info [/size][/b][/font][b][size=6][/size][/b]
[font=Raleway][b][u][size=4] Alias [/size][/u][/b]-
[font=Raleway][b][u][size=4] Age [/size][/u][/b]-
[font=Raleway][b][u][size=4] Timezone [/size][/u][/b] -
[font=Raleway][b][u][size=4] Pronouns[/size][/u][/b] -

[/scroll]
[center][font=Playfair Display][size=7][b] ❝Quote❞ [/b][/center]
[/div][/font][/centerblock][/center][/color]

Character Name​

Basics
❝Quote❞
Faceclaim -realsitic only
Gender-
Name -
Nicknames -
Alias - hero or villain name
Age-18-25 (for students), 30+ for Professors
Major - List of potential majors will be provided
Birthday -
Sexuality-
Personality
❝Quote❞
MBTI - Look up on 16 personalities
Zodiac -
Blood Type -
Alignment - Based off of D&D
Enneagram - Look up enneagram types
Description - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Iaculis at erat pellentesque adipiscing. Pulvinar proin gravida hendrerit lectus. Felis eget velit aliquet sagittis id consectetur purus. Eros in cursus turpis massa tincidunt dui ut. Vulputate mi sit amet mauris. Semper eget duis at tellus at urna condimentum mattis. Scelerisque viverra mauris in aliquam sem fringilla. Libero justo laoreet sit amet cursus sit amet. Mi proin sed libero enim sed. Arcu cursus euismod quis viverra nibh. In egestas erat imperdiet sed. Arcu vitae elementum curabitur vitae nunc sed. Lorem mollis aliquam ut porttitor leo a diam sollicitudin tempor. Eu scelerisque felis imperdiet proin fermentum leo vel. Odio morbi quis commodo odio aenean sed.

Relationships
	Parents -
Pets -

Backstory
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Iaculis at erat pellentesque adipiscing. Pulvinar proin gravida hendrerit lectus. Felis eget velit aliquet sagittis id consectetur purus. Eros in cursus turpis massa tincidunt dui ut. Vulputate mi sit amet mauris. Semper eget duis at tellus at urna condimentum mattis. Scelerisque viverra mauris in aliquam sem fringilla. Libero justo laoreet sit amet cursus sit amet. Mi proin sed libero enim sed. Arcu cursus euismod quis viverra nibh. In egestas erat imperdiet sed. Arcu vitae elementum curabitur vitae nunc sed. Lorem mollis aliquam ut porttitor leo a diam sollicitudin tempor. Eu scelerisque felis imperdiet proin fermentum leo vel. Odio morbi quis commodo odio aenean sed.
Mun Info
Alias -
Age -
Timezone -
Pronouns -

❝Quote❞ ​

​

​

​

 

[Error 420]

The small scrolldown box in the middle is really easy to get lost in as the text takes up such a large amount of each line. This could be good for mobile users, but then scrolling past it might be an issue if the character sheet is too long, as you'll basically make it so mobile users will have to scroll through an entire page of information that takes up a lot of their screen. The "Quote" box appears squished against the bottom of the box as well and needs some air underneath it to breathe (especially for letters like y and q which hang below the line).

For PC, this is just a bad use of screen real estate. This takes up maybe one third of the available horizontal space in the post section (on a 16:9 monitor) and there's a lot of extra space that's being used up vertically that could very easily be made horizontally.

As for the information within the sheet, the Meyer's Briggs, Enneagram, and D&D alignment seem pretty needlessly redundant, especially if there's a "Description" section where that personality information can be written. Just specify the kinds of personality traits you want shown in the Description section. Also, Zodiac and Blood Type? Maybe there's some magic setting within your RP where those things would be relevant to who the character is, but if not, it's wasted space.

Always go with the adage "Show, don't tell" when writing a character. You'll have much more solid, well-rounded, dynamic, and realistic characters if you write in detailed descriptions instead of a list of details, and that's something that the DM can do to help fill in a character. Furthermore, your character sheet should put forth primarily what the purpose of the characters are. For what you've put in the sheet, it seems like it's predominantly about personality and interaction with other players, so maybe you'd devote more of the sheet space to fleshing out the character's personality traits as opposed to their physical description or abilities. A good sheet that takes being rewritten three times is far better than an okay sheet that's written on the fly.

 

[apolla]

monxmiracle
So I actually really like how it came out! My suggestion would be instead of using scroll tags, use a div. You can adjust the width in a div and probably make it fit the size of the box like you said you wanted. There's a bunch of different things you can do in a div. This chart really helped me alot:

Resource - Div Box Chart!

Hello hello! Mayhem here to bring you an awesome table of coding for Div Boxes! All thanks goes to FieryCold at Iwaku Roleplaying in letting me use their awesome table here! This table will be updated/changed up to fit the needs and function of RPNation. Feel free to post up information and...

www.rpnation.com

But if you have questions, I can try to answer! There are definitely better coders than me on this site, but it's fun and feels good when you make a code that you like!