Previous | Next

Personality Cards

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
Info here
Info here
Info here
Info here
Info here
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
Info here
Info here
Info here
Info here
Info here


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!


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)

#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

#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!


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!
Jan. 27th, 2018 03:06 am (UTC)
Hiii it's me again!

I love love love love your use of the details tag here and the way you coded it makes it so sleek and neat.

I hope you don't mind but I edited this so it could be a master navigation for my girl here! Pardon the dust if you attempt to look around her journal - Just revamping it at the moment so its going to be a bit messy eep. /o\

Thank you so much for taking the time to make the code! This was such a fun (and navigable!) code to tweak with.
Jan. 27th, 2018 03:24 am (UTC)
Ohhh, I love that so much! ♥ I looks gorgeous with that header image and the extra sections added in, ughhh yass.
Jan. 27th, 2018 08:40 am (UTC)
I'm glad you like it! I'm still fiddling with it and I used not only your guide for how to make a text gradient but also your castlist code 'Statistics' for the about part of Lorem's section for the navigation. It looks beautiful now thanks to you and your amazing work!!
Jan. 27th, 2018 09:14 pm (UTC)
Hi, these are beautiful! How do you get them to stand side by side like that? I kinda want to adapt them to use to have multis on a page, but can only get them to sit under each other. I'd like to have them two by two. :-)
Jan. 27th, 2018 10:14 pm (UTC)
Thank you! Just use this and you should be good!

<lj-raw><div style="max-width:1230px;margin:0 auto;display:flex;justify-content:center;flex-wrap:wrap;">



You'll probably also wanna replace margin:0 auto; in the codes in this entry with margin:5px; if you don't want them to sit flush against each other! (You can also delete the lj-raw tags from the inner codes that you stick into this, but nothing will break if you don't. And feel free to move credit to the bottom of this container if you don't want it under every single code!
Jan. 27th, 2018 10:25 pm (UTC)
Thank you! You're amazing - I'll post a link when I have all the graphics done (presuming that I don't throw a photoshop hissy fit and abandon the whole idea!) and let you know how things turned out! I hope I can do your code justice...
Jan. 27th, 2018 10:27 pm (UTC)
Oooh, I cannot WAIT to see it! ♥ I'm sure it'll be gorgeous—that mod journal looks AMAZING. I love those colors and the background!
Jan. 27th, 2018 10:30 pm (UTC)
Ha! I totally forgot I'd switched journals. Don't look too closely - it's definitely a WIP at the moment. None of the links work and the colours aren't quite right. proof of concept more than anything else and a shift over from an old game. But thanks anyway - I think it's pretty so far. All your codes, of course - you're our go-to for this kind of thing! We'd be nowhere without you!!
Jan. 27th, 2018 10:36 pm (UTC)
Aw, no, thank you so much! I know the feeling haha, so many of my "work areas" are digital disaster zones. I love where you're going with the aesthetics though!
Feb. 7th, 2018 04:10 pm (UTC)
ended up tweaking and making this into a game ad! thanks for the amazing codes!
Apr. 10th, 2018 06:56 am (UTC)
I am using this code here for a performance list, and I'm wondering if there is an easy way to get all the text to line up in the second section? So, that it'll stay justified all in a line, if that makes sense?
Apr. 10th, 2018 03:51 pm (UTC)
Oh, that looks awesome! You'll wanna add text-align:justify; to the second section's inner wrapping div: <div style="padding:0 50px 20px 50px;"> and you'll be all set!
Apr. 10th, 2018 06:09 pm (UTC)
All right, I think I have this in the right place, but this is what it's giving me: here.

The highlighted text is what I want to be flush with the other text, but adding in the text-align justify to that location, doesn't seem to do anything at all? So visual screenshot cause I'm not certain how else to check that I've got it in the right place!
Jul. 3rd, 2018 03:32 am (UTC)

Question, though. Is there a way to make each section as closed by default?
Jul. 3rd, 2018 03:36 am (UTC)
Thank you!!! ♥

Absolutely! Just remove any instances of open="open" from the details tags and they'll load as closed initially!
Jul. 3rd, 2018 03:37 am (UTC)
Thank you so much! <3