Zero: hey, vurrsys here! we edited that code that's been going around to be themed around PMD:E! feel free to tinker around with it as needed, code in comments
MARIKEN: You've got to help me. I am trapped in DRACULA'S CASTLE.

avatar by @citriccenobite
you can say "chimoora" instead of "cow of tailed snake" if you want. its a good pun.
i ramble about aerospace sometimes
I take rocket photos and you can see them @aWildLupi
I have a terminal case of bovine pungiform encephalopathy, the bovine puns are cowmpulsory
they/them/moo where "moo" stands in for "you" or where it's funny, like "how are moo today, Lupi?" or "dancing with mooself"
Zero: hey, vurrsys here! we edited that code that's been going around to be themed around PMD:E! feel free to tinker around with it as needed, code in comments
MARIKEN: You've got to help me. I am trapped in DRACULA'S CASTLE.
use prechoster with a new style inlining template: https://cloudwithlightning.net/random/chostin/prechoster/
under html:
<div id="container">
<div class="textbox neutral icon"><p></p></div>
<div class="textbox neutral text">
<p><span class="name">NAME:</span> text </p>
</div>
</div>
<div class="credit"><a href="https://cohost.org/werewolfbarista/post/4598597-img-style-position">original</a>, <a href="https://cohost.org/vurren/post/4757010-div-id-container">edits</a> by @vurren, sprites by <a href="https://sprites.pmdcollab.org/">pmd sprite repository</a></div>
under css:
/*original code written by @nekobarista and @nekoraita! from here -> https://cohost.org/werewolfbarista/post/4598597-img-style-position
code modified for pmd usage by @vurren*/
* {
padding: 0;
margin: 0;
}
#container {
display:flex;
flex-direction: column;
position: relative;
}
.textbox {
padding: 15px;
margin: 7px 0px;
background-color: #202020;
border-radius: 5px;
box-sizing: content-box;
}
.neutral {
border: solid #6BD16D;
border-style: ridge;
}
.male {
border: solid #67A5F0;
border-style: ridge;
}
.female {
border: solid #FD60B7;
border-style: ridge;
}
.text {
border-width: 5px 7px;
min-height: 60px;
}
.icon {
width: 30px;
height: 30px;
border-width: 5px;
background-repeat: no-repeat;
background-size: cover;
background-image: url(https://raw.githubusercontent.com/PMDCollab/SpriteCollab/master/portrait/0778/Normal.png); /*put your icon from https://sprites.pmdcollab.org/#/ here!*/
}
p{
text-align: justify;
font-size: 1.25rem; /*Use rem as font-size unit for accessibility!!! 1rem = ~16px*/
line-height: 1.25rem; /*Alter this value to make text more or less vertically compact*/
font-family: "VT323", monospace;
color: #fff
}
p {
font-family: "VT323", monospace;
text-shadow: 2px 1px 0px black;
}
.name {
color: #54D1CA;
}
.credit {
font-size: .7rem;
text-align: right;
}
Had too much fun making an interactable post for this one.
Thank you for sharing OP!!!
no problem!! I was trying to wrap my head around making it interactable but was too tired to try, I hope you don't mind if I take inspiration and do the same for future posts!
100000% Brackle's tutorial was a huge help. Being able to write the css and html separately really cleans up the code a bunch. I'll copy my example code into the comments below my post too for people to use. 👍
:O o I never checked back again,
I made a Google Sheet that generates the code for you!