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
zuthal/zuzu - 27 - π©πͺ
queer weird mlem honse
male but low energy
audhd
π a lot of horny posting with lots of kinks π
politically vaguely bottom leftist
believes in the separation between fiction and reality
big huge nerd for space, biotech, stem and scifi stuff in general
player of nerdy games
also hunter of monsters
switch friend code SW-7844-0530-4225
Pretendo Network Friend Code 2545-4843-1202
discord zuthal
please ask me questions, both nerdy and horny welcome
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
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!