efryndiel | [ code ] muselist / cr chart

profile card (large version)

shizuo heiwajima

» hatesviolence «

durarara!!

CODE

» knightofchanges «

ace

heart no kuni no alice

CODE

single muse

raven

» rainofheaven «

tales of vesperia

CODE

» soulsymmetrical «

death the kid

soul eater

CODE

multiple muses

ACTIVE

definitely way more than sixteen letters

» aboutnineteenletters «

canon

more than sixteen letters

» maxwillrequiresmallerfont «

canon

sixteen letters

» journalname «

canon

showing

» journalname «

canon

same sized cards

» journalname «

canon

in a row

» journalname «

canon

CODE (name on top with header)

<raw-code><div style="margin: 50px auto; width: 800px; display: flex; flex-wrap: wrap; flex-direction: row; justify-content: flex-start; gap: 30px 55px; font-family: georgia, serif; font-size: 12pt;">

<div style="margin: auto; margin-bottom: 20px; width: 650px; color: #423e31; font-size: 18pt; text-shadow: 2px 2px 4px #999; text-transform: uppercase; text-align: center; background-color: #fff; border-radius: 25px; box-shadow: #c2baa0 1px 1px 10px 4px; padding: 5px;">HEADER</div>

<div style="width: 230px; align: center;"><div style="vertical-align:top; height:90px; width:90px; padding:0; margin: auto;"><img src="USERPIC" style="width: 90px; border: 4px solid #fff; border-radius:100%; box-shadow: #c2baa0 1px 1px 10px 3px;"></div>
<div style="min-height: 135px; background-color: #fff; border-radius: 25px; margin-top:-30px; box-shadow: #c2baa0 1px 1px 10px 4px; text-align: center; padding: 15px">
<span style="margin-top: 40px; color:#423e31; font-family:georgia; font-size:14pt; text-shadow: 2px 2px 4px #999; display: block; line-height:0.9em; text-transform: uppercase;">CHARACTER</span><hr style="margin: 10px 0 10px 0;">
<span style="font-family:georgia; font-size:12pt; color:#5b5748;">» <i>journalname</i> «</span><hr style="margin: 10px 0 10px 0;">
<span style="font-family:georgia; font-size:11pt; color:#5b5748;">canon</span>
</div></div>

<div style="margin: 20px auto; width: 100%; text-align: center;"><font style="font-family: trebuchet ms, sans-serif; font-size: 9pt;"><a href="https://efryndiel.dreamwidth.org/6377.html" style="color: #804024; text-decoration: none;">code</a> by <a href="https://efryndiel.dreamwidth.org" style="color: #804024; text-decoration: none;">efrynidel</a></div>
</div></raw-code>

» journalname «

sixteen letters

canon

» aboutnineteenletters «

more than sixteen letters

canon

» maxwillrequiresmallerfont «

definitely way more than sixteen letters

canon

CODE (journal on top with header)

<div style="width: 230px; align: center;"><div style="vertical-align:top; height:90px; width:90px; padding:0; margin: auto;"><img src="USERPIC" style="width: 90px; border: 4px solid #fff; border-radius:100%; box-shadow: #c2baa0 1px 1px 10px 3px;"></div>
<div style="min-height: 135px; background-color: #fff; border-radius: 25px; margin-top:-30px; box-shadow: #c2baa0 1px 1px 10px 4px; text-align: center; padding: 15px;">
<span style="margin-top: 40px; color:#5b5748; font-family:georgia; font-size:12pt; display: block; line-height:0.8em;">» <i>journal</i> «</span><hr style="margin: 10px 0 12px 0;">
<span style="font-family:georgia; font-size:14pt; display: block; color:#423e31; text-shadow: 2px 2px 4px #999; line-height:0.9em; text-transform: uppercase;">CHARACTER</span><hr style="margin: 12px 0 5px 0;">
<span style="font-family:georgia; font-size:11pt; color:#5b5748;">canon</span>
</div></div>

instructions

❖ Designed for muselists and profile cards, they can also be used for minimal cr charts and quick permission lists. Anything can be added after the initial three fields so it's pretty versatile. Feel free to modify c:
❖ Colors:

background: #fff
borders: #fff
shadow: #c2baa0
character text: #999
journal+canon text: #5b5748

❖ UPDATED! The multiple cards no longer uses table code and is now a flex div, meaning you can just keep adding new cards without having to add rows or anything. Much easier to update compared to its original version.
❖ Credit either

laenavesse or

efryndiel

Flat | Top-Level Comments Only

Sorry for the late reply! I've been off the internet for a bit there. After taking a look, it's definitely due to DW stripping a lot of code that you can use in entries but not in comments. I believe they did this to prevent spam (and I think there were already a lot of CSS html limitations in comments even before that). I think in this case it's the "align" and "margin" elements. But disclaimer, I also never really tried to code for comments, so there may be a better solution that I do not know about.

In the meantime, although it still won't look exactly the same, there is a quick fix to at least make everything, including the userpics, centered even if they'll still be above the box instead of on top. Just a slight modification using "center" tags instead of relying on the other stuff. So taking your code for one character as example:

And then if you didn't want the space at the top, you just have to bring the first "span" tag up so it's not on a new line. Code would look like this:

Again it's not a full fix, but it at least makes it nicer looking with things centered.

I hope that works for you!

Edited 2017-04-07 20:45 (UTC)

I'm just as late, it would seem, haha. Apologies!

Anyway, I tried it out and it works. Thanks for the fix!

[ code ] muselist / cr chart

no subject

no subject