tesscodes | CR Chart: Moody

DETAILED

NAME HERE

BESTIE FOREVER

Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus ullamcorper sed tortor quis tempor. Mauris at felis a elit dapibus feugiat at nec elit. Duis semper odio erat, vitae iaculis justo ultricie.

NAME HERE

COWORKER

NAME HERE

LOVE INTEREST

©TESSISAMESS

LIGHT

LOVE INTEREST

COWORKER

BESTIE FOREVER

©TESSISAMESS

Information

Hey guys! Today I've got a fun CR chart with built in mood sliders for fast visual indication of how well (or badly!) your character gets along with the other. Just edit the percentage width of the inner div and off you go! This code comes in Detailed and Light, depending on how much or little information you need. Enjoy! ♥

Coding: Detailed

<lj-raw><div style="width:370px;margin:0 auto;font-family:helvetica,arial,sans-serif;font-size:9px;letter-spacing:2px;text-align:justify;display:flex;flex-wrap:wrap;justify-content:space-between;line-height:120%;">

<a href="http://JOURNALNAME.insanejournal.com/"><img src="USERPICHERE" style="width:80px;height:80px;padding:4px;margin-bottom:25px;box-shadow:1px 1px 1px 0 rgba(0,0,0,0.3);"></a>

<div style="background:#ff0000;background:-moz-linear-gradient(left, #ff0000 0%, #fff200 50%, #00ff11 100%);background:-webkit-linear-gradient(left, #ff0000 0%,#fff200 50%,#00ff11 100%);background:linear-gradient(to right, #ff0000 0%,#fff200 50%,#00ff11 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff0000', endColorstr='#00ff11',GradientType=1 );border-radius:5px;box-shadow:1px 1px 1px 0 rgba(0,0,0,0.3);overflow:hidden;margin:3px 0 8px 0;"><div style="border-right:350px solid #eee;width:50%;padding:3px 0;color:#fff;text-shadow:1px 1px 1px rgba(0,0,0,0.5);white-space:nowrap;">&nbsp;&nbsp;RELATIONSHIPHERE</div></div>

INFOHERE
</div>

<a href="http://tessisamess.insanejournal.com/" style="display:block;text-align:right;width:100%;margin-top:3px;color:#aaa;text-decoration:none;letter-spacing:2px;font-size:8px;">&copy;TESSISAMESS</a></div></lj-raw>

Coding: Light

<lj-raw><div style="width:350px;margin:0 auto;font-family:helvetica,arial,sans-serif;color:#fff;text-shadow:1px 1px 1px rgba(0,0,0,0.5);font-size:9px;letter-spacing:2px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;line-height:120%;">

<a href="http://JOURNALNAME.insanejournal.com/"><img src="USERPICHERE" style="width:50px;height:50px;border-radius:50px;padding:4px;box-shadow:1px 1px 1px 0 rgba(0,0,0,0.3);margin-bottom:15px;" title="Name Here"></a>

<div style="width:270px;margin-bottom:15px;background:#ff0000;background:-moz-linear-gradient(left, #ff0000 0%, #fff200 50%, #00ff11 100%);background:-webkit-linear-gradient(left, #ff0000 0%,#fff200 50%,#00ff11 100%);background:linear-gradient(to right, #ff0000 0%,#fff200 50%,#00ff11 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff0000', endColorstr='#00ff11',GradientType=1 );border-radius:5px;box-shadow:1px 1px 1px 0 rgba(0,0,0,0.3);overflow:hidden;"><div style="border-right:350px solid #eee;width:50%;padding:3px 0;white-space:nowrap;">&nbsp;&nbsp;RELATIONSHIPHERE</div></div>

Installation Guide

Paste into an entry and fill in the following!

USERPICHERE - Character pic
NAME HERE - Character name
JOURNALNAME - Character's username to complete links
INFOHERE - Relationship info (detailed only)
RELATIONSHIPHERE - Relationship meter title

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!