[ code ] muselist / cr chart

[laenavesse]

single item chart

HEADER

❝ CHARACTER ❞ journal canon additional info

HEADER

❝ CHARACTER ❞ journal canon additional info

❝ CHARACTER ❞ journal canon additional info

❝ CHARACTER ❞ journal canon additional info

double item chart

HEADER
❝ CHARACTER ❞ journal canon additional info	❝ CHARACTER ❞ journal canon additional info
HEADER
❝ CHARACTER ❞ journal canon additional info	❝ CHARACTER ❞ journal canon additional info
❝ CHARACTER ❞ journal canon additional info	❝ CHARACTER ❞ journal canon additional info
❝ CHARACTER ❞ journal canon additional info	❝ CHARACTER ❞ journal canon additional info

instructions

single

double

<table style="font-family:calibri; font-size:11pt; border-collapse:collapse; width:400px;"> <tr style="background:#485468; vertical-align: middle;"> <td style="line-height:normal; padding:5; text-align: center"><font style="font-family:calibri; font-size:14pt; color:#eddcb3;">HEADER</font></td></tr> <tr><td colspan="2" height="10"></td></tr> <tr><td><center><div style="width: 300px; height: 100px; color: #1F1F1F; line-height: 1.2em; text-align: left; padding: 2px 0px 5px 0px; border: 2px solid white; background-image: url('http://i.imgur.com/Ig0idCX.png'); background-repeat: repeat; -webkit-border-radius: 20px 0px 20px 0px; border-radius: 20px 0px 20px 0px; -webkit-box-shadow: #B3B3B3 2px 2px 2px;-moz-box-shadow: #B3B3B3 2px 2px 2px; box-shadow: #B3B3B3 2px 2px 2px;"><img style="border: 2px solid white; -moz-border-radius: 20px 0px 20px 0px; -webkit-border-radius: 20px 0px 20px 0px; border-radius: 20px 0px 20px 0px; float: left; margin-right: 8px;" src="USERPIC"><font style="font-size:12pt;">❝ CHARACTER ❞</font> <i>journal</i> <u>canon</u> additional info</div></center></td></tr></table>

<table style="font-family:calibri; font-size:11pt; border-collapse:collapse; width:700px;"> <tr style="background:#485468; vertical-align: middle;"> <td style="line-height:normal; padding:5; text-align: center" colspan="2"><font style="font-family:calibri; font-size:14pt; color:#eddcb3;">HEADER</font></td></tr> <tr><td colspan="2" height="10"></td></tr> <tr><td><center><div style="width: 300px; height: 100px; color: #1F1F1F; line-height: 1.2em; text-align: left; padding: 2px 0px 5px 0px; border: 2px solid white; background-image: url('http://i.imgur.com/Ig0idCX.png'); background-repeat: repeat; -webkit-border-radius: 20px 0px 20px 0px; border-radius: 20px 0px 20px 0px; -webkit-box-shadow: #B3B3B3 2px 2px 2px;-moz-box-shadow: #B3B3B3 2px 2px 2px; box-shadow: #B3B3B3 2px 2px 2px;"><img style="border: 2px solid white; -moz-border-radius: 20px 0px 20px 0px; -webkit-border-radius: 20px 0px 20px 0px; border-radius: 20px 0px 20px 0px; float: left; margin-right: 8px;" src="USERPIC"><font style="font-size:12pt;">❝ CHARACTER ❞</font> <i>journal</i> <u>canon</u> additional info</div></center></td> <td><center><div style="width: 300px; height: 100px; color: #1F1F1F; line-height: 1.2em; text-align: left; padding: 2px 0px 6px 2px; border: 2px solid white; background-image: url('http://i.imgur.com/Ig0idCX.png'); background-repeat: repeat; -webkit-border-radius: 20px 0px 20px 0px; border-radius: 20px 0px 20px 0px; -webkit-box-shadow: #B3B3B3 2px 2px 2px;-moz-box-shadow: #B3B3B3 2px 2px 2px; box-shadow: #B3B3B3 2px 2px 2px;"><img style="border: 2px solid white; -moz-border-radius: 20px 0px 20px 0px; -webkit-border-radius: 20px 0px 20px 0px; border-radius: 20px 0px 20px 0px; float: left; margin-right: 8px;" src="USERPIC"><font style="font-size:12pt;">❝ CHARACTER ❞</font> <i>journal</i> <u>canon</u> additional info</div></td></tr> <tr><td colspan="2" height="10"></center></td></tr></table>

❖ Can be used for either muselists, cr charts, or whatever else! Feel free to modify c:
❖ To change the header color, find #485468 to replace it. To change the header font color, find #eddcb3 to replace.
❖ To change the width of the boxes, replace width: 300px to the desired size. For best results, boxes should all be the same size.
❖ To change background texture, replace i.imgur.com/Ig0idCX.png to background of your choosing.
❖ The ASCII code for the "quotes" are ❝ and ❞ respectively.
❖ Note: this wasn't designed for lengthy blurbs, but it can fit a couple of sentences. If it's on the lengthy side, make the info text smaller and change the line-height to 1.1em. Example here.
❖ Credit either laenavesse or efryndiel

Comments

[technobeats]

Hi there! I'm using it over here on my journal as a listing of sorts for the different versions of the girl here. Thanks so much for making it. It's really pretty and easy to use!

[technobeats]

Sorry for the double reply. I.

Don't know how that happened.

[questionablewit]

This is terrific, exactly what I was looking for; it's clean and attractive, easy to read and easy to edit, especially with those handy instructions you've included. Thanks so much!

[megabond]

This is an awesome coding you got here!

I'm using it right now in my personal journal as a muselist and I'm also planning it to use it as a CR chart for this character as well!

Thanks and keep being awesome!