CR chart / muselist

[millennialfalcon]

BARBARA GORDON
oracle
● ○ ○ ○ ○

TIM DRAKE
red robin
● ○ ○ ○ ○

JASON TODD
red hood
● ○ ○ ○ ○

STEPHANIE BROWN
spoiler
● ○ ○ ○ ○

DUKE THOMAS
signal
● ○ ○ ○ ○

DAMIAN WAYNE
robin
● ○ ○ ○ ○

CASSANDRA CAIN
batgirl
● ○ ○ ○ ○

DICK GRAYSON
nightwing
● ○ ○ ○ ○

CHARACTER NAME
subtitle
● ○ ○ ○ ○

CHARACTER MCLONGNAME JR
subtitle
● ○ ○ ○ ○

CODE

---

THE CODE:
<center> <raw-code> <div style="font-family: 'times new roman', sans-serif;"> <!---LIST OF CHARACTERS START---> <!---CHARACTER START---> <div style="padding: 0; width: 180px; height: 260px; border-radius: 50px 5px; -moz-border-radius: 50px 5px; background: url(BACKGROUND_URL) #ddd; background-size:cover; display: inline-block; margin: 10px;"> <img src="ICON_URL" style="width: 100px; height: 100px; border-radius: 50px 5px; margin-top:50px; background: #bbb;"> <div style="width: 180px; height: 70px; margin-top: 35px; background: rgba(0,0,0,0.69); border-radius: 0 0 50px 5px; padding: 10px 10px; font-size: 0.9rem; color: #fff; font-weight: bold; letter-spacing: 1px;display: flex; align-items: center; justify-content: center; line-height: 1.25em;box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;"> CHARACTER NAME<br> subtitle<br> ● ○ ○ ○ ○ </div> </div> <!---CHARACTER END---> <!---LIST OF CHARACTERS END---> </div> <!---CREDIT, DO NOT REMOVE---> <div style="width: 100%; margin-top: 5px"><a href="https://chriscodes.dreamwidth.org/" style="color:#ccc;text-decoration:none;font-family:helvetica;font-size:9px">CODE</a></div> </raw-code> </center>

FIND AND REPLACE:

• BAGKROUND_URL - Each background image
  
• ICON_URL - Each icon
  
• CHARACTER NAME - Self explanatory
  
• subtitle - Put whatever you want here: canon, relationship, username, etc.
  
• You can copy and paste all the code from <!---CHARACTER START---> to <!---CHARACTER END---> to add new characters.
  
• Do not mess with the code outside of <!---LIST OF CHARACTERS START---> and <!---LIST OF CHARACTERS END--->.
  
• For characters with longer names (as in the example above) who need more than the 3 lines of text, change height: 70px; margin-top: 35px; to height: 80px; margin-top: 25px; or whatever combination looks right. Remember that however much you increase the height, you must decrease the margin-top to match.
  

Comments

[talkyourwayout]

I really dig this, it's got a sleek and clean look. Can I ask if there's a way to use a single color instead of an image for the background? 'Cause I'd love to use this for cr charts with the background as a bit of color-coding! ...Sorry if it's an obvious change btw, I am not an html-savvy guy!

[millennialfalcon]

OMG I'm so sorry, I somehow never got notified about this comment...

In order to use a color instead of an image, you would take

background: url(BACKGROUND_URL) #ddd; background-size:cover;

And replace it with

background: #HEX_COLOR;

Where the HEX_COLOR is the color of your choice.

Here's the edited code for you:
<center> <raw-code> <div style="font-family: 'times new roman', sans-serif;"> <!---LIST OF CHARACTERS START---> <!---CHARACTER START---> <div style="padding: 0; width: 180px; height: 260px; border-radius: 50px 5px; -moz-border-radius: 50px 5px; background: #HEX_COLOR; display: inline-block; margin: 10px;"> <img src="ICON_URL" style="width: 100px; height: 100px; border-radius: 50px 5px; margin-top:50px; background: #bbb;"> <div style="width: 180px; height: 70px; margin-top: 35px; background: rgba(0,0,0,0.69); border-radius: 0 0 50px 5px; padding: 10px 10px; font-size: 0.9rem; color: #fff; font-weight: bold; letter-spacing: 1px;display: flex; align-items: center; justify-content: center; line-height: 1.25em;box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;"> CHARACTER NAME<br> subtitle<br> ● ○ ○ ○ ○ </div> </div> <!---CHARACTER END---> <!---LIST OF CHARACTERS END---> </div> <!---CREDIT, DO NOT REMOVE---> <div style="width: 100%; margin-top: 5px"><a href="https://chriscodes.dreamwidth.org/" style="color:#ccc;text-decoration:none;font-family:helvetica;font-size:9px">CODE</a></div> </raw-code> </center>