Tessisamess

S	M	T	W	T	F	S
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30	31

Name Here

journalname
Vivamus ex arcu, porttitor eget molestie suscipit, sagittis et eros. In sed commodo urna, vel tempus ipsum. Nunc suscipit nec magna in aliquam. Suspendisse potenti. Vivamus eu purus sit amet ligula ornare venenatis. Phasellus sagittis leo rhoncus orci varius egestas. Nunc maximus diam neque, varius posuere nulla scelerisque tincidunt. Curabitur rutrum ipsum eros, at vestibulum augue scelerisque vitae.

Name 1

Vivamus ex arcu, porttitor eget molestie suscipit, sagittis et eros. In sed commodo urna, vel tempus ipsum. Nunc suscipit nec magna in aliquam. Suspendisse potenti. Vivamus eu purus sit amet ligula ornare venenatis. Phasellus sagittis leo rhoncus orci varius egestas. Nunc maximus diam neque, varius posuere nulla scelerisque tincidunt. Curabitur rutrum ipsum eros, at vestibulum augue scelerisque vitae. Vivamus ex arcu, porttitor eget molestie suscipit, sagittis et eros. In sed commodo urna, vel tempus ipsum. Nunc suscipit nec magna in aliquam. Suspendisse potenti. Vivamus eu purus sit amet ligula ornare venenatis.Vivamus ex arcu, porttitor eget molestie suscipit, sagittis et eros. In sed commodo urna, vel tempus ipsum. Nunc suscipit nec magna in aliquam. Suspendisse potenti. Vivamus eu purus sit amet ligula ornare venenatis. Phasellus sagittis leo rhoncus orci varius egestas. Nunc maximus diam neque, varius posuere nulla scelerisque tincidunt. Curabitur rutrum ipsum eros, at vestibulum augue scelerisque vitae. Vivamus ex arcu, porttitor eget molestie suscipit, sagittis et eros. In sed commodo urna, vel tempus ipsum. Nunc suscipit nec magna in aliquam. Suspendisse potenti. Vivamus eu purus sit amet ligula ornare venenatis.Vivamus ex arcu, porttitor eget molestie suscipit, sagittis et eros. In sed commodo urna, vel tempus ipsum. Nunc suscipit nec magna in aliquam. Suspendisse potenti. Vivamus eu purus sit amet ligula ornare venenatis. Phasellus sagittis leo rhoncus orci varius egestas. Nunc maximus diam neque, varius posuere nulla scelerisque tincidunt. Curabitur rutrum ipsum eros, at vestibulum augue scelerisque vitae. Vivamus ex arcu, porttitor eget molestie suscipit, sagittis et eros. In sed commodo urna, vel tempus ipsum. Nunc suscipit nec magna in aliquam. Suspendisse potenti. Vivamus eu purus sit amet ligula ornare venenatis.Vivamus ex arcu, porttitor eget molestie suscipit, sagittis et eros. In sed commodo urna, vel tempus ipsum. Nunc suscipit nec magna in aliquam. Suspendisse potenti. Vivamus eu purus sit amet ligula ornare venenatis. Phasellus sagittis leo rhoncus orci varius egestas. Nunc maximus diam neque, varius posuere nulla scelerisque tincidunt. Curabitur rutrum ipsum eros, at vestibulum augue scelerisque vitae. Vivamus ex arcu, porttitor eget molestie suscipit, sagittis et eros. In sed commodo urna, vel tempus ipsum. Nunc suscipit nec magna in aliquam. Suspendisse potenti. Vivamus eu purus sit amet ligula ornare venenatis.

Name 2

Name 3

Name 4

Name 5

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="display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-end;font-family:trebuchet ms,arial,sans serif;font-size:12px;line-height:1.7;color:#222;text-align:justify;">

<div style="width:250px;height:350px;border:1px solid #ddd;margin:44px 30px 0 0;background:linear-gradient(to bottom,#fff,transparent);padding:25px;box-sizing:border-box;">

<h4 style="text-align:center;margin:0;font-size:25px;color:#000;">
			CHARACTER
		</h4>

<center><a href="http://journalname.insanejournal.com/" style="font-size:10px;background:#eee;border:1px solid #ddd;border-radius:5px;padding:2px 10px;color:#333;text-decoration:none;font-weight:bold;">journalname</a></center><br>

YOUR_BLURB

</div>

<div style="width:500px;">

<div style="margin:0 0 -30px 10px;position:relative;">

</div>

<div style="height:350px;overflow:hidden;">

<a name="FIRSTNAME1"></a><div style="height:100%;overflow:auto;border:1px solid #ddd;box-sizing:border-box;"><div style="background:linear-gradient(to bottom,#fff,transparent);padding:25px;">
				<h4 style="margin:0;font-size:22px;color:#111;">NAME_HERE</h4>

CHARACTER_INFO1
			</div></div>

<a name="FIRSTNAME2"></a><div style="height:100%;overflow:auto;border:1px solid #ddd;box-sizing:border-box;"><div style="background:linear-gradient(to bottom,#fff,transparent);padding:25px;">
				<h4 style="margin:0;font-size:22px;color:#111;">NAME_HERE</h4>

CHARACTER_INFO2
			</div></div>

<a name="FIRSTNAME3"></a><div style="height:100%;overflow:auto;border:1px solid #ddd;box-sizing:border-box;"><div style="background:linear-gradient(to bottom,#fff,transparent);padding:25px;">
				<h4 style="margin:0;font-size:22px;color:#111;">NAME_HERE</h4>

CHARACTER_INFO3
			</div></div>

<a name="FIRSTNAME4"></a><div style="height:100%;overflow:auto;border:1px solid #ddd;box-sizing:border-box;"><div style="background:linear-gradient(to bottom,#fff,transparent);padding:25px;">
				<h4 style="margin:0;font-size:22px;color:#111;">NAME_HERE</h4>

CHARACTER_INFO4
			</div></div>

<a name="FIRSTNAME5"></a><div style="height:100%;overflow:auto;border:1px solid #ddd;box-sizing:border-box;"><div style="background:linear-gradient(to bottom,#fff,transparent);padding:25px;">
				<h4 style="margin:0;font-size:22px;color:#111;">NAME_HERE</h4>

CHARACTER_INFO5
			</div></div>

</div>

<div style="width:100%;text-align:center;font-size:8px;letter-spacing:2px;"><a href="http://tessisamess.insanejournal.com/" style="color:#999;text-decoration:none;">CODING</a></div>
</div></lj-raw>

Placeholders

FIRSTNAME - Anchor link specifiers; use YOUR character's name. This is to ensure that, when using multiples of the code on the same page for more than one character's connections, your links are all unique to each person's relationships. I strongly suggest using Replace All to do this.

YOUR_ICON (x2) - Sidebar icon
journalname - Your character
Name - Connection - Connection character's hover text
THEIR_ICON - Connection character's icon

Dimensions

250px - Sidebar width
500px - Connections width
350px (x2) - Height of sidebar and relationships !IMPORTANT
000 - Thing

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

#333 Journal link text

#222 Content text

#111 Connection name

#000 Your character name

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!

Tags: codes: relationships

Profile

Title Here

Navigation

July 2024

Links List

Resources

Tags

Layout By

Detailed CR Chart

Name Here

Name 1

Name 2

Name 3

Name 4

Name 5

Information

The Coding

Placeholders

Dimensions

Editing Guide

Terms of Use