DIV | low light (updated)

[manual]

dana | gmt +8 | email

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

NOTES:
- intended for really minimal texts
- you can edit it to hold more text but you'll need to adjust both div heights
- because divs, be sure to close the tags properly; dw freaks out over divs

UPDATED VERSION 2022:
<center><raw-code><div style="width: 200px; min-height: 250px; border-radius: 20px; background: url(IMGURL);"> <div style="width: 200px; min-height: 250px; border-radius: 20px; background: rgba(0,0,0,0.2);"><img src="ICONURL" style="border-radius: 50%; position: relative; top: 50px;"> <div style="width: 200px; min-height: 50px; position: relative; top: 100px; background: rgba(0, 0, 0, 0.86); border-radius: 0 0 20px 20px; padding: 15px 10px 0 10px; font-family: 'Arial', sans-serif; font-size: 0.95em; color: #fff; font-weight: 400; text-align: center; line-height: 150%; letter-spacing: 0.5pt; padding-bottom: 15px;">SINGLE LINE TEXT</div></div></div></raw-code><br /></center>

how to adjust height:
search for min-height: 250px; and replace the numerical value in increments of 5px. both instances of min-height: (value); should match. (ex. lorem ipsum example is set to 330px.)

how to change colors:
search for rgba(value) and replace with a hexadecimal counterpart (#xxxxxx value) or a different rgba value. (color-hex is a good converter.)

quick note:
specially formatted journal pages are gonna make this boogie esp. ported layouts, it's best viewed on the site skin. still looking for a way to clear inherited css, sorry guys.

ALTERNATE VERSION:
<center><raw-code><div style="width: 300px; min-height: 200px; border-radius: 20px; background: url(BACKGROUNDURL); background-size: cover;"> <div style="border-radius: 20px; background: rgba(0,0,0,0.2);"><img src="ICONURL" style="border-radius: 50%; margin-top: 80px;"><br /> <div style="background: rgba(0, 0, 0, 0.86); border-radius: 0 0 20px 20px; padding: 15px 10px 0 10px; font-family: 'Times', serif; font-size: 0.95em; color: #fff; font-weight: 400; text-align: center; line-height: 150%; letter-spacing: 0.5pt; margin-top: 50px; padding-bottom: 15px;"><I>single line text.</i></div></div></div></raw-code><br /></center>

same deal as above, this one mostly works with the journal layout but it'll still need some tweaks. let me know if it continues to go bonkers pls 🥲

Comments

[isleofapples]

Hey, I just wanted to say thanks for this, I really like it. I modified it a wee bit to use it in my muselist.

[samebito]

thank you for this! using it for an ic inbox ♥

[teal]

Long shot here, but looking to put multiples of these on the same line. How would I go about doing this? If it's at all possible.