Tessisamess

Information

Hey guys! I'd like to thank my patrons for the helpful ideas and suggestions that helped me put together this month's roster and CR chart pack. 💖

There are lowkey a lot of color options in this code that you can't see because the demo is using neighboring color codes for uniformity, but check out the color guide to make this as colorful as you want! Each character container has a white-to-transparent background; this will be invisible to non-Sanity users but givies a really cute subtle pop on the Sanity entry pages.

The Coding

<lj-raw><div style="width:900px;margin:0 auto;font-family:trebuchet ms,arial,sans serif;font-size:11px;line-height:1.7;color:#222;"> <!--GAME--> <details style="margin:0 0 2px 0;"> <!--HEADER--> <summary style="padding:10px 20px;background:#eee;cursor:pointer;display:flex;align-items:center;"> <h4 style="font-size:22px;margin:0;">GAMENAME</h4> <a href="http://username.insanejournal.com/" style="margin:0 0 0 auto;text-decoration:none;background:#fff;border:1px solid #ddd;border-radius:5px;padding:2px 10px;color:#333;font-size:8px;text-transform:uppercase;letter-spacing:2px;font-weight:bold;">Visit</a> </summary> <!--CHARACTERS--> <div style="display:flex;flex-wrap:wrap;align-items:flex-start;text-align:center;padding:10px 0;"> <!--CHAR--> <fieldset style="width:calc((100% / 4) - 30px);margin:15px;padding:0 10px 10px 10px;background:linear-gradient(to bottom,#fff,transparent);border:1px solid #ddd;box-sizing:border-box;"> <!--ICON & NAME--> <legend style="padding:0 10px;"> <img src="ICON" style="width:75px;background:#fff;border:1px solid #ccc;padding:5px;box-shadow:2px 2px 2px 0 rgba(0,0,0,0.1);border-radius:100%;"> <h5 style="text-align:center;font-size:16px;margin:0;">NAMEHERE</h5> </legend> <a href="http://username.insanejournal.com/" style="text-decoration:none;color:#555;"><b>@username</b></a><br> Extra field; keep to one line <!--FANDOM--> <b style="letter-spacing:5px;font-size:9px;text-transform:uppercase;display:block;border-top:1px solid #ddd;margin:5px 0 0 0;padding:5px 0 0 0;">Fandom</b> </fieldset> </div> </details> <div style="text-align:right;font-size:8px;letter-spacing:2px;"><a href="http://tessisamess.insanejournal.com/" style="color:#999;text-decoration:none;">CODING</a></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

helvetica,arial,sans-serif - All text

COLORS

#fff

"Visit" link background; icon background; character container gradient color

#eee

Game header background

#ddd

Borders

#ccc

Icon border

#555

Username links

#333

"Visit" link

#222

Base text

#111

Character names

#000

Game header text

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!