𝚂𝚢𝚗𝚏𝚕𝚞𝚡 𝙼𝚘𝚍𝚜

 ▷ PERMISSIONS & INBOX CODES.



 ▶ PERMISSIONS.

Please keep in mind, this is just an example code. The three boxes on the bottom (yes, no, and maybes) are completely separate and aren't required information— we just wanted those boxes just in case someone was interested in expanding on the scope of their permissions page. The only information that is required for the game is the typical IC and OOC permissions portion of this code. You're also free to use the boxes to add any other pertinent information if the above spaces aren't enough for you. 

We have an example of what this code will look like here. 

<lj-raw><div style="max-width:700px;width:100%;margin:20px auto 40px;display:flex;flex-wrap:wrap;justify-content:space-around;align-items:start;gap:55px 30px;font-size: clamp(12px, 2vw, 17px);line-height:1.5;font-family:arial, helvetica, sans serif;color:#fff;">
<!-- ITEMS BELOW THIS POINT -->


<!-- #1: HORIZONTAL SPLIT CONTENT BOX! -->
<div style="max-width:325px;width:100%;height:300px;display:flex;flex-wrap:wrap;justify-content:center;align-items:start;gap:30px;">

<!-- WIDE SHORT IMAGE -->
<div style="max-width:325px;width:100%;height:150px;display:flex;flex-wrap:wrap;justify-content:center;align-items:start;align-content:start;gap:0;border:5px solid #00686E;border-radius:2px;box-shadow: rgba(37, 192, 192, 0.4) 5px 5px, rgba(37, 192, 192, 0.3) 10px 10px, rgba(37, 192, 192, 0.2) 15px 15px;background:#878787 url('IMG_URL')center;background-size:cover;"></div>

<!-- WIDE SHORT IMAGE END -->

<!-- TINY INFOBOX -->
<div style="max-width:325px;width:100%;height:132px;padding-bottom:3px;display:flex;flex-wrap:wrap;justify-content:center;align-items:start;align-content:start;gap:0;border:5px solid #00686E;border-radius:2px;box-shadow: rgba(37, 192, 192, 0.4) 5px 5px, rgba(37, 192, 192, 0.3) 10px 10px, rgba(37, 192, 192, 0.2) 15px 15px;background:#878787;">

<!-- MENU BAR -->
<div style="width:100%;height:30px;padding-bottom:5px;display:flex;flex-wrap:nowrap;justify-content:start;align-items:center;gap:5px;font-family:courier new, monospace;background:#00686E;color:#00686E;">

<div style="font-size:20px;color:#fff;">▶</div>
<div style="text-transform:uppercase;color:#fff;">PLAYER INFO</div>

<div style="flex-grow:1;"></div>
<div style="width:20px;height:20px;display:flex;justify-content:center;align-items:center;text-align:center;font-family:arial, helvetica, sans serif;font-weight:bold;border-radius:2px;background:#fff;">✖</div>
<div style="width:20px;height:20px;display:flex;justify-content:center;align-items:center;text-align:center;font-family:arial, helvetica, sans serif;font-weight:bold;border-radius:2px;background:#fff;"><div style="width:10px;height:10px;border:2px solid #00686E;border-radius:2px;"></div></div>
<div style="width:20px;height:20px;display:flex;justify-content:center;align-items:center;text-align:center;font-family:arial, helvetica, sans serif;font-weight:bold;border-radius:2px;background:#fff;"><div style="width:10px;height:10px;border-bottom:2px solid #00686E;border-radius:2px;"></div></div>
</div>
<!-- MENU BAR END-->

<!-- TINY TEXT -->
<div style="width:100%;align-self:stretch;max-height:90px;padding:8px 10px 2px;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;align-content:center;gap:3px 5px;font-size:12px;overflow:auto;scrollbar-width: thin;scrollbar-color:#fff #878787;">

<fieldset style="width:45%;display:inline-block;padding:0 2px 2px 5px;margin:0;border-collapse:collapse;margin:0;background:#00686E;background-clip:padding-box;border:1px solid #00686E;">
<legend style="padding:0;margin:0 5px -3px;font-variant:small-caps;font-size:11px;letter-spacing:1.2px;font-weight:bold;color:#000000">NAME</legend>
!!answer!!
</fieldset>

<fieldset style="width:45%;display:inline-block;padding:0 2px 2px 5px;margin:0;border-collapse:collapse;margin:0;background:#00686E;background-clip:padding-box;border:1px solid #00686E;">
<legend style="padding:0;margin:0 5px -3px;font-variant:small-caps;font-size:11px;letter-spacing:1.2px;font-weight:bold;color:#000000">PRONOUNS</legend>
!!answer!!
</fieldset>

<fieldset style="width:45%;display:inline-block;padding:0 2px 2px 5px;margin:0;border-collapse:collapse;margin:0;background:#00686E;background-clip:padding-box;border:1px solid #00686E;">
<legend style="padding:0;margin:0 5px -3px;font-variant:small-caps;font-size:11px;letter-spacing:1.2px;font-weight:bold;color:#000000">TIMEZONE</legend>
!!answer!!
</fieldset>

<fieldset style="width:45%;display:inline-block;padding:0 2px 2px 5px;margin:0;border-collapse:collapse;margin:0;background:#00686E;background-clip:padding-box;border:1px solid #00686E;">
<legend style="padding:0;margin:0 5px -3px;font-variant:small-caps;font-size:11px;letter-spacing:1.2px;font-weight:bold;color:#000000">CONTACT</legend>
!!answer!!
</fieldset>

</div>
<!-- TINY TEXT END -->

</div>
<!-- TINY INFO BOX END -->

</div>
<!-- #1: HORIZONTAL SPLIT CONTENT BOXES END! -->

<!-- #2: BASIC CONTENT BOX! -->
<div style="max-width:325px;width:100%;height:313px;padding-bottom:8px;display:flex;flex-wrap:wrap;justify-content:center;align-items:start;align-content:start;gap:0;border:5px solid #00686E;border-radius:2px;box-shadow: rgba(37, 192, 192, 0.4) 5px 5px, rgba(37, 192, 192, 0.3) 10px 10px, rgba(37, 192, 192, 0.2) 15px 15px;background:#878787;">

<!-- MENU BAR -->
<div style="width:100%;height:30px;padding-bottom:3px;display:flex;flex-wrap:nowrap;justify-content:start;align-items:center;gap:5px;font-family:courier new, monospace;background:#00686E;color:#00686E;">

<div style="font-size:20px;color:#fff;">▶</div>
<div style="text-transform:uppercase;color:#fff;">PERMISSIONS</div>

<div style="flex-grow:1;"></div>

<div style="width:20px;height:20px;display:flex;justify-content:center;align-items:center;text-align:center;font-family:arial, helvetica, sans serif;font-weight:bold;border-radius:2px;background:#fff;">✖</div>
<div style="width:20px;height:20px;display:flex;justify-content:center;align-items:center;text-align:center;font-family:arial, helvetica, sans serif;font-weight:bold;border-radius:2px;background:#fff;"><div style="width:10px;height:10px;border:2px solid #00686E;border-radius:2px;"></div></div>
<div style="width:20px;height:20px;display:flex;justify-content:center;align-items:center;text-align:center;font-family:arial, helvetica, sans serif;font-weight:bold;border-radius:2px;background:#fff;"><div style="width:10px;height:10px;border-bottom:2px solid #00686E;border-radius:2px;"></div></div>

</div>
<!-- MENU BAR -->

<!-- BODY -->
<div style="width:100%;align-self:stretch;max-height:273px;padding:5px 10px 10px;font-size:12px;text-align:left;overflow:auto;scrollbar-width:thin;scrollbar-color:#fff #878787;">

</lj-raw>
<div style="width:100%;margin:-15px auto;padding:1px;line-height:.9;text-align:right;font-weight:bold;border-bottom:1px solid #00686E;color:#000000">IC PERMISSIONS</div>

<b>BACKTAGGING:</b> !!!ANSWER!!!</br>
<b>FOURTHWALLING POLICY:</b> !!!ANSWER!!!</br>
<b>ACTION VS. PROSE:</b> !!!ANSWER!!!</br>
<b>OFFENSIVE SUBJECTS & TRIGGERS:</b> !!!ANSWER!!!</br>


<div style="width:100%;margin:-15px auto;padding:1px;line-height:.9;text-align:right;font-weight:bold;border-bottom:1px solid #00686E;color:#000000">OOC PERMISSIONS</div>

<b>PHYSICAL VIOLENCE:</b> !!!ANSWER!!!</br>
<b>MENTAL INFORMATION:</b> !!!ANSWER!!!</br>
<b>PHYSICAL AFFECTION:</b> !!!ANSWER!!!</br>
<b>IC TRIGGERS:</b> !!!ANSWER!!!</br>
<b>RELATIONSHIPS:</b> !!!ANSWER!!!</br>
<b>OTHER:</b> !!!ANSWER!!!</br>
<lj-raw>
</div>
<!-- BODY -->
</div>
<!-- #2: BASIC CONTENT BOX END! -->

<!-- #5: THREE ACROSS! -->
<!-- box 1 -->
<div style="min-width:160px;max-width:28.5%;height:313px;padding-bottom:8px;display:flex;flex-wrap:wrap;justify-content:center;align-items:start;align-content:start;gap:0;border:5px solid #00686E;border-radius:2px;box-shadow: rgba(37, 192, 192, 0.4) 5px 5px, rgba(37, 192, 192, 0.3) 10px 10px, rgba(37, 192, 192, 0.2) 15px 15px;background:#878787;">

<!-- MENU BAR -->
<div style="width:100%;height:30px;padding-bottom:5px;display:flex;flex-wrap:nowrap;justify-content:start;align-items:center;gap:5px;font-family:courier new, monospace;background:#00686E;color:#00686E;">

<div style="font-size:20px;color:#fff;">▶</div>
<div style="text-transform:uppercase;color:#fff;">yes</div>

<div style="flex-grow:1;"></div>

<div style="width:20px;height:20px;display:flex;justify-content:center;align-items:center;text-align:center;font-family:arial, helvetica, sans serif;font-weight:bold;border-radius:2px;background:#fff;">✖</div>
<div style="width:20px;height:20px;display:flex;justify-content:center;align-items:center;text-align:center;font-family:arial, helvetica, sans serif;font-weight:bold;border-radius:2px;background:#fff;"><div style="width:10px;height:10px;border:2px solid #00686E;border-radius:2px;"></div></div>
<div style="width:20px;height:20px;display:flex;justify-content:center;align-items:center;text-align:center;font-family:arial, helvetica, sans serif;font-weight:bold;border-radius:2px;background:#fff;"><div style="width:10px;height:10px;border-bottom:2px solid #00686E;border-radius:2px;"></div></div>

</div>
<!-- MENU BAR END -->

<!-- BOX 1 TEXT -->
<div style="width:100%;align-self:stretch;height:273px;padding:5px 10px 10px;font-size:12px;text-align:left;overflow:auto;scrollbar-width:thin;scrollbar-color:#fff #878787;">

</lj-raw>!! your content here !!<lj-raw>
</div>
<!-- BOX 1 TEXT END -->
</div>
<!-- box 1 end -->

<!-- box 2 -->
<div style="min-width:160px;max-width:28.5%;height:313px;padding-bottom:8px;display:flex;flex-wrap:wrap;justify-content:center;align-items:start;align-content:start;gap:0;border:5px solid #00686E;border-radius:2px;box-shadow: rgba(37, 192, 192, 0.4) 5px 5px, rgba(37, 192, 192, 0.3) 10px 10px, rgba(37, 192, 192, 0.2) 15px 15px;background:#878787;">

<!-- MENU BAR -->
<div style="width:100%;height:30px;padding-bottom:5px;display:flex;flex-wrap:nowrap;justify-content:start;align-items:center;gap:5px;font-family:courier new, monospace;background:#00686E;color:#00686E;">

<div style="font-size:20px;color:#fff;">▶</div>
<div style="text-transform:uppercase;color:#fff;">maybe</div>

<div style="flex-grow:1;"></div>

<div style="width:20px;height:20px;display:flex;justify-content:center;align-items:center;text-align:center;font-family:arial, helvetica, sans serif;font-weight:bold;border-radius:2px;background:#fff;">✖</div>
<div style="width:20px;height:20px;display:flex;justify-content:center;align-items:center;text-align:center;font-family:arial, helvetica, sans serif;font-weight:bold;border-radius:2px;background:#fff;"><div style="width:10px;height:10px;border:2px solid #00686E;border-radius:2px;"></div></div>
<div style="width:20px;height:20px;display:flex;justify-content:center;align-items:center;text-align:center;font-family:arial, helvetica, sans serif;font-weight:bold;border-radius:2px;background:#fff;"><div style="width:10px;height:10px;border-bottom:2px solid #00686E;border-radius:2px;"></div></div>

</div>
<!-- MENU BAR -->

<!-- BOX 2 TEXT -->
<div style="width:100%;align-self:stretch;height:273px;padding:5px 10px 10px;font-size:12px;text-align:left;overflow:auto;scrollbar-width:thin;scrollbar-color:#fff #878787;">

</lj-raw>!! your content here !!<lj-raw>
</div>
<!-- BOX 2 TEXT END -->
</div>
<!-- box 2 end --> 

<!-- box 3 -->
<div style="min-width:160px;max-width:28.5%;height:313px;padding-bottom:8px;display:flex;flex-wrap:wrap;justify-content:center;align-items:start;align-content:start;gap:0;border:5px solid #00686E;border-radius:2px;box-shadow: rgba(37, 192, 192, 0.4) 5px 5px, rgba(37, 192, 192, 0.3) 10px 10px, rgba(37, 192, 192, 0.2) 15px 15px;background:#878787;">

<!-- MENU BAR -->
<div style="width:100%;height:30px;padding-bottom:3px;display:flex;flex-wrap:nowrap;justify-content:start;align-items:center;gap:5px;font-family:courier new, monospace;background:#00686E;color:#00686E;">

<div style="font-size:20px;color:#fff;">▶</div>
<div style="text-transform:uppercase;color:#fff;">no</div>

<div style="flex-grow:1;"></div>

<div style="width:20px;height:20px;display:flex;justify-content:center;align-items:center;text-align:center;font-family:arial, helvetica, sans serif;font-weight:bold;border-radius:2px;background:#fff;">✖</div>
<div style="width:20px;height:20px;display:flex;justify-content:center;align-items:center;text-align:center;font-family:arial, helvetica, sans serif;font-weight:bold;border-radius:2px;background:#fff;"><div style="width:10px;height:10px;border:2px solid #00686E;border-radius:2px;"></div></div>
<div style="width:20px;height:20px;display:flex;justify-content:center;align-items:center;text-align:center;font-family:arial, helvetica, sans serif;font-weight:bold;border-radius:2px;background:#fff;"><div style="width:10px;height:10px;border-bottom:2px solid #00686E;border-radius:2px;"></div></div>

</div>
<!-- MENU BAR -->

<!-- BOX 3 TEXT -->
<div style="width:100%;align-self:stretch;height:273px;padding:5px 10px 10px;font-size:12px;text-align:left;overflow:auto;scrollbar-width:thin;scrollbar-color:#fff #878787;">

</lj-raw>!! your content here!!<lj-raw>
</div>
<!-- BOX 3 TEXT END -->
</div>
<!-- box 3 end -->

<!-- #3: THREE ACROSS END! -->

<!-- ITEMS ABOVE THIS POINT -->
</div><!-- CREDIT -->
<div style="max-width:700px;width:100%;margin:0 auto;text-align:right;font-size:10px;"><a title="code credit!" href="http://10billionghosts.dreamwidth.org" style="text-decoration:none;color:#ddd;">❤</a></div>
<!-- CREDIT --></lj-raw>
 ▶ INBOX.

Once again, this is completely optional, but feel free to personalize it as much as you'd like. The link for an example of our inbox code can be found here.

<lj-raw><center><font face="courier"><b>ACTION ✗ TEXT ✗ VIDEO ✗ AUDIO ✗ HOLOGRAM ✗ DATAVERSE</font></b></center><div style="max-width:500px;width:100%;margin:20px auto 40px;display:flex;flex-wrap:wrap;justify-content:space-around;align-items:start;gap:30px 30px;font-size: clamp(12px, 2vw, 17px);line-height:1.5;font-family:arial, helvetica, sans serif;color:#fff;">
<!-- ITEMS BELOW THIS POINT -->

<!-- WIDE SHORT IMAGE -->
<div style="max-width:625px;width:100%;height:275px;display:flex;flex-wrap:wrap;justify-content:center;align-items:start;align-content:start;gap:0;border:5px solid #00686E;border-radius:2px;box-shadow: rgba(37, 192, 192, 0.4) 5px 5px, rgba(37, 192, 192, 0.3) 10px 10px, rgba(37, 192, 192, 0.2) 15px 15px;background:#878787 url('IMAGE_URL_HERE')center 0px;background-size:cover;"></div>
<!-- WIDE SHORT IMAGE END -->

<!-- #2: BASIC CONTENT BOX! -->
<div style="max-width:625px;width:100%;height:132px;padding-bottom:3px;display:flex;flex-wrap:wrap;justify-content:center;align-items:start;align-content:start;gap:0;border:5px solid #00686E;border-radius:2px;box-shadow: rgba(37, 192, 192, 0.4) 5px 5px, rgba(37, 192, 192, 0.3) 10px 10px, rgba(37, 192, 192, 0.2) 15px 15px;background:#878787;">

<!-- MENU BAR -->
<div style="width:100%;height:30px;padding-bottom:3px;display:flex;flex-wrap:nowrap;justify-content:start;align-items:center;gap:5px;font-family:courier new, monospace;background:#00686E;color:#00686E;">

<div style="font-size:20px;color:#fff;">@</div>
<div style="text-transform:uppercase;color:#fff;">CHARACTER CODENAME</div>

<div style="flex-grow:1;"></div>

<div style="width:20px;height:20px;display:flex;justify-content:center;align-items:center;text-align:center;font-family:arial, helvetica, sans serif;font-weight:bold;border-radius:2px;background:#fff;">✖</div>
<div style="width:20px;height:20px;display:flex;justify-content:center;align-items:center;text-align:center;font-family:arial, helvetica, sans serif;font-weight:bold;border-radius:2px;background:#fff;"><div style="width:10px;height:10px;border:2px solid #00686E;border-radius:2px;"></div></div>
<div style="width:20px;height:20px;display:flex;justify-content:center;align-items:center;text-align:center;font-family:arial, helvetica, sans serif;font-weight:bold;border-radius:2px;background:#fff;"><div style="width:10px;height:10px;border-bottom:2px solid #00686E;border-radius:2px;"></div></div>
</div>
<!-- MENU BAR END -->

<!-- TINY TEXT -->
<div style="width:100%;align-self:stretch;max-height:90px;padding:8px 10px 2px;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;align-content:center;gap:3px 5px;font-size:12px;overflow:auto;scrollbar-width: thin;scrollbar-color:#fff #878787;">

<fieldset style="width:45%;display:inline-block;padding:0 2px 2px 5px;margin:0;border-collapse:collapse;margin:0;background:#00686E;background-clip:padding-box;border:1px solid #00686E;">
<legend style="padding:0;margin:0 5px -3px;font-variant:small-caps;font-size:11px;letter-spacing:1.2px;font-weight:bold;color:#fff">CHARACTER NAME</legend>
!!answer!!
</fieldset>

<fieldset style="width:45%;display:inline-block;padding:0 2px 2px 5px;margin:0;border-collapse:collapse;margin:0;background:#00686E;background-clip:padding-box;border:1px solid #00686E;">
<legend style="padding:0;margin:0 5px -3px;font-variant:small-caps;font-size:11px;letter-spacing:1.2px;font-weight:bold;color:#fff">CIVILIAN NAME</legend>
!!answer!!
</fieldset>

<fieldset style="width:45%;display:inline-block;padding:0 2px 2px 5px;margin:0;border-collapse:collapse;margin:0;background:#00686E;background-clip:padding-box;border:1px solid #00686E;">
<legend style="padding:0;margin:0 5px -3px;font-variant:small-caps;font-size:11px;letter-spacing:1.2px;font-weight:bold;color:#fff">TEAM</legend>
!!answer!!
</fieldset>

<fieldset style="width:45%;display:inline-block;padding:0 2px 2px 5px;margin:0;border-collapse:collapse;margin:0;background:#00686E;background-clip:padding-box;border:1px solid #00686E;">
<legend style="padding:0;margin:0 5px -3px;font-variant:small-caps;font-size:11px;letter-spacing:1.2px;font-weight:bold;color:#fff">HOUSING NUMBER</legend>
!!answer!!
</fieldset>
</div>
<!-- TINY TEXT END -->

</div>
<!-- #2: BASIC CONTENT BOX END! -->


<!-- ITEMS ABOVE THIS POINT -->
</div><!-- CREDIT -->
<div style="max-width:700px;width:100%;margin:0 auto;text-align:right;font-size:10px;"><a title="code credit!" href="http://10billionghosts.dreamwidth.org" style="text-decoration:none;color:#ddd;">❤</a></div>
<!-- CREDIT --></lj-raw>
code
𝚂𝚢𝚗𝚏𝚕𝚞𝚡 𝙼𝚘𝚍𝚜

Navigation

FULL NAVIGATION

Layout By

Tags

January 28th, 2023

▶ PERMISSIONS & INBOX CODES.
