Tessisamess

Information

Hey guys! HOOBOY IT SURE HAS BEEN A WHILE, HUH? 😩 Thank you all so much for being so respectful and patient while I took care of my declining mental health. It's been pretty rough, but I'm starting to feel a little more together now. I'm hoping to resume the full posting schedule for free posts, but I may work myself up to it if it feels like I'm stressing myself out too much by going back to my usual schedule all at once. Smh, that mentally ill life lmao.

Anyway, as for the code, today we have a game-specific compact character roster! This can easily hold up to 10 characters as-is, but if you need more it's easily resized to accomodate. Enjoy, and man it feels great to get a post up; I missed you guys! 💖

The Coding

<lj-raw><div style="width:500px;margin:0 auto;line-height:1;font-family:trebuchet ms,sans-serif;font-size:9px;color:#222;box-shadow:5px 5px 7px 0 rgba(0,0,0,0.3);"> <!--NAVIGATION--> <div style="height:40px;display:flex;align-items:center;padding:0 0 0 11px;background:#2F3E46;text-align:center;font-weight:bold;text-transform:uppercase;"> <!--GAME LINK--> <a href="GAMEURL" style="margin:0 auto 0 0;text-decoration:none;color:#fff;letter-spacing:1px;"> @GAMENAME </a> <!--PAGE LINKS--> <a href="#1" style="height:40px;width:40px;line-height:40px;border-left:1px solid rgba(255,255,255,0.1);text-decoration:none;color:#fff;"> 01 </a> <a href="#2" style="height:40px;width:40px;line-height:40px;border-left:1px solid rgba(255,255,255,0.1);text-decoration:none;color:#fff;"> 02 </a> <a href="#3" style="height:40px;width:40px;line-height:40px;border-left:1px solid rgba(255,255,255,0.1);text-decoration:none;color:#fff;"> 03 </a> <a href="#4" style="height:40px;width:40px;line-height:40px;border-left:1px solid rgba(255,255,255,0.1);text-decoration:none;color:#fff;"> 04 </a> <a href="#5" style="height:40px;width:40px;line-height:40px;border-left:1px solid rgba(255,255,255,0.1);text-decoration:none;color:#fff;"> 05 </a> </div> <!--CHAR CONTAINER--> <div style="height:250px;overflow:hidden;border:5px solid #2F3E46;border-top:0;"> <!--CHAR--> <a name="1"></a> <div style="height:100%;background:#ccc url(CHAR_IMG1)center;background-size:cover;display:flex;align-items:flex-end;justify-content:flex-start;padding:20px;box-sizing:border-box;"> <div style="background:#fff;padding:10px;width:45%;box-shadow:3px 3px 3px 0 rgba(0,0,0,0.2);"> <a href="URL1" style="margin:0 0 5px 0;padding:0 0 5px 0;font-weight:bold;text-transform:uppercase;letter-spacing:1px;border-bottom:1px solid rgba(0,0,0,0.1);color:#222;text-decoration:none;display:block;">Character1</a> Info1 </div> </div> <!--CHAR--> <a name="2"></a> <div style="height:100%;background:#ccc url(CHAR_IMG2)center;background-size:cover;display:flex;align-items:flex-end;justify-content:flex-start;padding:20px;box-sizing:border-box;"> <div style="background:#fff;padding:10px;width:45%;box-shadow:3px 3px 3px 0 rgba(0,0,0,0.2);"> <a href="URL2" style="margin:0 0 5px 0;padding:0 0 5px 0;font-weight:bold;text-transform:uppercase;letter-spacing:1px;border-bottom:1px solid rgba(0,0,0,0.1);color:#222;text-decoration:none;display:block;">Character2</a> Info2 </div> </div> <!--CHAR--> <a name="3"></a> <div style="height:100%;background:#ccc url(CHAR_IMG3)center;background-size:cover;display:flex;align-items:flex-end;justify-content:flex-start;padding:20px;box-sizing:border-box;"> <div style="background:#fff;padding:10px;width:45%;box-shadow:3px 3px 3px 0 rgba(0,0,0,0.2);"> <a href="URL3" style="margin:0 0 5px 0;padding:0 0 5px 0;font-weight:bold;text-transform:uppercase;letter-spacing:1px;border-bottom:1px solid rgba(0,0,0,0.1);color:#222;text-decoration:none;display:block;">Character3</a> Info3 </div> </div> <!--CHAR--> <a name="4"></a> <div style="height:100%;background:#ccc url(CHAR_IMG4)center;background-size:cover;display:flex;align-items:flex-end;justify-content:flex-start;padding:20px;box-sizing:border-box;"> <div style="background:#fff;padding:10px;width:45%;box-shadow:3px 3px 3px 0 rgba(0,0,0,0.2);"> <a href="URL4" style="margin:0 0 5px 0;padding:0 0 5px 0;font-weight:bold;text-transform:uppercase;letter-spacing:1px;border-bottom:1px solid rgba(0,0,0,0.1);color:#222;text-decoration:none;display:block;">Character4</a> Info4 </div> </div> <!--CHAR--> <a name="5"></a> <div style="height:100%;background:#ccc url(CHAR_IMG5)center;background-size:cover;display:flex;align-items:flex-end;justify-content:flex-start;padding:20px;box-sizing:border-box;"> <div style="background:#fff;padding:10px;width:45%;box-shadow:3px 3px 3px 0 rgba(0,0,0,0.2);"> <a href="URL5" style="margin:0 0 5px 0;padding:0 0 5px 0;font-weight:bold;text-transform:uppercase;letter-spacing:1px;border-bottom:1px solid rgba(0,0,0,0.1);color:#222;text-decoration:none;display:block;">Character5</a> Info5 </div> </div> </div> </div><div style="width:500px;margin:5px auto 0 auto;line-height:1;font-family:trebuchet ms,sans-serif;font-size:7px;text-align:right;"><a href="https://tessisamess.insanejournal.com/138378.html" style="text-decoration:none;color:#bbb;letter-spacing:2px;">CODE BY</a></div></lj-raw>

Installation Guide

GAMEURL and GAMENAME - Game link

a href="#1" through a href="#5" - Anchor links (copy/paste this link and use the next number up to add additional characters)
a name="1" through a name="5" - Content anchors (copy/paste the character block and use the next number up to add additional characters)

CHAR_IMG1 through CHAR_IMG5 - Character image background
URL1 through URL5 - Character journal link

Editing Guide

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

FONTS

trebuchet ms,sans-serif - All text

DIMENSIONS

500px - Container width
40px - Header height & link width
250px - Character height
20px - Inset for character info
10px - Character info padding

COLORS

rgba(255,255,255,0.1)

Header borders

#fff

Header links & character info background

#2F3E46

Container background

#222

Character info text

rgba(0,0,0,0.1)

Character name border

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!