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:600px;margin:40px auto 0 auto;font-family:trebuchet ms,arial,sans serif;font-size:12px;line-height:1.7;color:#222;"> <!--CHAR--> <div style="display:flex;padding:20px;border:1px solid #ddd;margin:0 0 50px 0;background:linear-gradient(to bottom,#fff,transparent);"> <!--ICON--> <img src="ICON_URL" style="width:80px;height:80px;border-radius:100% 100% 0;background:#fff;margin:-40px 20px 0 -70px;padding:8px;border:1px solid #ccc;"> <!--CONTENT--> <div style="width:100%;"> <!--HEADER--> <h4 style="display:flex;justify-content:space-between;align-items:flex-start;margin:0;font-size:25px;color:#000;"> Name Here <a href="http://journalname.insanejournal.com/" style="font-size:10px;background:#eee;border:1px solid #ddd;border-radius:5px;padding:0 10px;color:#111;text-decoration:none;font-weight:bold;">journalname</a> </h4> BLURB_CONTENT <!--CONNECTIONS--> <div style="margin:15px 0 -50px 0;text-align:right;"> <!--PERSON--> <a href="http://journalname.insanejournal.com/" title="Name - Connection"><img src="CONNECTION_ICON" style="width:50px;height:50px;border-radius:100%;background:#fff;margin:0 0 0 5px;padding:5px;border:1px solid #ccc;"></a> <!--PERSON--> <a href="http://journalname.insanejournal.com/" title="Name - Connection"><img src="CONNECTION_ICON" style="width:50px;height:50px;border-radius:100%;background:#fff;margin:0 0 0 5px;padding:5px;border:1px solid #ccc;"></a> <!--PERSON--> <a href="http://journalname.insanejournal.com/" title="Name - Connection"><img src="CONNECTION_ICON" style="width:50px;height:50px;border-radius:100%;background:#fff;margin:0 0 0 5px;padding:5px;border:1px solid #ccc;"></a> </div> </div> </div> <div style="text-align:right;font-size:8px;letter-spacing:2px;"><a href="https://tessisamess.insanejournal.com/126192.html" style="color:#999;text-decoration:none;">CODING</a></div> </div></lj-raw>

Placeholders

journalname - Connection character's link and your link
Name - Connection - Connection character's hover text
CONNECTION_ICON - Connection character's icon

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,arial,sans serif - All text

COLORS

#fff

Icon backgrounds and character container gradient color

#eee

Journal link background

#ddd

Container border and journal link border

#ccc

Icons border

#222

Content text

#111

Your journal link text

#000

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!