10billionghosts | code: alignment, a set of chart codes

A lightly styled "alignment chart" code. I wasn't sure if it was too niche or if it'd be a neat CDJ meme kinda code, but, hell, it was fun to put together.

This code comes in two different flavors. First, you've got a traditional D&D alignment chart, and second, you've got the "BOLD OF YOU... / HOW DARE YOU... / PLEASE..." meme formatting. Each one is customizable, so you can make the jokes you want to make! Live previews are at the bottom of this post.

HERE IS THE D&D ALIGNMENT CHART CODE:

<lj-raw><div style="max-width:700px;width:100%;margin:0 auto;padding:15px;line-height:1.5;font-family:arial, helvetica, sans serif;font-size:12px;display:flex;flex-wrap:wrap;justify-content:flex-start;align-items:flex-start;background:#fff;color:#000;">

<div style="max-width:700px;width:100%;display:flex;flex-wrap:nowrap;justify-content:center;align-items:center;gap:5px 15px;">

<div style="width:33%;">
<div title="name" style="padding-top:100%;background:#ccc url('IMG_URL')center;background-size:cover;"></div>
<div style="margin:-15px auto 0;text-align:center;font-weight:bold;font-size:clamp(21px, 4vw, 30px);line-height:.9;-webkit-text-stroke: 1px #000;color:#fff;">LAWFUL<br/>GOOD</div>

<div style="padding:5px 3px;margin:5px 0 0;display:flex;flex-wrap:nowrap;justify-content:center;align-items:center;text-align:center;font-size:clamp(8px, 1.5vw, 11px);font-style:italic;color:#000;background:#eee">"space for a quote from the character if that is your thing. yadda yadda yadda."</div>

</div>

<div style="width:33%;">
<div title="name" style="padding-top:100%;background:#ccc url('IMG_URL')center;background-size:cover;"></div>
<div style="margin:-15px auto 0;text-align:center;font-weight:bold;font-size:clamp(21px, 4vw, 30px);line-height:.9;-webkit-text-stroke: 1px #000;color:#fff;">NEUTRAL<br/>GOOD</div>

<div style="padding:5px 3px;margin:5px 0 0;display:flex;flex-wrap:nowrap;justify-content:center;align-items:center;text-align:center;font-size:clamp(8px, 1.5vw, 11px);font-style:italic;color:#000;background:#eee">"space for a quote from the character if that is your thing. yadda yadda yadda."</div>

</div>

<div style="width:33%;">
<div title="name" style="padding-top:100%;background:#ccc url('IMG_URL')center;background-size:cover;"></div>
<div style="margin:-15px auto 0;text-align:center;font-weight:bold;font-size:clamp(21px, 4vw, 30px);line-height:.9;-webkit-text-stroke: 1px #000;color:#fff;">CHAOTIC<br/>GOOD</div>

<div style="padding:5px 3px;margin:5px 0 0;display:flex;flex-wrap:nowrap;justify-content:center;align-items:center;text-align:center;font-size:clamp(8px, 1.5vw, 11px);font-style:italic;color:#000;background:#eee">"space for a quote from the character if that is your thing. yadda yadda yadda."</div>

</div>

</div>

<div style="max-width:700px;width:100%;margin: 15px auto;display:flex;flex-wrap:nowrap;justify-content:center;align-items:center;gap:5px 15px;">

<div style="width:33%;">
<div title="name" style="padding-top:100%;background:#ccc url('IMG_URL')center;background-size:cover;"></div>
<div style="margin:-15px auto 0;text-align:center;font-weight:bold;font-size:clamp(21px, 4vw, 30px);line-height:.9;-webkit-text-stroke: 1px #000;color:#fff;">LAWFUL<br/>NEUTRAL</div>

<div style="padding:5px 3px;margin:5px 0 0;display:flex;flex-wrap:nowrap;justify-content:center;align-items:center;text-align:center;font-size:clamp(8px, 1.5vw, 11px);font-style:italic;color:#000;background:#eee">"space for a quote from the character if that is your thing. yadda yadda yadda."</div>

</div>

<div style="width:33%;">
<div title="name" style="padding-top:100%;background:#ccc url('IMG_URL')center;background-size:cover;"></div>
<div style="margin:-15px auto 0;text-align:center;font-weight:bold;font-size:clamp(21px, 4vw, 30px);line-height:.9;-webkit-text-stroke: 1px #000;color:#fff;">TRUE<br/>NEUTRAL</div>

<div style="padding:5px 3px;margin:5px 0 0;display:flex;flex-wrap:nowrap;justify-content:center;align-items:center;text-align:center;font-size:clamp(8px, 1.5vw, 11px);font-style:italic;color:#000;background:#eee">"space for a quote from the character if that is your thing. yadda yadda yadda."</div>

</div>

<div style="width:33%;">
<div title="name" style="padding-top:100%;background:#ccc url('IMG_URL')center;background-size:cover;"></div>
<div style="margin:-15px auto 0;text-align:center;font-weight:bold;font-size:clamp(21px, 4vw, 30px);line-height:.9;-webkit-text-stroke: 1px #000;color:#fff;">CHAOTIC<br/>NEUTRAL</div>

<div style="padding:5px 3px;margin:5px 0 0;display:flex;flex-wrap:nowrap;justify-content:center;align-items:center;text-align:center;font-size:clamp(8px, 1.5vw, 11px);font-style:italic;color:#000;background:#eee">"space for a quote from the character if that is your thing. yadda yadda yadda."</div>

</div>

</div>

<div style="max-width:700px;width:100%;display:flex;flex-wrap:nowrap;justify-content:center;align-items:center;gap:5px 15px;">

<div style="width:33%;">
<div title="name" style="padding-top:100%;background:#ccc url('IMG_URL')center;background-size:cover;"></div>
<div style="margin:-15px auto 0;text-align:center;font-weight:bold;font-size:clamp(21px, 4vw, 30px);line-height:.9;-webkit-text-stroke: 1px #000;color:#fff;">LAWFUL<br/>EVIL</div>

<div style="padding:5px 3px;margin:5px 0 0;display:flex;flex-wrap:nowrap;justify-content:center;align-items:center;text-align:center;font-size:clamp(8px, 1.5vw, 11px);font-style:italic;color:#000;background:#eee">"space for a quote from the character if that is your thing. yadda yadda yadda."</div>

</div>

<div style="width:33%;">
<div title="name" style="padding-top:100%;background:#ccc url('IMG_URL')center;background-size:cover;"></div>
<div style="margin:-15px auto 0;text-align:center;font-weight:bold;font-size:clamp(21px, 4vw, 30px);line-height:.9;-webkit-text-stroke: 1px #000;color:#fff;">NEUTRAL<br/>EVIL</div>

<div style="padding:5px 3px;margin:5px 0 0;display:flex;flex-wrap:nowrap;justify-content:center;align-items:center;text-align:center;font-size:clamp(8px, 1.5vw, 11px);font-style:italic;color:#000;background:#eee">"space for a quote from the character if that is your thing. yadda yadda yadda."</div>

</div>

<div style="width:33%;">
<div title="name" style="padding-top:100%;background:#ccc url('IMG_URL')center;background-size:cover;"></div>
<div style="margin:-15px auto 0;text-align:center;font-weight:bold;font-size:clamp(21px, 4vw, 30px);line-height:.9;-webkit-text-stroke: 1px #000;color:#fff;">CHAOTIC<br/>EVIL</div>

<div style="padding:5px 3px;margin:5px 0 0;display:flex;flex-wrap:nowrap;justify-content:center;align-items:center;text-align:center;font-size:clamp(8px, 1.5vw, 11px);font-style:italic;color:#000;background:#eee">"space for a quote from the character if that is your thing. yadda yadda yadda."</div>

</div>

</div>

</div></lj-raw>

HERE IS THE "BOLD OF YOU..." CODE:

<div style="max-width:700px;width:100%;display:flex;flex-wrap:nowrap;justify-content:center;align-items:center;"><div style="width:13%;transform:rotate(-90deg);"> </div>

<div style="width:29%;text-align:center;line-height:.9;font-weight:bold;font-size:clamp(21px, 4vw, 25px);">

"BOLD OF YOU TO...

</div>

<div style="width:29%;text-align:center;line-height:.9;font-weight:bold;font-size:clamp(21px, 4vw, 25px);">

"HOW DARE YOU...

</div>

<div style="width:29%;text-align:center;line-height:.9;font-weight:bold;font-size:clamp(21px, 4vw, 25px);">

"PLEASE...

</div>

</div>

<div style="max-width:700px;width:100%;margin:10px auto;display:flex;flex-wrap:nowrap;justify-content:flex-start;align-items:center;">

<div style="width:13%;height:100px;font-size:clamp(9px, 2vw, 12px);font-weight:bold;text-align:center;line-height:.9;font-size:clamp(12px, 3vw, 22px);writing-mode: vertical-rl;transform: rotate(-180deg);display:flex;flex-wrap:nowrap;align-items:center;justify-content:center;">...ASSUME I HAVE DIGNITY."</div>

<div style="width:29%;">
<div title="name" style="padding-top:100%;background:#ccc url('IMG_URL')center;background-size:cover;margin:0px 5px;"></div></div>

</div>

<div style="max-width:700px;width:100%;margin:0px auto 10px;display:flex;flex-wrap:nowrap;justify-content:flex-start;align-items:center;">

<div style="width:13%;height:100px;font-size:clamp(9px, 2vw, 12px);font-weight:bold;text-align:center;line-height:.9;font-size:clamp(12px, 3vw, 22px);writing-mode: vertical-rl;transform: rotate(-180deg);display:flex;flex-wrap:nowrap;align-items:center;justify-content:center;">...ASSUME I'M STRAIGHT."</div>

<div style="width:29%;">
<div title="name" style="padding-top:100%;background:#ccc url('IMG_URL')center;background-size:cover;margin:0px 5px;"></div></div>

<div style="width:29%;">
<div title="name" style="padding-top:100%;background:#ccc url('IMG_URL')center;background-size:cover;margin:0px 5px;"></div></div>

<div style="width:29%;">
<div title="name" style="padding-top:100%;background:#ccc url('IMG_URL')center;background-size:cover;margin:0px 5px;"></div></div>

</div>

<div style="max-width:700px;width:100%;margin:0px auto 10px;display:flex;flex-wrap:nowrap;justify-content:flex-start;align-items:center;">

<div style="width:13%;height:100px;font-size:clamp(9px, 2vw, 12px);font-weight:bold;text-align:center;line-height:.9;font-size:clamp(11px, 3vw, 15px);writing-mode: vertical-rl;transform: rotate(-180deg);display:flex;flex-wrap:nowrap;align-items:center;justify-content:center;">...BELIEVE I'VE REACHED PEAK DUMBASS."</div>

<div style="width:29%;">
<div title="name" style="padding-top:100%;background:#ccc url('IMG_URL')center;background-size:cover;margin:0px 5px;"></div></div>

<div style="width:29%;">
<div title="name" style="padding-top:100%;background:#ccc url('IMG_URL')center;background-size:cover;margin:0px 5px;"></div></div>

<div style="width:29%;">
<div title="name" style="padding-top:100%;background:#ccc url('IMG_URL')center;background-size:cover;margin:0px 5px;"></div></div>

</div>

</div></lj-raw>

HOW TO USE:

❣️ Mind the lj-raw tags!

❣️ This code is mobile friendly and insanejournal friendly!

❣️ Replace IMG_URL with the url of an image, and it should scale appropriately! Please note that the image will align best if the focal point is in the center of the image.

❣️ Look for title="name" for each square. You can either change "name" to whatever text you'd like and it'll appear when you hover over the image with a mouse, or you can delete the entire 'title="name"' bit to remove the hover!

❣️ The traditional alignment chart code comes with a space for a bit of text. If you don't want that there, I've commented out the portion that needs to be deleted to remove it. Just remove that bit and the code will still work!

❣️ The "Bold Of You To..." code is also customizable. Want to increase or reduce the number of rows? You can delete full rows, or copy and paste a row in to add an additional row. At the very bottom of this post, I've added an example of how you can lightly customize the bold of you code.

❣️ You can customize all the text! There are a few different popular iterations of the "BOLD OF YOU TO..." meme you can sub in!

❣️ The option color:#000 at the top of the code controls the font color!

❣️ This code is pretty straightforward, otherwise? If you have any questions about it, please don't hesitate to ask!

As always, I do not require credit, but it is always appreciated, especially if you are editing my base code. I love to see what people have done with my code, so drop me a comment with a link if you've done up an event you're particularly proud of! If you're feeling generous, you can donate to my ko-fi!

This code is compatible with insanejournal.

LAWFUL
GOOD