CR Chart & Muse List for Sker

[angermanaging]

( static preview )



( live preview - cr chart )

KORRA
 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare pellentesque dui non hendrerit. Donec rhoncus tellus ut felis vestibulum, hendrerit elementum lorem faucibus. Aliquam varius nulla sed egestas molestie. Fusce consequat nibh non hendrerit eleifend. Quisque tristique, ligula molestie convallis lacinia, tellus ligula congue est, vitae faucibus nisi arcu ut orci. Praesent dignissim egestas nunc nec interdum. Integer nec tristique arcu. Morbi egestas auctor augue, et rutrum mi. Phasellus cursus rhoncus dolor.

CHARACTER NAME
 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare pellentesque dui non hendrerit.

( live preview - muse list )

KORRA
Legend of Korra
 
alphatar @ tushanshu

KORRA
Legend of Korra
 
alphatar @ tushanshu

( instructions )

CR chart: <cut><raw-code><center><div style="width:100%;"> <!--CHARACTER START--> <div style="width:350px;margin:15px;display:inline-block;vertical-align:top;"> <div style="width:100%;text-align:justify;margin-bottom:-10px;"><img src="ICON URL HERE" style="border: #e0e0e0 5px solid; border-radius: 10px; float: left; margin-right:15px;"><span style="font-size:18px;">CHARACTER NAME</span> <br>  <br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare pellentesque dui non hendrerit.</div> <table><tr><td><img src="http://i.imgur.com/r5T7qe6.png" height="25px"></td><td><div style="float:right;display:inline;width:300px;height:15px;border-radius:20px;border: #e0e0e0 3px solid;"><div style="width: CR PERCENT WIDTH%; height: 100%; background: CR BAR HEX CODE; position:relative;border-radius:20px;"></div></div></td></tr> <tr><td><img src="http://i.imgur.com/QEdpY4a.png" height="25px"></td><td><div style="float:right;display:inline;width:300px;height:15px;border-radius:20px;border: #e0e0e0 3px solid;"><div style="width: HEART PERCENT WIDTH%; height: 100%; background: #F6A4D5; position:relative;border-radius:20px;"></div></div></td></tr></table></div> <!--CHARACTER START--> <div style="width:350px;margin:15px;display:inline-block;vertical-align:top;"> <div style="width:100%;text-align:justify;margin-bottom:-10px;"><img src="ICON URL HERE" style="border: #e0e0e0 5px solid; border-radius: 10px; float: left; margin-right:15px;"><span style="font-size:18px;">CHARACTER NAME</span> <br>  <br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare pellentesque dui non hendrerit.</div> <table><tr><td><img src="http://i.imgur.com/r5T7qe6.png" height="25px"></td><td><div style="float:right;display:inline;width:300px;height:15px;border-radius:20px;border: #e0e0e0 3px solid;"><div style="width: CR PERCENT WIDTH%; height: 100%; background: CR BAR HEX CODE; position:relative;border-radius:20px;"></div></div></td></tr> <tr><td><img src="http://i.imgur.com/QEdpY4a.png" height="25px"></td><td><div style="float:right;display:inline;width:300px;height:15px;border-radius:20px;border: #e0e0e0 3px solid;"><div style="width: HEART PERCENT WIDTH%; height: 100%; background: #F6A4D5; position:relative;border-radius:20px;"></div></div></td></tr></table></div> <!--PASTE NEW CHARACTERS ABOVE THIS LINE--> </div></center> <div style="width:100%;text-align:right;"><small>Code by <user name="bannertech">.</small></div></raw-code>

Muse list: <raw-code><center><div style="width:100%;"> <!--CHARACTER START--> <div style="width:350px;margin:15px;display:inline-block;vertical-align:top;"> <div style="width:100%;text-align:justify;margin-bottom:-10px;"><img src="http://www.dreamwidth.org/userpic/6077555/1997072" style="border: #e0e0e0 5px solid; border-radius: 10px; float: left; margin-right:15px;"><span style="font-size:18px;">KORRA</span> <br><I>Legend of Korra</I> <br>  <br><user name="alphatar"> @ <user name="tushanshu"></div> <table><tr><td><img src="http://i.imgur.com/XiMkBUn.png" height="25px"></td><td><div style="float:right;display:inline;width:300px;height:15px;border-radius:20px;border: #e0e0e0 3px solid;margin-left:-5px;"><div style="width: 70%; height: 100%; background: #007FFF; position:relative;border-radius:20px;"></div></div></td></tr> </table></div> <!--CHARACTER START--> <div style="width:350px;margin:15px;display:inline-block;vertical-align:top;"> <div style="width:100%;text-align:justify;margin-bottom:-10px;"><img src="http://www.dreamwidth.org/userpic/6077555/1997072" style="border: #e0e0e0 5px solid; border-radius: 10px; float: left; margin-right:15px;"><span style="font-size:18px;">KORRA</span> <br><I>Legend of Korra</I> <br>  <br><user name="alphatar"> @ <user name="tushanshu"></div> <table><tr><td><img src="http://i.imgur.com/XiMkBUn.png" height="25px"></td><td><div style="float:right;display:inline;width:300px;height:15px;border-radius:20px;border: #e0e0e0 3px solid;margin-left:-5px;"><div style="width: 70%; height: 100%; background: #007FFF; position:relative;border-radius:20px;"></div></div></td></tr> </table></div> <!--PASTE NEW CHARACTERS ABOVE THIS LINE--> </div></center> <div style="width:100%;text-align:right;"><small>Code by <user name="bannertech">.</small></div></raw-code>

Features: should align properly regardless of how much text is in the blurbs, and the rows will form automatically regardless of what order you put the characters in. For other tiny icons and different colors, I have some basics in an album and then there's the full set. Customize with different colors, bar colors, border colors, and fonts!

Comments

[bydefacto]

I love these. May snag both, thank you. <3

[nowhere]

omg this is amazing. thanks so much for sharing! ♥

[grigio]

Oh, these are lovely. Snagging the CR chart because it's just beautiful.

[kelphead]

In use (albeit under construction) here. I love this; it's so clean and easy to update and use. <3 Wonderful work.

[notvessalius]

this is so cute, i altered it a little for oz's shipping chart! i added the altered code at the bottom and credited you <3 thanks for making this!!

[portaling]

ahhh thank you, using this for my muselist ♥ very nice and simple!

[atliere]

snagging! thank you so much! beautiful work.

[barb_notbabs]

This CR chart is just amazing. <3