efryndiel | [ code ] cr chart / muselist / profile (Reply)

cr chart card

⋗ ⋗ ⋗ ROKUROU ⋖ ⋖ ⋖

◆◆◆◆◆ ⇒ ⚔
◆◆◆◆◇ ⇒ ♞
◆◆◆◇◇ ⇒ ⛯
◆◆◇◇◇ ⇒ ✠

◉

⛢

daemon swordsman. all he wants to do is fight strong foes, drink, and just enjoy his life. also a sword fanatic so watch out if he gets excited.

single card

<!---START CARD---!>
<div style="margin: auto; width: 355px;"><raw-code>
<div style="width: 355px; height: 200px; display: inline-block; vertical-align: top!important;">
<!---ICON---!>
<img src="ICONIMGURL" style="box-shadow: -6px 0 0 #93151B; border-radius: 100px; float: left; position: relative; z-index: 2;">
<!---CHARACTER---!>
<div style="margin: 5px 0 0 25px; width: 280px; height: 28px; background-color: #93151B; border-radius: 20px; padding-right: 15px; text-align: center; white-space: nowrap; position: relative; z-index: 1;">
<span style="font-family: century gothic; font-size: 14pt; color: #ffffff;">⋗ ⋗ ⋗ CHARACTER ⋖ ⋖ ⋖</span></div>
<!---CR BARS CONTENT---!>
<div style="margin: 6px 0 0 116px; width: 115px; height: 60px; color: #4C1459; font-size: 11pt; line-height: 1em; overflow: hidden; position: relative; z-index: 1;">
◆◆◆◆◆ ⇒ ⚔ <br />
◆◆◆◆◇ ⇒ ♞<br />
◆◆◆◇◇ ⇒ ⛯<br />
◆◆◇◇◇ ⇒ ✠<br /></div>
<!---SIDE DIAMOND: TOP---!>
<div style="margin: 12px 0 0 25px; width: 28px; height: 28px; background-color: #FFC46A; transform: rotate(45deg); box-shadow: -4px 4px 0 #93151B;"><div style="width: 27px; height: 28px; font-size: 20pt; text-align: center; line-height: 0.7em; transform: rotate(-45deg);">
<a href="" style="color: #300D38; text-decoration: none;">♠</a></div></div>
<!---SIDE DIAMOND: MIDDLE---!>
<div style="margin: 1px 0 0 25px; width: 28px; height: 28px; background-color: #FFC46A; transform: rotate(45deg); box-shadow: -4px 4px 0 #93151B;"><div style="width: 27px; height: 28px; color: #300D38; font-size: 20pt; text-align: center; line-height: 0.8em; transform: rotate(-45deg);">♧</div></div>
<!---SIDE DIAMOND: BOTTOM---!>
<div style="margin: 1px 0 0 25px; width: 28px; height: 28px; background-color: #FFC46A; transform: rotate(45deg); box-shadow: -4px 4px 0 #93151B;"><div style="width: 27px; height: 28px; color: #300D38; font-size: 20pt; text-align: center; line-height: 1em; transform: rotate(-45deg);">♥</div></div>
<!---TEXT---!>
<div style="margin: -97px 0 0 67px; width: 175px; height: 75px; color: #4C1459; text-transform: lowercase; font-size: 8pt; line-height: 0.9em; overflow: hidden; position: relative; z-index: 1;">
<hr style="border-top: medium double #93151B;">
BOTTOM TEXT BLURB
</div>
<!---BIG CIRCLE---!>
<div style="margin: -190px 0 0 27px; width: 225px; height: 210px; border-radius: 50% 50% 0% 40%; background-color: #FBF0E3;"></div>
</div></raw-code></div>
<!---END CARD--!>

multiple cards

<table style="margin: auto;width: 725px;">
<tr style="vertical-align: top;">
<td><raw-code>
<!---START CARD---!>
<div style="width: 355px; height: 250px; display: inline-block; vertical-align: top!important; float: left;">
<!---ICON---!>
<img src="ICONIMGURL" style="box-shadow: -6px 0 0 #93151B; border-radius: 100px; float: left; position: relative; z-index: 2;">
<!---CHARACTER---!>
<div style="margin: 5px 0 0 25px; width: 280px; height: 28px; background-color: #93151B; border-radius: 20px; padding-right: 15px; text-align: center; white-space: nowrap; position: relative; z-index: 1;">
<span style="font-family: century gothic; font-size: 14pt; color: #ffffff;">⋗ ⋗ ⋗ CHARACTER ⋖ ⋖ ⋖</span></div>
<!---CR BARS CONTENT---!>
<div style="margin: 6px 0 0 116px; width: 115px; height: 60px; color: #4C1459; font-size: 11pt; line-height: 1em; overflow: hidden; position: relative; z-index: 1;">
◆◆◆◆◆ ⇒ ⚔ <br />
◆◆◆◆◇ ⇒ ♞<br />
◆◆◆◇◇ ⇒ ⛯<br />
◆◆◇◇◇ ⇒ ✠<br /></div>
<!---SIDE DIAMOND: TOP---!>
<div style="margin: 12px 0 0 25px; width: 28px; height: 28px; background-color: #FFC46A; transform: rotate(45deg); box-shadow: -4px 4px 0 #93151B;"><div style="width: 27px; height: 28px; font-size: 20pt; text-align: center; line-height: 0.7em; transform: rotate(-45deg);">
<a href="" style="color: #300D38; text-decoration: none;">♠</a></div></div>
<!---SIDE DIAMOND: MIDDLE---!>
<div style="margin: 1px 0 0 25px; width: 28px; height: 28px; background-color: #FFC46A; transform: rotate(45deg); box-shadow: -4px 4px 0 #93151B;"><div style="width: 27px; height: 28px; color: #300D38; font-size: 20pt; text-align: center; line-height: 0.8em; transform: rotate(-45deg);">♧</div></div>
<!---SIDE DIAMOND: BOTTOM---!>
<div style="margin: 1px 0 0 25px; width: 28px; height: 28px; background-color: #FFC46A; transform: rotate(45deg); box-shadow: -4px 4px 0 #93151B;"><div style="width: 27px; height: 28px; color: #300D38; font-size: 20pt; text-align: center; line-height: 1em; transform: rotate(-45deg);">♥</div></div>
<!---TEXT---!>
<div style="margin: -97px 0 0 67px; width: 175px; height: 75px; color: #4C1459; text-transform: lowercase; font-size: 8pt; line-height: 0.9em; overflow: hidden; position: relative; z-index: 1;">
<hr style="border-top: medium double #93151B;">
BOTTOM TEXT BLURB
</div>
<!---BIG CIRCLE---!>
<div style="margin: -190px 0 0 27px; width: 225px; height: 210px; border-radius: 50% 50% 0% 40%; background-color: #FBF0E3;"></div>
</div>
<!---END CARD--!>

<!---START CARD---!>
<div style="width: 355px; height: 250px; display: inline-block; vertical-align: top!important; float: left;">
<!---ICON---!>
<img src="ICONIMGURL" style="box-shadow: -6px 0 0 #93151B; border-radius: 100px; float: left; position: relative; z-index: 2;">
<!---CHARACTER---!>
<div style="margin: 5px 0 0 25px; width: 280px; height: 28px; background-color: #93151B; border-radius: 20px; padding-right: 15px; text-align: center; white-space: nowrap; position: relative; z-index: 1;">
<span style="font-family: century gothic; font-size: 14pt; color: #ffffff;">⋗ ⋗ ⋗ CHARACTER ⋖ ⋖ ⋖</span></div>
<!---CR BARS CONTENT---!>
<div style="margin: 6px 0 0 116px; width: 115px; height: 60px; color: #4C1459; font-size: 11pt; line-height: 1em; overflow: hidden; position: relative; z-index: 1;">
◆◆◆◆◆ ⇒ ⚔ <br />
◆◆◆◆◇ ⇒ ♞<br />
◆◆◆◇◇ ⇒ ⛯<br />
◆◆◇◇◇ ⇒ ✠<br /></div>
<!---SIDE DIAMOND: TOP---!>
<div style="margin: 12px 0 0 25px; width: 28px; height: 28px; background-color: #FFC46A; transform: rotate(45deg); box-shadow: -4px 4px 0 #93151B;"><div style="width: 27px; height: 28px; font-size: 20pt; text-align: center; line-height: 0.7em; transform: rotate(-45deg);">
<a href="" style="color: #300D38; text-decoration: none;">♠</a></div></div>
<!---SIDE DIAMOND: MIDDLE---!>
<div style="margin: 1px 0 0 25px; width: 28px; height: 28px; background-color: #FFC46A; transform: rotate(45deg); box-shadow: -4px 4px 0 #93151B;"><div style="width: 27px; height: 28px; color: #300D38; font-size: 20pt; text-align: center; line-height: 0.8em; transform: rotate(-45deg);">♧</div></div>
<!---SIDE DIAMOND: BOTTOM---!>
<div style="margin: 1px 0 0 25px; width: 28px; height: 28px; background-color: #FFC46A; transform: rotate(45deg); box-shadow: -4px 4px 0 #93151B;"><div style="width: 27px; height: 28px; color: #300D38; font-size: 20pt; text-align: center; line-height: 1em; transform: rotate(-45deg);">♥</div></div>
<!---TEXT---!>
<div style="margin: -97px 0 0 67px; width: 175px; height: 75px; color: #4C1459; text-transform: lowercase; font-size: 8pt; line-height: 0.9em; overflow: hidden; position: relative; z-index: 1;">
<hr style="border-top: medium double #93151B;">
BOTTOM TEXT BLURB
</div>
<!---BIG CIRCLE---!>
<div style="margin: -190px 0 0 27px; width: 225px; height: 210px; border-radius: 50% 50% 0% 40%; background-color: #FBF0E3;"></div>
</div>
<!---END CARD--!>
</raw-code></td></tr>
</table>

info card

⋗ ⋗ ⋗ ALVIN ⋖ ⋖ ⋖

can put some text
idk series name
journal name
stuff in four lines

♠

♧

♥

and more blurb or whatever Lorem ipsum dolor sit amet, consectetur adipiscing elit. In id dolor et ligula molestie luctus. Phasellus hendrerit, purus ac malesuada

single card

<!---START CARD---!>
<div style="margin: auto; width: 355px;"><raw-code>
<div style="width: 355px; height: 200px; display: inline-block; vertical-align: top!important;">
<!---ICON---!>
<img src="ICONIMGURL" style="box-shadow: -6px 0 0 #93151B; border-radius: 100px; float: left; position: relative; z-index: 2;">
<!---CHARACTER---!>
<div style="margin: 5px 0 0 25px; width: 280px; height: 28px; background-color: #93151B; border-radius: 20px; padding-right: 15px; text-align: center; white-space: nowrap; position: relative; z-index: 1;">
<span style="font-family: century gothic; font-size: 14pt; color: #ffffff;">⋗ ⋗ ⋗ CHARACTER ⋖ ⋖ ⋖</span></div>
<!---TOP INFO BOX CONTENT---!>
<div style="margin: 6px 0 0 110px; width: 115px; height: 60px; color: #0E0D2F; font-family: century gothic; font-size: 9pt; text-align: center; line-height: 1.2em; overflow: hidden; position: relative; z-index: 1;">
LINE ONE<br />
LINE TWO<br />
LINE THREE<br />
LINE FOUR<br /></div>
<!---SIDE DIAMOND: TOP---!>
<div style="margin: 12px 0 0 25px; width: 28px; height: 28px; background-color: #FFC46A; transform: rotate(45deg); box-shadow: -4px 4px 0 #93151B;"><div style="width: 27px; height: 28px; font-size: 20pt; text-align: center; line-height: 0.7em; transform: rotate(-45deg);">
<a href="" style="color: #300D38; text-decoration: none;">♠</a></div></div>
<!---SIDE DIAMOND: MIDDLE---!>
<div style="margin: 1px 0 0 25px; width: 28px; height: 28px; background-color: #FFC46A; transform: rotate(45deg); box-shadow: -4px 4px 0 #93151B;"><div style="width: 27px; height: 28px; color: #300D38; font-size: 20pt; text-align: center; line-height: 0.8em; transform: rotate(-45deg);">♧</div></div>
<!---SIDE DIAMOND: BOTTOM---!>
<div style="margin: 1px 0 0 25px; width: 28px; height: 28px; background-color: #FFC46A; transform: rotate(45deg); box-shadow: -4px 4px 0 #93151B;"><div style="width: 27px; height: 28px; color: #300D38; font-size: 20pt; text-align: center; line-height: 1em; transform: rotate(-45deg);">♥</div></div>
<!---TEXT---!>
<div style="margin: -97px 0 0 67px; width: 175px; height: 75px; color: #4C1459; text-transform: lowercase; font-size: 8pt; line-height: 0.9em; overflow: hidden; position: relative; z-index: 1;">
<hr style="border-top: medium double #93151B;">
BOTTOM TEXT BLURB
</div>
<!---BIG CIRCLE---!>
<div style="margin: -190px 0 0 27px; width: 225px; height: 210px; border-radius: 50% 50% 0% 40%; background-color: #FBF0E3;"></div>
</div></raw-code></div>
<!---END CARD--!>

multiple cards

<table style="margin: auto;width: 725px;">
<tr style="vertical-align: top;">
<td><raw-code>
<!---START CARD---!>
<div style="width: 355px; height: 250px; display: inline-block; vertical-align: top!important; float: left;">
<!---ICON---!>
<img src="ICONIMGURL" style="box-shadow: -6px 0 0 #93151B; border-radius: 100px; float: left; position: relative; z-index: 2;">
<!---CHARACTER---!>
<div style="margin: 5px 0 0 25px; width: 280px; height: 28px; background-color: #93151B; border-radius: 20px; padding-right: 15px; text-align: center; white-space: nowrap; position: relative; z-index: 1;">
<span style="font-family: century gothic; font-size: 14pt; color: #ffffff;">⋗ ⋗ ⋗ CHARACTER ⋖ ⋖ ⋖</span></div>
<!---TOP INFO BOX CONTENT---!>
<div style="margin: 6px 0 0 110px; width: 115px; height: 60px; color: #0E0D2F; font-family: century gothic; font-size: 9pt; text-align: center; line-height: 1.2em; overflow: hidden; position: relative; z-index: 1;">
LINE ONE<br />
LINE TWO<br />
LINE THREE<br />
LINE FOUR<br /></div>
<!---SIDE DIAMOND: TOP---!>
<div style="margin: 12px 0 0 25px; width: 28px; height: 28px; background-color: #FFC46A; transform: rotate(45deg); box-shadow: -4px 4px 0 #93151B;"><div style="width: 27px; height: 28px; font-size: 20pt; text-align: center; line-height: 0.7em; transform: rotate(-45deg);">
<a href="" style="color: #300D38; text-decoration: none;">♠</a></div></div>
<!---SIDE DIAMOND: MIDDLE---!>
<div style="margin: 1px 0 0 25px; width: 28px; height: 28px; background-color: #FFC46A; transform: rotate(45deg); box-shadow: -4px 4px 0 #93151B;"><div style="width: 27px; height: 28px; color: #300D38; font-size: 20pt; text-align: center; line-height: 0.8em; transform: rotate(-45deg);">♧</div></div>
<!---SIDE DIAMOND: BOTTOM---!>
<div style="margin: 1px 0 0 25px; width: 28px; height: 28px; background-color: #FFC46A; transform: rotate(45deg); box-shadow: -4px 4px 0 #93151B;"><div style="width: 27px; height: 28px; color: #300D38; font-size: 20pt; text-align: center; line-height: 1em; transform: rotate(-45deg);">♥</div></div>
<!---TEXT---!>
<div style="margin: -97px 0 0 67px; width: 175px; height: 75px; color: #4C1459; text-transform: lowercase; font-size: 8pt; line-height: 0.9em; overflow: hidden; position: relative; z-index: 1;">
<hr style="border-top: medium double #93151B;">
BOTTOM TEXT BLURB
</div>
<!---BIG CIRCLE---!>
<div style="margin: -190px 0 0 27px; width: 225px; height: 210px; border-radius: 50% 50% 0% 40%; background-color: #FBF0E3;"></div>
</div>
<!---END CARD--!>

<!---START CARD---!>
<div style="width: 355px; height: 250px; display: inline-block; vertical-align: top!important; float: left;">
<!---ICON---!>
<img src="ICONIMGURL" style="box-shadow: -6px 0 0 #93151B; border-radius: 100px; float: left; position: relative; z-index: 2;">
<!---CHARACTER---!>
<div style="margin: 5px 0 0 25px; width: 280px; height: 28px; background-color: #93151B; border-radius: 20px; padding-right: 15px; text-align: center; white-space: nowrap; position: relative; z-index: 1;">
<span style="font-family: century gothic; font-size: 14pt; color: #ffffff;">⋗ ⋗ ⋗ CHARACTER ⋖ ⋖ ⋖</span></div>
<!---TOP INFO BOX CONTENT---!>
<div style="margin: 6px 0 0 110px; width: 115px; height: 60px; color: #0E0D2F; font-family: century gothic; font-size: 9pt; text-align: center; line-height: 1.2em; overflow: hidden; position: relative; z-index: 1;">
LINE ONE<br />
LINE TWO<br />
LINE THREE<br />
LINE FOUR<br /></div>
<!---SIDE DIAMOND: TOP---!>
<div style="margin: 12px 0 0 25px; width: 28px; height: 28px; background-color: #FFC46A; transform: rotate(45deg); box-shadow: -4px 4px 0 #93151B;"><div style="width: 27px; height: 28px; font-size: 20pt; text-align: center; line-height: 0.7em; transform: rotate(-45deg);">
<a href="" style="color: #300D38; text-decoration: none;">♠</a></div></div>
<!---SIDE DIAMOND: MIDDLE---!>
<div style="margin: 1px 0 0 25px; width: 28px; height: 28px; background-color: #FFC46A; transform: rotate(45deg); box-shadow: -4px 4px 0 #93151B;"><div style="width: 27px; height: 28px; color: #300D38; font-size: 20pt; text-align: center; line-height: 0.8em; transform: rotate(-45deg);">♧</div></div>
<!---SIDE DIAMOND: BOTTOM---!>
<div style="margin: 1px 0 0 25px; width: 28px; height: 28px; background-color: #FFC46A; transform: rotate(45deg); box-shadow: -4px 4px 0 #93151B;"><div style="width: 27px; height: 28px; color: #300D38; font-size: 20pt; text-align: center; line-height: 1em; transform: rotate(-45deg);">♥</div></div>
<!---TEXT---!>
<div style="margin: -97px 0 0 67px; width: 175px; height: 75px; color: #4C1459; text-transform: lowercase; font-size: 8pt; line-height: 0.9em; overflow: hidden; position: relative; z-index: 1;">
<hr style="border-top: medium double #93151B;">
BOTTOM TEXT BLURB
</div>
<!---BIG CIRCLE---!>
<div style="margin: -190px 0 0 27px; width: 225px; height: 210px; border-radius: 50% 50% 0% 40%; background-color: #FBF0E3;"></div>
</div>
<!---END CARD--!>
</raw-code></td></tr>
</table>

sample legend header

⋗ ⋗ ⋗ LEGEND ⋖ ⋖ ⋖
⚔: first	♞: second	⛯: third	✠: fourth
⚜: top symbol	◉: second symbol		⛢: third symbol

sample header

⋗ ⋗ ⋗ CASTMATES ⋖ ⋖ ⋖

instructions & notes

❖ Mostly designed for CR charts, but they can be used for little info or muse cards. You can see it in the works here. Default color template is the Rokurou set.

❖ Colors:

#93151B: character header, boxshadow, hr line
#4C1459: text
#300D38: symbol text color
#FFC46A: symbol diamond bg color
#EB8D52: header text

❖ For the multiple set, all you have to do is copy/paste the card code from START CARD to END CARD after each card. Just make sure everything stays within the raw-code tags and you're all good.

❖ Note on the diamond symbols: because symbols aren't uniform in size, you'll probably have to fiddle with the font-size and/or the line-height to make the symbol fit centered. Increasing the line-height will move the symbol down, and decreasing it will move it up. Also, the top symbol is in link form only as a template reference.

❖ Note on the info cards: to be honest the only difference between it and the CR chart version is the top text section. For quick edit, just replace the CR BARS CONTENT with the following section and you're good.

❖ Last note: everything is coded so that if there's too much text to be displayed, the overflow will be hidden. Some ways to adjust (other than reducing content) is decreasing font size or, in the case of the character header, remove some of the arrows. They're just space filler decoration so you can do whatever with it lol.

❖ Credit either

laenavesse or

efryndiel

[ code ] cr chart / muselist / profile

Post a comment in response: