CR CHART: IT'S COMPLICATED.

[marwood]

CR CHART

FAMILIARITY

LIKE

DISLIKE

AFFECTION

ATTRACTION

NAME HERE

Bacon ipsum dolor amet sausage biltong boudin pig cow. Boudin hamburger turkey, tri-tip tongue jowl jerky capicola corned beef. Sausage ribeye ground round, pork belly jerky tri-tip bacon buffalo cow tail beef ribs.

NAME HERE

Bacon ipsum dolor amet sausage biltong boudin pig cow. Boudin hamburger turkey, tri-tip tongue jowl jerky capicola corned beef. Jerky tri-tip bacon buffalo.

NAME HERE

Bacon ipsum dolor amet sausage biltong boudin pig cow. Boudin hamburger turkey, tri-tip tongue jowl jerky capicola corned beef. Pork belly jerky tri-tip bacon buffalo cow tail beef ribs.

NAME HERE

Bacon ipsum dolor amet. Boudin hamburger turkey, tri-tip tongue jowl jerky capicola corned beef. Sausage ribeye ground round, pork belly jerky tri-tip bacon buffalo cow tail beef ribs.

NAME HERE

Bacon ipsum dolor amet sausage biltong boudin pig cow. Boudin hamburger turkey, tri-tip tongue jowl jerky capicola corned beef.

NAME HERE

Bacon ipsum dolor amet sausage biltong boudin pig cow. Boudin hamburger turkey, tri-tip tongue jowl jerky capicola corned beef. Sausage ribeye ground round, pork belly jerky tri-tip bacon buffalo cow tail beef ribs. Bacon ipsum dolor amet sausage biltong boudin pig cow. Boudin hamburger turkey, tri-tip tongue jowl jerky capicola corned beef. Sausage ribeye ground round, pork belly jerky tri-tip bacon buffalo cow tail beef ribs. Bacon ipsum dolor amet sausage biltong boudin pig cow. Boudin hamburger turkey, tri-tip tongue jowl jerky capicola corned beef. Sausage ribeye ground round, pork belly jerky tri-tip bacon buffalo cow tail beef ribs.

code by marwood

okay so! this is a super customisable code and it's much less complicated than it seems, but if you run into any problems please let me know!

important customisation info:

• to add boxes, simply paste in the code from the second box below wherever you want the box to appear and the code will do the rest! no need to rearrange everything else or change margins/padding to make everything fit and align properly!


• the idea with the like/dislike section is that you can leave it green if the CR is positive, or replace it with the red colour if the CR is negative. i thought this was a much neater way of establishing dislike, since it allows you to specify a difference between a character that your character only vaguely likes and a character that your character really hates.


• i separated the relevant part of code that you need to change the percentages of each individual bar so they're really easy to find in the code. basically, find the relevant section and then "width: 50%" and you can change it to whatever percentage you want!


• if you want to max out the bar at 100%, you'll need to find "border-radius: 10px 0px 0px 10px;" in the code immediately below the percentage value that you've edited, and change it to "border-radius: 10px 10px 10px 10px;"! this is just so it has the same rounding at the edges and doesn't look like a straight line.


• by default, the blurb below the bars will become a scrolling box if you have more than 4 lines (as demonstrated in the last box of the live preview. if you don't want the boxes to scroll, find all instances of "max-height: 55px; overflow-y: scroll;" and delete. if you do want them to scroll, but you want more lines before they start scrolling, make the boxes taller by changing "max-height: 55px;" to a larger number!

colour/font customisation:

• to replace these, paste the code into something like notepad, then run a find and replace!
• fonts: GEORGIA and helvetica.
• colours: #58b4ba, #78c76d, #b53737, #aa5e85, #e96a9d

credits:

• i was hugely inspired by this code by whambam, which i used to use a lot, but there only being a single bar made it difficult for me to get across what i wanted to, hence why this exists!
• i used this post by tessisamess as the basis for the "display: flex" coding, which is instrumental in making sure that all you have to do is paste in a new box wherever you want and the code will do the rest.
• everything else is by me!

code:

full code (6 characters):
<lj-raw> <div style="text-align: center; font-size: 25px; font-family: georgia; letter-spacing: 1px;">CR CHART</div> <div style="text-align: center; font-family: georgia; letter-spacing: 1px; padding: 15px 0px 35px 0px;"> <div style="display: inline-block; background-color: #58b4ba; color: #fff; padding: 2px 5px 2px 5px; margin-right: 15px;">FAMILIARITY</div> <div style="display: inline-block; background-color: #78c76d; color: #fff; padding: 2px 5px 2px 5px; margin-right: -4px;">LIKE</div> <div style="display: inline-block; background-color: #b53737; color: #fff; padding: 2px 5px 2px 5px; margin-right: 15px;">DISLIKE</div> <div style="display: inline-block; background-color: #aa5e85; color: #fff; padding: 2px 5px 2px 5px; margin-right: 15px;">AFFECTION</div> <div style="display: inline-block; background-color: #e96a9d; color: #fff; padding: 2px 5px 2px 5px;">ATTRACTION</div> </div> <div style="max-width: 900px; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: center; align-items: top; font-family: helvetica, arial; -webkit-font-smoothing: antialiased; line-height: 120%;"> <div style="box-sizing: content-box; display: inline; width: 300px; margin-bottom: 30px;"> <div style="box-sizing: content-box; float: left; width: 110px;"><img src="ICONURL" style="width: 100px; border-radius: 10px;" ></div> <div style="box-sizing: content-box; margin-top: 8px; font-weight: bold; font-family: georgia; font-size: 15px;">NAME HERE</div> <div style="box-sizing: content-box; margin: 5px 0px 3px 110px; border: 1px solid #DDD; height: 10px; width: 170px; background: #EFEFEF; border-radius: 15px;"><div style="height: 100%; width: 50%; background: #58b4ba; border-radius: 10px 0px 0px 10px;"></div></div><div style="box-sizing: content-box; margin: 0px 0px 3px 110px; border: 1px solid #DDD; height: 10px; width: 170px; background: #EFEFEF; border-radius: 15px;"><div style="height: 100%; width: 50%; background: #78c76d; border-radius: 10px 0px 0px 10px;"></div></div><div style="box-sizing: content-box; margin: 5px 0px 3px 110px; border: 1px solid #DDD; height: 10px; width: 170px; background: #EFEFEF; border-radius: 15px;"><div style="height: 100%; width: 50%; background: #aa5e85; border-radius: 10px 0px 0px 10px;"></div></div><div style="box-sizing: content-box; margin: 5px 0px 3px 110px; border: 1px solid #DDD; height: 10px; width: 170px; background: #EFEFEF; border-radius: 15px;"><div style="height: 100%; width: 50%; background: #e96a9d; border-radius: 10px 0px 0px 10px;"></div></div> <div style="box-sizing: content-box; margin-top: 18px; padding-right: 20px; max-height: 55px; overflow-y: scroll; font-size: 11px; text-align: justify;">BLURB GOES HERE</div> </div> <div style="box-sizing: content-box; display: inline; width: 300px; margin-bottom: 30px;"> <div style="box-sizing: content-box; float: left; width: 110px;"><img src="ICONURL" style="width: 100px; border-radius: 10px;" ></div> <div style="box-sizing: content-box; margin-top: 8px; font-weight: bold; font-family: georgia; font-size: 15px;">NAME HERE</div> <div style="box-sizing: content-box; margin: 5px 0px 3px 110px; border: 1px solid #DDD; height: 10px; width: 170px; background: #EFEFEF; border-radius: 15px;"><div style="height: 100%; width: 50%; background: #58b4ba; border-radius: 10px 0px 0px 10px;"></div></div><div style="box-sizing: content-box; margin: 0px 0px 3px 110px; border: 1px solid #DDD; height: 10px; width: 170px; background: #EFEFEF; border-radius: 15px;"><div style="height: 100%; width: 50%; background: #78c76d; border-radius: 10px 0px 0px 10px;"></div></div><div style="box-sizing: content-box; margin: 5px 0px 3px 110px; border: 1px solid #DDD; height: 10px; width: 170px; background: #EFEFEF; border-radius: 15px;"><div style="height: 100%; width: 50%; background: #aa5e85; border-radius: 10px 0px 0px 10px;"></div></div><div style="box-sizing: content-box; margin: 5px 0px 3px 110px; border: 1px solid #DDD; height: 10px; width: 170px; background: #EFEFEF; border-radius: 15px;"><div style="height: 100%; width: 50%; background: #e96a9d; border-radius: 10px 0px 0px 10px;"></div></div> <div style="box-sizing: content-box; margin-top: 18px; padding-right: 20px; max-height: 55px; overflow-y: scroll; font-size: 11px; text-align: justify;">BLURB GOES HERE</div> </div> <div style="box-sizing: content-box; display: inline; width: 300px; margin-bottom: 30px;"> <div style="box-sizing: content-box; float: left; width: 110px;"><img src="ICONURL" style="width: 100px; border-radius: 10px;" ></div> <div style="box-sizing: content-box; margin-top: 8px; font-weight: bold; font-family: georgia; font-size: 15px;">NAME HERE</div> <div style="box-sizing: content-box; margin: 5px 0px 3px 110px; border: 1px solid #DDD; height: 10px; width: 170px; background: #EFEFEF; border-radius: 15px;"><div style="height: 100%; width: 50%; background: #58b4ba; border-radius: 10px 0px 0px 10px;"></div></div><div style="box-sizing: content-box; margin: 0px 0px 3px 110px; border: 1px solid #DDD; height: 10px; width: 170px; background: #EFEFEF; border-radius: 15px;"><div style="height: 100%; width: 50%; background: #78c76d; border-radius: 10px 0px 0px 10px;"></div></div><div style="box-sizing: content-box; margin: 5px 0px 3px 110px; border: 1px solid #DDD; height: 10px; width: 170px; background: #EFEFEF; border-radius: 15px;"><div style="height: 100%; width: 50%; background: #aa5e85; border-radius: 10px 0px 0px 10px;"></div></div><div style="box-sizing: content-box; margin: 5px 0px 3px 110px; border: 1px solid #DDD; height: 10px; width: 170px; background: #EFEFEF; border-radius: 15px;"><div style="height: 100%; width: 50%; background: #e96a9d; border-radius: 10px 0px 0px 10px;"></div></div> <div style="box-sizing: content-box; margin-top: 18px; padding-right: 20px; max-height: 55px; overflow-y: scroll; font-size: 11px; text-align: justify;">BLURB GOES HERE</div> </div> <div style="box-sizing: content-box; display: inline; width: 300px; margin-bottom: 30px;"> <div style="box-sizing: content-box; float: left; width: 110px;"><img src="ICONURL" style="width: 100px; border-radius: 10px;" ></div> <div style="box-sizing: content-box; margin-top: 8px; font-weight: bold; font-family: georgia; font-size: 15px;">NAME HERE</div> <div style="box-sizing: content-box; margin: 5px 0px 3px 110px; border: 1px solid #DDD; height: 10px; width: 170px; background: #EFEFEF; border-radius: 15px;"><div style="height: 100%; width: 50%; background: #58b4ba; border-radius: 10px 0px 0px 10px;"></div></div><div style="box-sizing: content-box; margin: 0px 0px 3px 110px; border: 1px solid #DDD; height: 10px; width: 170px; background: #EFEFEF; border-radius: 15px;"><div style="height: 100%; width: 50%; background: #78c76d; border-radius: 10px 0px 0px 10px;"></div></div><div style="box-sizing: content-box; margin: 5px 0px 3px 110px; border: 1px solid #DDD; height: 10px; width: 170px; background: #EFEFEF; border-radius: 15px;"><div style="height: 100%; width: 50%; background: #aa5e85; border-radius: 10px 0px 0px 10px;"></div></div><div style="box-sizing: content-box; margin: 5px 0px 3px 110px; border: 1px solid #DDD; height: 10px; width: 170px; background: #EFEFEF; border-radius: 15px;"><div style="height: 100%; width: 50%; background: #e96a9d; border-radius: 10px 0px 0px 10px;"></div></div> <div style="box-sizing: content-box; margin-top: 18px; padding-right: 20px; max-height: 55px; overflow-y: scroll; font-size: 11px; text-align: justify;">BLURB GOES HERE</div> </div> <div style="box-sizing: content-box; display: inline; width: 300px; margin-bottom: 30px;"> <div style="box-sizing: content-box; float: left; width: 110px;"><img src="ICONURL" style="width: 100px; border-radius: 10px;" ></div> <div style="box-sizing: content-box; margin-top: 8px; font-weight: bold; font-family: georgia; font-size: 15px;">NAME HERE</div> <div style="box-sizing: content-box; margin: 5px 0px 3px 110px; border: 1px solid #DDD; height: 10px; width: 170px; background: #EFEFEF; border-radius: 15px;"><div style="height: 100%; width: 50%; background: #58b4ba; border-radius: 10px 0px 0px 10px;"></div></div><div style="box-sizing: content-box; margin: 0px 0px 3px 110px; border: 1px solid #DDD; height: 10px; width: 170px; background: #EFEFEF; border-radius: 15px;"><div style="height: 100%; width: 50%; background: #78c76d; border-radius: 10px 0px 0px 10px;"></div></div><div style="box-sizing: content-box; margin: 5px 0px 3px 110px; border: 1px solid #DDD; height: 10px; width: 170px; background: #EFEFEF; border-radius: 15px;"><div style="height: 100%; width: 50%; background: #aa5e85; border-radius: 10px 0px 0px 10px;"></div></div><div style="box-sizing: content-box; margin: 5px 0px 3px 110px; border: 1px solid #DDD; height: 10px; width: 170px; background: #EFEFEF; border-radius: 15px;"><div style="height: 100%; width: 50%; background: #e96a9d; border-radius: 10px 0px 0px 10px;"></div></div> <div style="box-sizing: content-box; margin-top: 18px; padding-right: 20px; max-height: 55px; overflow-y: scroll; font-size: 11px; text-align: justify;">BLURB GOES HERE</div> </div> <div style="box-sizing: content-box; display: inline; width: 300px; margin-bottom: 30px;"> <div style="box-sizing: content-box; float: left; width: 110px;"><img src="ICONURL" style="width: 100px; border-radius: 10px;" ></div> <div style="box-sizing: content-box; margin-top: 8px; font-weight: bold; font-family: georgia; font-size: 15px;">NAME HERE</div> <div style="box-sizing: content-box; margin: 5px 0px 3px 110px; border: 1px solid #DDD; height: 10px; width: 170px; background: #EFEFEF; border-radius: 15px;"><div style="height: 100%; width: 50%; background: #58b4ba; border-radius: 10px 0px 0px 10px;"></div></div><div style="box-sizing: content-box; margin: 0px 0px 3px 110px; border: 1px solid #DDD; height: 10px; width: 170px; background: #EFEFEF; border-radius: 15px;"><div style="height: 100%; width: 50%; background: #78c76d; border-radius: 10px 0px 0px 10px;"></div></div><div style="box-sizing: content-box; margin: 5px 0px 3px 110px; border: 1px solid #DDD; height: 10px; width: 170px; background: #EFEFEF; border-radius: 15px;"><div style="height: 100%; width: 50%; background: #aa5e85; border-radius: 10px 0px 0px 10px;"></div></div><div style="box-sizing: content-box; margin: 5px 0px 3px 110px; border: 1px solid #DDD; height: 10px; width: 170px; background: #EFEFEF; border-radius: 15px;"><div style="height: 100%; width: 50%; background: #e96a9d; border-radius: 10px 0px 0px 10px;"></div></div> <div style="box-sizing: content-box; margin-top: 18px; padding-right: 20px; max-height: 55px; overflow-y: scroll; font-size: 11px; text-align: justify;">BLURB GOES HERE</div> </div> </div> <div style="margin-bottom: 20px; text-align: center; font-family: helvetica; -webkit-font-smoothing: antialiased; font-size: 8px; color: #777; text-transform: uppercase; letter-spacing: 2px;">code by <a href="https://withnails.dreamwidth.org/868.html" style="color: #777; text-decoration: none; font-weight: bold;">marwood</a></div> </lj-raw>

add another character:
<div style="box-sizing: content-box; display: inline; width: 300px; margin-bottom: 30px;"> <div style="box-sizing: content-box; float: left; width: 110px;"><img src="ICONURL" style="width: 100px; border-radius: 10px;" ></div> <div style="box-sizing: content-box; margin-top: 8px; font-weight: bold; font-family: georgia; font-size: 15px;">NAME HERE</div> <div style="box-sizing: content-box; margin: 5px 0px 3px 110px; border: 1px solid #DDD; height: 10px; width: 170px; background: #EFEFEF; border-radius: 15px;"><div style="height: 100%; width: 50%; background: #58b4ba; border-radius: 10px 0px 0px 10px;"></div></div><div style="box-sizing: content-box; margin: 0px 0px 3px 110px; border: 1px solid #DDD; height: 10px; width: 170px; background: #EFEFEF; border-radius: 15px;"><div style="height: 100%; width: 50%; background: #78c76d; border-radius: 10px 0px 0px 10px;"></div></div><div style="box-sizing: content-box; margin: 5px 0px 3px 110px; border: 1px solid #DDD; height: 10px; width: 170px; background: #EFEFEF; border-radius: 15px;"><div style="height: 100%; width: 50%; background: #aa5e85; border-radius: 10px 0px 0px 10px;"></div></div><div style="box-sizing: content-box; margin: 5px 0px 3px 110px; border: 1px solid #DDD; height: 10px; width: 170px; background: #EFEFEF; border-radius: 15px;"><div style="height: 100%; width: 50%; background: #e96a9d; border-radius: 10px 0px 0px 10px;"></div></div> <div style="box-sizing: content-box; margin-top: 18px; padding-right: 20px; max-height: 55px; overflow-y: scroll; font-size: 11px; text-align: justify;">BLURB GOES HERE</div> </div>

again, please let me know if you run into any issues or want to fudge something around and need a hand, i'd be happy to help! and of course please don't delete the credit!

updated in may 2021 to fix spacing issues caused by a DW code push from last year.