Tessisamess

Information

Hey guys! I only had one entry for credits lists, so we were probably overdue for another one; this time I've included alternate options for non-credits uses since not everyone needs a credit display, but I wanted to make sure anyone who likes the look of this but didn't need that could still find a use for it. (This would make such a cute playlist code!!) Enjoy! 💖

Coding: Credits

<lj-raw><div style="width:330px;margin:0 auto;background:#fff;border:1px solid #ddd;box-shadow:1px 1px 3px 0 rgba(0,0,0,0.1);font-family:calibri,sans-serif;font-size:10px;text-transform:uppercase;letter-spacing:1px;"> <!--HEADER--> <div style="font-family:arial black;font-size:19px;color:#666;letter-spacing:-1.5px;border-bottom:1px solid #ddd;line-height:1;padding:5px;"> CREDITS <font style="color:#aaa;">✎</font> </div> <!--CREDITS CONTAINER--> <div style="display:flex;padding:15px;line-height:1.5;"> <!--IMAGE--> <div style="background:#ddd url(IMG_URL)center;background-size:cover;width:85px;box-sizing:border-box;"></div> <!--CREDITS LIST--> <div style="width:calc(100% - 85px);padding:0 0 0 15px;margin:-5px 0 0 0;box-sizing:border-box;"> <!--CREDIT--> <a href="" style="display:flex;color:#777;text-decoration:none;border-bottom:1px dotted #ddd;margin:5px 0 0 0;"> <b style="background:#666;color:#fff;padding:1px 5px 2px 5px;margin:0 5px 0 0;">PROFILE CODE</b> <div style="margin:0 0 0 auto;">NAME</div> </a> <!--CREDIT--> <a href="" style="display:flex;color:#777;text-decoration:none;border-bottom:1px dotted #ddd;margin:5px 0 0 0;"> <b style="background:#666;color:#fff;padding:1px 5px 2px 5px;margin:0 5px 0 0;">LAYOUT</b> <div style="margin:0 0 0 auto;">NAME</div> </a> <!--CREDIT--> <a href="" style="display:flex;color:#777;text-decoration:none;border-bottom:1px dotted #ddd;margin:5px 0 0 0;"> <b style="background:#666;color:#fff;padding:1px 5px 2px 5px;margin:0 5px 0 0;">ICONS</b> <div style="margin:0 0 0 auto;">NAME</div> </a> <!--CREDIT--> <a href="" style="display:flex;color:#777;text-decoration:none;border-bottom:1px dotted #ddd;margin:5px 0 0 0;"> <b style="background:#666;color:#fff;padding:1px 5px 2px 5px;margin:0 5px 0 0;">ENTRY CODES</b> <div style="margin:0 0 0 auto;">NAME</div> </a> <!--CREDIT--> <a href="" style="display:flex;color:#777;text-decoration:none;border-bottom:1px dotted #ddd;margin:5px 0 0 0;"> <b style="background:#666;color:#fff;padding:1px 5px 2px 5px;margin:0 5px 0 0;">PLAYED BY</b> <div style="margin:0 0 0 auto;">NAME</div> </a> </div> </div> </div></lj-raw>

Coding: Character Stats

<lj-raw><div style="width:350px;margin:0 auto;background:#fff;border:1px solid #ddd;box-shadow:1px 1px 3px 0 rgba(0,0,0,0.1);font-family:calibri,sans-serif;font-size:10px;text-transform:uppercase;letter-spacing:1px;"> <!--HEADER--> <div style="font-family:arial black;font-size:19px;color:#666;letter-spacing:-1.5px;border-bottom:1px solid #ddd;line-height:1;padding:5px;"> Character Name <font style="color:#aaa;">❤</font> </div> <!--CREDITS CONTAINER--> <div style="display:flex;padding:15px;line-height:1.5;"> <!--IMAGE--> <div style="background:#ddd url(IMG_URL)center;background-size:cover;width:125px;box-sizing:border-box;"></div> <!--CREDITS LIST--> <div style="width:calc(100% - 125px);padding:0 0 0 15px;margin:-5px 0 0 0;box-sizing:border-box;color:#777;"> <!--STAT--> <div style="display:flex;border-bottom:1px dotted #ddd;margin:5px 0 0 0;"> <b style="background:#666;color:#fff;padding:1px 5px 2px 5px;margin:0 5px 0 0;">Name</b> <div style="margin:0 0 0 auto;">Name</div> </div> <!--STAT--> <div style="display:flex;border-bottom:1px dotted #ddd;margin:5px 0 0 0;"> <b style="background:#666;color:#fff;padding:1px 5px 2px 5px;margin:0 5px 0 0;">Age</b> <div style="margin:0 0 0 auto;">00</div> </div> <!--STAT--> <div style="display:flex;border-bottom:1px dotted #ddd;margin:5px 0 0 0;"> <b style="background:#666;color:#fff;padding:1px 5px 2px 5px;margin:0 5px 0 0;">Gender</b> <div style="margin:0 0 0 auto;">Info</div> </div> <!--STAT--> <div style="display:flex;border-bottom:1px dotted #ddd;margin:5px 0 0 0;"> <b style="background:#666;color:#fff;padding:1px 5px 2px 5px;margin:0 5px 0 0;">Pronouns</b> <div style="margin:0 0 0 auto;">Here/Here</div> </div> <!--STAT--> <div style="display:flex;border-bottom:1px dotted #ddd;margin:5px 0 0 0;"> <b style="background:#666;color:#fff;padding:1px 5px 2px 5px;margin:0 5px 0 0;">Height</b> <div style="margin:0 0 0 auto;">0'0"</div> </div> <!--STAT--> <div style="display:flex;border-bottom:1px dotted #ddd;margin:5px 0 0 0;"> <b style="background:#666;color:#fff;padding:1px 5px 2px 5px;margin:0 5px 0 0;">Hair</b> <div style="margin:0 0 0 auto;">Color</div> </div> <!--STAT--> <div style="display:flex;border-bottom:1px dotted #ddd;margin:5px 0 0 0;"> <b style="background:#666;color:#fff;padding:1px 5px 2px 5px;margin:0 5px 0 0;">Eyes</b> <div style="margin:0 0 0 auto;">Color</div> </div> <!--STAT--> <div style="display:flex;border-bottom:1px dotted #ddd;margin:5px 0 0 0;"> <b style="background:#666;color:#fff;padding:1px 5px 2px 5px;margin:0 5px 0 0;">PB</b> <div style="margin:0 0 0 auto;">Name</div> </div> </div> </div> </div></lj-raw>

Coding: Player Info

<lj-raw><div style="width:350px;margin:0 auto;background:#fff;border:1px solid #ddd;box-shadow:1px 1px 3px 0 rgba(0,0,0,0.1);font-family:calibri,sans-serif;font-size:10px;text-transform:uppercase;letter-spacing:1px;"> <!--HEADER--> <div style="font-family:arial black;font-size:19px;color:#666;letter-spacing:-1.5px;border-bottom:1px solid #ddd;line-height:1;padding:5px;"> Player Info <font style="color:#aaa;">🛈</font> </div> <!--CREDITS CONTAINER--> <div style="display:flex;padding:15px;line-height:1.5;"> <!--IMAGE--> <div style="background:#ddd url(IMG_URL)center;background-size:cover;width:115px;box-sizing:border-box;"></div> <!--CREDITS LIST--> <div style="width:calc(100% - 115px);padding:0 0 0 15px;margin:-5px 0 0 0;box-sizing:border-box;color:#777;"> <!--STAT--> <div style="display:flex;border-bottom:1px dotted #ddd;margin:5px 0 0 0;"> <b style="background:#666;color:#fff;padding:1px 5px 2px 5px;margin:0 5px 0 0;">Name</b> <div style="margin:0 0 0 auto;">Name</div> </div> <!--STAT--> <div style="display:flex;border-bottom:1px dotted #ddd;margin:5px 0 0 0;"> <b style="background:#666;color:#fff;padding:1px 5px 2px 5px;margin:0 5px 0 0;">Timezone</b> <div style="margin:0 0 0 auto;">ABC</div> </div> <!--STAT--> <div style="display:flex;border-bottom:1px dotted #ddd;margin:5px 0 0 0;"> <b style="background:#666;color:#fff;padding:1px 5px 2px 5px;margin:0 5px 0 0;">CDJ</b> <div style="margin:0 0 0 auto;">username</div> </div> <!--STAT--> <div style="display:flex;border-bottom:1px dotted #ddd;margin:5px 0 0 0;"> <b style="background:#666;color:#fff;padding:1px 5px 2px 5px;margin:0 5px 0 0;">Discord</b> <div style="margin:0 0 0 auto;">user#1234</div> </div> <!--STAT--> <div style="display:flex;border-bottom:1px dotted #ddd;margin:5px 0 0 0;"> <b style="background:#666;color:#fff;padding:1px 5px 2px 5px;margin:0 5px 0 0;">Played By</b> <div style="margin:0 0 0 auto;">Name</div> </div> </div> </div> </div></lj-raw>

Editing Guide

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

FONTS

calibri,sans-serif - Body text
arial black - Title

DIMENSIONS

330px - Container width (credits)
85px - Image width (credits)
350px - Container width (character stats & player info)
125px - Image width (character stats)
115px - Image width (player info)

COLORS

#fff

Container background

#ddd

Borders

#aaa

Icon color

#777

Info field color

#666

Accent color

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!