[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

[plentyofwords]

One more quick question: here. Is it possible to make the canonmates etc into bubbles instead of boxes?

[lina_trinch]

Yep! In the code for those parts, just add border-radius: 50px; or so. The higher the number of pixels, the deeper the curve will be and vice versa. c:

[plentyofwords]

You Rock!!!! Thank you!

[lina_trinch]

No problem!! ♥♥