[43] Simple Permissions

[lina_trinch]

OOC Permissions

Title - Content

IC Permissions

Title - Content

Powers/Abilities

Something - Description of that something.

code

Code:
<div style="background: center/cover url(IMAGE_URL); width: 500px; margin: auto; border: 15px solid #fff; padding: 300px 15px 15px; display: flex; flex-direction: column; justify-content: flex-end; box-shadow: inset 0 0 5px rgba(0,0,0,0.5);"> <div style="font-family: Arial, Helvetica, sans-serif; color: #555; font-size: 13px;"> <!--BLOCK--> <details style="background: #fff; box-shadow: 0 0 5px rgba(0,0,0,0.5); border-radius: 15px; overflow: hidden; padding: 20px; margin-top: 15px;"> <summary style="cursor: pointer; font-style: italic; font-weight: bold; font-size: 15px;"> OOC Permissions </summary> <!--SECTION--> <div style="display: block; border-top: 1px solid #888; margin-top: 15px; padding-top: 15px;"> <span style="font-weight: bold; font-style: italic;">Title -</span> Content </div> <!--END SECTION--> <!--ADD MORE SECTIONS ABOVE THIS LINE--> </details> <!--END BLOCK--> <!--BLOCK--> <details style="background: #fff; box-shadow: 0 0 5px rgba(0,0,0,0.5); border-radius: 15px; overflow: hidden; padding: 20px; margin-top: 15px;"> <summary style="cursor: pointer; font-style: italic; font-weight: bold; font-size: 15px;"> IC Permissions </summary> <!--SECTION WITH IMAGE--> <div style="display: block; border-top: 1px solid #888; margin-top: 15px; padding-top: 15px;"> <!--IMAGE--> <div style="background: center/cover url(SMALL_IMAGE_URL); height: 200px; width: 150px; border: 5px solid #fff; box-shadow: inset 0 0 5px rgba(0,0,0,0.8), 0 0 5px rgba(0,0,0,0.8); margin-left: 8px; border-radius: 10px; float: right;"></div> <!--END IMAGE--> <span style="font-weight: bold; font-style: italic;">Title -</span> Content </div> <!--END SECTION--> <!--ADD MORE SECTIONS ABOVE THIS LINE--> </details> <!--END BLOCK--> <!--BLOCK--> <details style="background: #fff; box-shadow: 0 0 5px rgba(0,0,0,0.5); border-radius: 15px; overflow: hidden; padding: 20px; margin-top: 15px;"> <summary style="cursor: pointer; font-style: italic; font-weight: bold; font-size: 15px;"> Powers/Abilities </summary> <!--SECTION--> <div style="display: block; border-top: 1px solid #888; margin-top: 15px; padding-top: 15px;"> <span style="font-weight: bold; font-style: italic;">Something -</span> Description of that something. </div> <!--END SECTION--> <!--ADD MORE SECTIONS ABOVE THIS LINE--> </details> <!--END BLOCK--> <!--ADD MORE BLOCKS ABOVE THIS LINE--> </div> </div> <!--CREDIT--> <div style="width: 580px; text-align: right; margin: auto; font-variant: small-caps; font-family: Arial, Helvetica, sans-serif; font-size: 10px; letter-spacing: 2px; font-weight: bold;"> <a href="https://killthecake.dreamwidth.org/" style="text-decoration: none; color: #555;">code</a> </div>

❖ This is another early release from the Patreon. Thanks, everyone! ❖ Make sure Disable Auto-Formatting is checked when you copy/paste the code into your post. ❖ Another straightforward one. Everything's labelled into blocks/sections with some indicators of where you can add more blocks/sections. The more you add, the taller your main box becomes, so it won't cover up your background image. The three blocks you see in the preview are included by default. Ctrl+F & Replace: ❖ IMAGE_URL - background image ❖ SMALL_IMAGE_URL - image inside the sections ❖ Title/Content - placeholder text #fff borders, block backgrounds #555 text, credit link #888 section dividers rgba(0,0,0,0.5) shadows

Comments

[muccamukk]

I just wanted to say how much I appreciate the code for this. A couple of us have adapted it into a monthly media tracker, and it's SO PRETTY.

[lina_trinch]

Oh that's really cool! Thank you! I'm really happy you like it and found different uses for it. ♥