Previous | Next

Personality Cards





NAME
PERSONALITY
About Name
Vestibulum imperdiet, lorem ut tincidunt euismod, velit quam eleifend lectus, at rhoncus lectus risus at justo. Etiam ante enim, dapibus vitae sollicitudin, sollicitudin.
Personality Stats
0%
TRAIT
Info here
0%
TRAIT
Info here
0%
TRAIT
Info here
0%
TRAIT
Info here
0%
TRAIT
Info here
NAME
PERSONALITY
About Name
Vestibulum imperdiet, lorem ut tincidunt euismod, velit quam eleifend lectus, at rhoncus lectus risus at justo. Etiam ante enim, dapibus vitae sollicitudin, sollicitudin.
Personality Stats
0%
TRAIT
Info here
0%
TRAIT
Info here
0%
TRAIT
Info here
0%
TRAIT
Info here
0%
TRAIT
Info here


Information

Hey guys! I hope you all had an awesome Halloween! To kick off November we have a new code that I haven't done before: A standalone personality info card, available in both light and dark versions!

This personality card packs a punch with vibrant contrast and single-color highlights that change value with no extra color picking needed! It also utilizes the details tag as yet another example of how you can use that handy little tool! Check out my tutorials section for a full breakdown on the details tag if you missed it last month; it's a lot of fun! Enjoy! ♥

Coding: Dark



Coding: Light



Installation Guide

Paste into an entry and fill in the following!

HEADERIMG - Your header image; can be any size or dimensions as long as it's not too small
NAME (x2) - Your character name
BLURBHERE - Written personality info
0% | TRAIT | TRAITINFO (x5) - Each trait

Editing Guide

Paste the coding into Notepad or similar and bring up Replace All (usually Ctrl+H) to replace values quickly and easily!

FONT SPECS
font-size:9px;
letter-spacing:1px;
text-transform:uppercase;
font-family:helvetica,arial,sans-serif;
text-align:justify;
line-height:150%;
color:#333;

SIZING SPECS
width:400px; - Overall width
padding:100px 30px; - Header size
open="open" - Delete this to default sections to closed (x2)
padding:0 50px 20px 50px; - Inner section padding (x2)
31px - Trait bubble sizing (multiple specs; use replace all)

COLORS: DARK
#fff - Text color
255,255,255 - Color block backgrounds (semi-transparent rgba value)
#F5BE02 - Accent color
#333 - Text color
#000 - Background color; trait and subtitle color
0,0,0 - Trait backgrounds

COLORS: LIGHT
#fff - Background color and title color
#79C5C5 - Accent color
#333 - Text color
#000 - Trait and subtitle color
0,0,0 - Color block and trait backgrounds (semi-transparent rgba value)

Terms of Use

♡ Do not remove credit.
♡ Do not redistribute my codes in part or in whole (posting a copy for players to use in your game is fine with a link to original post.)
♡ If you break something during editing, please feel free to drop me a comment and I'll help as best I can!
♡ I love seeing edits! This isn't a rule, but if you have a cool edit of one of my codes I'd love to see it!

Comments

Nov. 2nd, 2017 10:45 pm (UTC)
I love love love how clean and sleek these are. Perfect for places that just want a detailed personality rather than the convoluted history! <3
Nov. 9th, 2017 10:32 pm (UTC)
Yasss ty ty! I was thinking that too like, sometimes if it's a PSL with someone I write with constantly anyway, we usually don't need full bios but we want a little bit of info just for fun.
Nov. 5th, 2017 06:52 am (UTC)
These are so awesome! I love them!
Nov. 9th, 2017 10:32 pm (UTC)
Aw, tysm! ♥
Dec. 14th, 2017 10:30 pm (UTC)
PS I am totally using a portion of this as my new cast list for my cdj here
Nov. 6th, 2017 10:48 pm (UTC)
I love this code! I used it here for a soundtrack :)
Nov. 9th, 2017 10:31 pm (UTC)
Oooh nice!!!
Nov. 28th, 2017 12:36 am (UTC)
Love these so much! Finally used this to build out a "key storyline" page here
Nov. 28th, 2017 02:35 pm (UTC)
Oh man, that's a really cool repurposing; I love it!