Permissions Post: “Licentia”

[terra]

This is a pretty simple permissions code using the details tag. It's styled as a permissions post, but could pretty easily be used as a muselist or character profile.

OOC Permissions

Backtagging /   Y/N.

Fourthwalling /   Y/N.

General /   Lorem ipsum dolor sit amet, consectetur adipiscing elit.

IC Permissions

Physical Affection /   Nam cursus ligula in arcu gravida, vitae scelerisque magna vulputate.

Violence /   Praesent sollicitudin odio in leo gravida ultrices. Nam sed dui pretium, elementum ipsum nec, elementum ex.

Psychics /   Quisque eget dolor luctus, imperdiet lectus eu, laoreet massa. Donec iaculis lacus quis felis ultricies venenatis.

Ship Preferences

Shipping (Y) |   Sed porta neque vel tellus pulvinar laoreet sit amet ac odio.

Shipping (N) /   Nam eleifend mi a massa hendrerit aliquet.

Other Stuff /   Nulla semper metus sit amet ipsum cursus, eget suscipit velit pharetra. Pellentesque nec ex a justo accumsan ullamcorper.

The Code

Here is the code for a single block, with the stuff you'd most want to change highlighted in red, as always. Just copy and paste as many blocks as you need. The sample code includes three blocks, but you can add more or less as you like.

<!--CODE HERE--> <raw-code><div style="background: #000 url(backgroundurl.png); background-size: cover; padding: 2em; width: 100%; max-width: 550px; margin: 2em auto 1em auto;"> <details style="background: #fff; color: #000; padding: 1em 2em;"> <summary><h4 style="display: inline-block; margin: .5em 0; border-bottom: 0; color: #000; font: 700 2.5em Adobe Garamond Pro, Garamond, Georgia, serif; ">OOC Permissions</h4></summary> <div style="font: 400 14px/2 Adobe Garamond Pro, Garamond, Georgia, serif; margin: 0 1em;"> <p><b style="font: 700 italic .9em Adobe Garamond Pro, Garamond, Georgia, serif; text-transform: uppercase; letter-spacing: .05em;">Backtagging /</b>   Y/N.</p> <p><b style="font: 700 italic .9em Adobe Garamond Pro, Garamond, Georgia, serif; text-transform: uppercase; letter-spacing: .05em;">Fourthwalling /</b>   Y/N.</p> <p><b style="font: 700 italic .9em Adobe Garamond Pro, Garamond, Georgia, serif; text-transform: uppercase; letter-spacing: .05em;">General /</b>   Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></div> </details> <details style="background: #fff; color: #000; padding: 1em 2em; margin: 1em 0;"> <summary><h4 style="display: inline-block; margin: .5em 0; border-bottom: 0; color: #000; font: 700 2.5em Adobe Garamond Pro, Garamond, Georgia, serif;">IC Permissions</h4></summary> <div style="font: 400 14px/2 Adobe Garamond Pro, Garamond, Georgia, serif; margin: 0 1em;"> <p><b style="font: 700 italic .9em Adobe Garamond Pro, Garamond, Georgia, serif; text-transform: uppercase; letter-spacing: .05em;">Physical Affection /</b>   Nam cursus ligula in arcu gravida, vitae scelerisque magna vulputate.</p> <p><b style="font: 700 italic .9em Adobe Garamond Pro, Garamond, Georgia, serif; text-transform: uppercase; letter-spacing: .05em;">Violence /</b>   Praesent sollicitudin odio in leo gravida ultrices. Nam sed dui pretium, elementum ipsum nec, elementum ex. </p> <p><b style="font: 700 italic .9em Adobe Garamond Pro, Garamond, Georgia, serif; text-transform: uppercase; letter-spacing: .05em;">Psychics /</b>   Quisque eget dolor luctus, imperdiet lectus eu, laoreet massa. Donec iaculis lacus quis felis ultricies venenatis.</p></div></details> <details style="background: #fff; color: #000; padding: 1em 2em;"> <summary><h4 style="display: inline-block; margin: .5em 0; border-bottom: 0; color: #000; font: 700 2.5em Adobe Garamond Pro, Garamond, Georgia, serif;">Ship Preferences</h4></summary> <div class="permissions"> <p><b style="font: 700 italic .9em Adobe Garamond Pro, Garamond, Georgia, serif; text-transform: uppercase; letter-spacing: .05em;">Shipping (<span style="color: green;">Y</span>) |</b>   Sed porta neque vel tellus pulvinar laoreet sit amet ac odio.</p> <p><b style="font: 700 italic .9em Adobe Garamond Pro, Garamond, Georgia, serif; text-transform: uppercase; letter-spacing: .05em;">Shipping (<span style="color: red;">N</span>) /</b>   Nam eleifend mi a massa hendrerit aliquet.</p> <p><b style="font: 700 italic .9em Adobe Garamond Pro, Garamond, Georgia, serif; text-transform: uppercase; letter-spacing: .05em;">Other Stuff /</b>   Nulla semper metus sit amet ipsum cursus, eget suscipit velit pharetra. Pellentesque nec ex a justo accumsan ullamcorper.</p> </div></details> </div></raw-code><!-- End Code-->

---

<div style="background: #000 url(backgroundurl.png); background-size: cover; padding: 2em; width: 100%; max-width: 550px; margin: 2em auto 1em auto;">

<details style="background: #fff; color: #000; padding: 1em 2em;">

<summary><h4 style="display: inline-block; margin: .5em 0; border-bottom: 0; color: #000; font: 700 2.5em Adobe Garamond Pro, Garamond, Georgia, serif; ">OOC Permissions</h4></summary>

<div style="font: 400 14px/2 Adobe Garamond Pro, Garamond, Georgia, serif; margin: 0 1em;">

<p><b style="font: 700 italic .9em Adobe Garamond Pro, Garamond, Georgia, serif; text-transform: uppercase; letter-spacing: .05em;">Backtagging /</b>   Y/N.</p>

<p><b style="font: 700 italic .9em Adobe Garamond Pro, Garamond, Georgia, serif; text-transform: uppercase; letter-spacing: .05em;">Fourthwalling /</b>   Y/N.</p>

<p><b style="font: 700 italic .9em Adobe Garamond Pro, Garamond, Georgia, serif; text-transform: uppercase; letter-spacing: .05em;">General /</b>   Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></div>
</details>
</div>

A variation

For a different #aesthetic, you can also give each block it's own background image, like so:

OOC Permissions

---

Backtagging /   Y/N.

Fourthwalling /   Y/N.

General /   Lorem ipsum dolor sit amet, consectetur adipiscing elit.

The code for this is below, it's pretty similar:

<!--CODE STARTS--><raw-code><details style="background: #000 url(backgroundurl.png); padding: 1em; color: #fff; max-width: 600px; margin: .5em auto; "> <summary style="padding: 1em;"><h4 style="display: inline-block; margin: 0; border-bottom: 0; color: #fff; font: 700 2.5em Adobe Garamond Pro, Garamond, Georgia, serif;">OOC Permissions</h4></summary> <hr style="border: 3px solid #fff; margin: 0 1em 1em 1em;"/> <div style="padding: 1em; background: #fff; color: #000; font: 400 14px/2 Adobe Garamond Pro, Garamond, Georgia, serif; margin: 0 1em;"> <p><b style="font: 700 italic .9em Adobe Garamond Pro, Garamond, Georgia, serif; text-transform: uppercase; letter-spacing: .05em;">Backtagging /</b>   Y/N.</p> <p><b style="font: 700 italic .9em Adobe Garamond Pro, Garamond, Georgia, serif; text-transform: uppercase; letter-spacing: .05em;">Fourthwalling /</b>   Y/N.</p> <p><b style="font: 700 italic .9em Adobe Garamond Pro, Garamond, Georgia, serif; text-transform: uppercase; letter-spacing: .05em;">General /</b>   Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></div> </details></raw-code> <!--END CODE-->