Tessisamess

Information

Hey guys! A patron in the server requested an in-entry cast list that matches the style of the ones I made for referential, and that was a great idea, so here we are! Merry xmas eve to those of you celebrating, and have a wonderful weekend! I'll be trying to get one more free post up before the new year. Enjoy! 💖

UPDATE: 12.29.22 Fixed an alignment issue with usernames. Add margin:0 auto; to the username links in your existing codes if experiencing issues with its alignment.

The Coding

<lj-raw><div style="max-width:calc((250px + (15px * 2)) * 4);margin:0 auto;display:flex;flex-wrap:wrap;text-align:center;font-family:calibri,sans-serif;font-size:11px;text-transform:uppercase;line-height:1;color:#111;"> <!--CHAR--> <div style="background:url(IMG1_HERE)center;background-size:cover;border:10px solid #fff;box-shadow:0 0 0 1px #e5e5e5;width:250px;height:300px;margin:15px;overflow:hidden;box-sizing:border-box;"> <!--FRONT--> <a href="#name1-back" name="name1-front" style="display:block;height:100%;"></a> <!--BACK--> <a name="name1-back"></a> <div style="height:100%;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,0.9);overflow:hidden;"><div> <!--TITLES--> <a href="#name1-front" style="display:block;text-decoration:none;color:#617C90;font-size:22px;"><b>Name</b></a> <div style="margin:5px 0 7px 0;letter-spacing:1px;">Subtitle</div> <!--USER--> <a href="https://user.insanejournal.com/" style="display:block;width:100px;margin:0 auto;background:#fff;border-radius:3px;padding:3px 0;border:1px solid #617C90;color:#617C90;text-decoration:none;"><b>@username</b></a> </div></div> </div> <!--CHAR--> <div style="background:url(IMG2_HERE)center;background-size:cover;border:10px solid #fff;box-shadow:0 0 0 1px #e5e5e5;width:250px;height:300px;margin:15px;overflow:hidden;box-sizing:border-box;"> <!--FRONT--> <a href="#name2-back" name="name2-front" style="display:block;height:100%;"></a> <!--BACK--> <a name="name2-back"></a> <div style="height:100%;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,0.9);overflow:hidden;"><div> <!--TITLES--> <a href="#name2-front" style="display:block;text-decoration:none;color:#617C90;font-size:22px;"><b>Name</b></a> <div style="margin:5px 0 7px 0;letter-spacing:1px;">Subtitle</div> <!--USER--> <a href="https://user.insanejournal.com/" style="display:block;width:100px;margin:0 auto;background:#fff;border-radius:3px;padding:3px 0;border:1px solid #617C90;color:#617C90;text-decoration:none;"><b>@username</b></a> </div></div> </div> <!--CHAR--> <div style="background:url(IMG3_HERE)center;background-size:cover;border:10px solid #fff;box-shadow:0 0 0 1px #e5e5e5;width:250px;height:300px;margin:15px;overflow:hidden;box-sizing:border-box;"> <!--FRONT--> <a href="#name3-back" name="name3-front" style="display:block;height:100%;"></a> <!--BACK--> <a name="name3-back"></a> <div style="height:100%;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,0.9);overflow:hidden;"><div> <!--TITLES--> <a href="#name3-front" style="display:block;text-decoration:none;color:#617C90;font-size:22px;"><b>Name</b></a> <div style="margin:5px 0 7px 0;letter-spacing:1px;">Subtitle</div> <!--USER--> <a href="https://user.insanejournal.com/" style="display:block;width:100px;margin:0 auto;background:#fff;border-radius:3px;padding:3px 0;border:1px solid #617C90;color:#617C90;text-decoration:none;"><b>@username</b></a> </div></div> </div> <!--CHAR--> <div style="background:url(IMG4_HERE)center;background-size:cover;border:10px solid #fff;box-shadow:0 0 0 1px #e5e5e5;width:250px;height:300px;margin:15px;overflow:hidden;box-sizing:border-box;"> <!--FRONT--> <a href="#name4-back" name="name4-front" style="display:block;height:100%;"></a> <!--BACK--> <a name="name4-back"></a> <div style="height:100%;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,0.9);overflow:hidden;"><div> <!--TITLES--> <a href="#name4-front" style="display:block;text-decoration:none;color:#617C90;font-size:22px;"><b>Name</b></a> <div style="margin:5px 0 7px 0;letter-spacing:1px;">Subtitle</div> <!--USER--> <a href="https://user.insanejournal.com/" style="display:block;width:100px;margin:0 auto;background:#fff;border-radius:3px;padding:3px 0;border:1px solid #617C90;color:#617C90;text-decoration:none;"><b>@username</b></a> </div></div> </div> <div style="width:100%;text-align:right;margin:15px;"><a href="https://tessisamess.insanejournal.com/149554.html" style="font-size:9px;letter-spacing:2px;color:#bbb;text-decoration:none;">CODING BY</a></div></div></lj-raw>

Installation Guide

Each character has a unique name so that you can have multiple anchor links in one cast list, one for each character's information. In this code, you have name1 through name4 as your starting placeholders to show you where to put each character's name. If you anticipate multiple characters with the same first name, I'd recommend first name plus last initial for each anchor, like johnd for John Doe rather than just john, which could conflict with John Smith later down the line.

If you're feeling uncertain, I recommend hitting ctrl+f in the code tester before editing, and highlighting all instances of name1 just to check out where it is each time and how it's being used. The front of the card has its own name, name1-front, and a link to the back of the card, name1-back; meanwhile, the back of the card has its name, name1-back, and the name has a link back to the front of the card, name1-front.

Since this is a little hefty for a cast list, I tested it out, and you should in theory be able to use this for a cast of around 50-60 characters, so long as you use short links like Imgur. There are other ways to free up space, of course, like removing my HTML comments if you don't need the assistance,

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 font
font-size:11px; - Body text
font-size:22px; - Name text

DIMENSIONS

250px - Character width
300px - Character height
* 4 - Number of characters per row
15px - Character margin
10px - Image border

COLORS

#fff

Image border; username link background

rgba(255,255,255,0.9)

Overlay background

#e5e5e5

Character border

#617C90

Accent color

#111

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