IC/OOC Code: All Boxed Up (Updated Feb. 2022 for Code Pushes & Mobile Compatibility)

[thisismanx]

this is the event title

introduction!

This code is designed to be used for a variety of in-character event situations and is very modular in terms of turning sections on and off, reorganizing them, or even adding new ones! I just wanted to practice some codes and things went totally overboard, but maybe someone will find this useful? It's designed to be aesthetically pleasing when viewed in both the Tropospherical site skin (DW's default) and the Celerity site skin (the IJ lookalike & what I personally use).

[02/11/22 Update: This code has been optimized for mobile viewing, DW code pushes through this date, as well as personal preference changes. I've also added an optional credit code to aide in locating this code for anyone who sees it in the wild. Many thanks to 10billionghosts and baisemain for helping me get this code up to date over the years!]

Some noteworthy color codes are: #808080 (title boxes) and #F5F5F5 (card borders and container background) and #CD5C5C (misc. accents). I left in a single pixel border on the cards for anyone who doesn't like the borderless appearance. Just change the color code for the border.

The title boxes include text-transform:lowercase; to force everything into lower case. Remove or adjust this as desired. I've also left border-radius:0px; in the various card codes so adding rounded corners is easily done if desired.

All images are set to a fixed size and coded so that they'll resize automatically to that set size regardless of the original image size and aspect ratio. This can be easily changed by adjusting the related height and width code anytime you see background:url(IMG)center; background-size:cover; in the code.

This code is designed to be posted with auto-formatting enabled. I've placed <lj-raw> tags around areas where custom text would be entered, so you can type freely without having to worry about coding in line breaks.

Curious how this looks in practice? A live preview using the text from an actual IC/OOC I worked on during gooseberryhigh is located here.

And finally, here's the code:

<lj-raw><center><fieldset style="background:#eee url(IMG) center;background-size:cover;height:250px;max-width:500px;border-radius:20px;border:0px;margin-bottom:20px;box-sizing:content-box;"></fieldset> <lj-cut text="IC/OOC NAME!"></center> <div style="width:680px;max-width:100%;margin:0 auto;font-family:helvetica,arial;background:#f5f5f5;padding:30px 0 15px 0;border-radius:20px;box-sizing:content-box;"> <fieldset style="width:clamp(100px,90%,610px);border:0px;margin:0 auto;padding:0;"><legend style="padding:5px 15px;margin:0 auto;color:#d9d9d9;font-size:clamp(30px,4vw,40px);line-height:1;font-weight:bold;text-align:center;text-transform:lowercase;text-shadow: -1px -1px 1px rgba(255,255,255,.1), 1px 1px 1px rgba(0,0,0,.5);">this is the event title</legend> <!-- SETTING --> <fieldset style="max-width:100%;background:#fff;border:1px solid #f5f5f5;border-radius:0px;text-align:left;margin:0 auto;font-size:13px;text-align:justify;line-height:1.5;padding:25px 25px;margin:20px 0px;"> <legend style="padding:5px 15px;background:#808080;color:#fff;font-size:20px;font-weight:bold;text-transform:lowercase;">what's up?</legend> </lj-raw>This is where the general IC flavor backdrop setting of the event goes. What is happening here? Where is it located??<lj-raw> </fieldset> <!-- SETTING END --> <!-- VISUALS --> <fieldset style="max-width:100%;background:#fff;border:1px solid #f5f5f5;border-radius:0px;text-align:left;margin:0 auto;font-size:13px;text-align:justify;line-height:1.5;padding:25px 25px;margin:20px 0px;"> <legend style="padding:5px 15px;background:#808080;color:#fff;font-size:20px;font-weight:bold;text-transform:lowercase;">visuals!</legend> <div style="display:flex;flex-wrap:wrap;align-items:center;justify-content:center;"> <div style="height:100px;width:100px;background:#eee url(IMG)center;background-size:cover;margin:5px;border-radius:10px;"></div> <div style="height:100px;width:100px;background:#eee url(IMG)center;background-size:cover;margin:5px;border-radius:10px;"></div> <div style="height:100px;width:100px;background:#eee url(IMG)center;background-size:cover;margin:5px;border-radius:10px;"></div> <div style="height:100px;width:100px;background:#eee url(IMG)center;background-size:cover;margin:5px;border-radius:10px;"></div> <div style="height:100px;width:100px;background:#eee url(IMG)center;background-size:cover;margin:5px;border-radius:10px;"></div> <div style="height:100px;width:160px;background:#eee url(IMG)center;background-size:cover;margin:5px;border-radius:10px;"></div> <div style="height:100px;width:210px;background:#eee url(IMG)center;background-size:cover;margin:5px;border-radius:10px;"></div> <div style="height:100px;width:150px;background:#eee url(IMG)center;background-size:cover;margin:5px;border-radius:10px;"></div> </div> </lj-raw> Any regular text goes here.<lj-raw> </fieldset> <!-- VISUALS END --> <!-- VOLUNTEER --> <fieldset style="max-width:100%;background:#fff;border:1px solid #f5f5f5;border-radius:0px;text-align:left;margin:0 auto;font-size:13px;text-align:justify;line-height:1.5;padding:25px 25px;margin:20px 0px;"> <legend style="padding:5px 15px;background:#808080;color:#fff;font-size:20px;font-weight:bold;text-transform:lowercase;">volunteer slots!</legend> </lj-raw><b>Volunteer A</b> does a thing! Wow! <b>Volunteer B</b> does a thing to <b>Volunteer C</b>! Any regular text goes here.<lj-raw> </fieldset> <!-- VOLUNTEER END --> <!-- PAIRINGS LIST --> <fieldset style="max-width:100%;background:#fff;border:1px solid #f5f5f5;border-radius:0px;text-align:left;margin:0 auto;font-size:13px;text-align:justify;line-height:1.5;padding:25px 25px;margin:20px 0px;"> <legend style="padding:5px 15px;background:#808080;color:#fff;font-size:20px;font-weight:bold;text-transform:lowercase;">pairings list!</legend> <div style="display:flex;flex-wrap:wrap;align-items:center;justify-content:center;text-align:center;"> <!-- MINIBOX 1 --> <div style="height:100px;width:100px;background:#eee;margin:5px;border-radius:10px;display:flex;align-items:center;justify-content:center;text-align:center;"> <ul style="margin:0px;padding:1px;"> <li style="list-style-type: none;margin:0px;"><b>Group 1</b></li> <li style="list-style-type: none;margin:0px;">Character</li> <li style="list-style-type: none;margin:0px;">Character</li> <li style="list-style-type: none;margin:0px;">Character</li> </ul> </div> <!-- MINIBOX 1 END --> <!-- MINIBOX 2 --> <div style="height:100px;width:150px;background:#eee;margin:5px;border-radius:10px;display:flex;align-items:center;justify-content:center;text-align:center;"> <ul style="margin:0px;padding:1px;"> <li style="list-style-type: none;margin:0px;"><b>Character Name</b></li> <li style="list-style-type: none;margin:0px;">STB #1: Character</li> <li style="list-style-type: none;margin:0px;">STB #2: Character</li> <li style="list-style-type: none;margin:0px;">7MIH: Character</li> </ul> </div> <!-- MINIBOX 2 END --> <!-- MINIBOX 3 --> <div style="height:100px;width:100px;background:#eee;margin:5px;border-radius:10px;display:flex;align-items:center;justify-content:center;text-align:center;"> <ul style="margin:0px;padding:1px;"> <li style="list-style-type: none;margin:0px;">Character A</li> <li style="list-style-type: none;margin:0px;">&</li> <li style="list-style-type: none;margin:0px;">Character B</li> </ul> </div> <!-- MINIBOX 3 END --> <!-- MINIBOX 4 --> <div style="height:100px;width:100px;background:#eee;margin:5px;border-radius:10px;display:flex;align-items:center;justify-content:center;text-align:center;"> <ul style="margin:0px;padding:1px;"> <li style="list-style-type: none;margin:0px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li> </ul> </div> <!-- MINIBOX 4 END --> </div> </lj-raw> Any regular text goes here.<lj-raw> </fieldset> <!-- PAIRINGS LIST END --> <!-- CAST LIST --> <fieldset style="max-width:100%;background:#fff;border:1px solid #f5f5f5;border-radius:0px;text-align:left;margin:0 auto;font-size:13px;text-align:justify;line-height:1.5;padding:25px 25px;margin:20px 0px;"> <legend style="padding:5px 15px;background:#808080;color:#fff;font-size:20px;font-weight:bold;text-transform:lowercase;">cast list!</legend> <div style="width:100%;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr;grid-template-areas:'left right'; grid-gap:10px;line-height:2;"> <div style="grid-area:left;font-weight:bold;text-align:right;color:#CD5C5C;"></lj-raw>Role Role Role Role Role<lj-raw></div> <div style="grid-area:right;text-align:left;"></lj-raw>Actor Actor Actor Actor Actor<lj-raw></div> </div> </lj-raw> Any regular text goes here.<lj-raw> </fieldset> <!-- CAST LIST END --> <!-- PLAYLIST --> <fieldset style="max-width:100%;background:#fff;border:1px solid #f5f5f5;border-radius:0px;text-align:left;margin:0 auto;font-size:13px;text-align:justify;line-height:1.5;padding:25px 25px;margin:20px 0px;"> <legend style="padding:5px 15px;background:#808080;color:#fff;font-size:20px;font-weight:bold;text-transform:lowercase;">playlist!</legend> <ol style="padding:0px;margin-top:0px;list-style-position:inside;"> <li><a href="" style="text-decoration:none;color:#CD5C5C;" title="Play!">⯈</a> <b>Song Name</b> by Song Artist</li> <li><a href="" style="text-decoration:none;color:#CD5C5C;" title="Play!">⯈</a> <b>Song Name</b> by Song Artist</li> <li><a href="" style="text-decoration:none;color:#CD5C5C;" title="Play!">⯈</a> <b>Song Name</b> by Song Artist</li> </ol> </lj-raw>Any regular text goes here.<lj-raw> </fieldset> <!-- PLAYLIST END --> <!-- HOW THIS WORKS --> <fieldset style="max-width:100%;background:#fff;border:1px solid #f5f5f5;border-radius:0px;text-align:left;margin:0 auto;font-size:13px;text-align:justify;line-height:1.5;padding:25px 25px;margin:20px 0px;"> <legend style="padding:5px 15px;background:#808080;color:#fff;font-size:20px;font-weight:bold;text-transform:lowercase;">how this works!</legend> </lj-raw><span style="padding-right:5px;">⬥</span> AKA the Rules Section. This is where general OOC notes go. <span style="padding-right:5px;">⬥</span> Here's something you should know! <span style="padding-right:5px;">⬥</span> Here's another thing you should know! <span style="padding-right:5px;">⬥</span> I don't like messing with list codes so this is a faux list. <span style="padding-right:5px;">⬥</span> If you need a text box for any reason - there's a standard html form for players to fill out, etc - then here's some prestyled code for that. <center><textarea style="font-size:13px;width:75%;height:100px;border:1px solid #808080;color:#000;background:#f5f5f5 url()center;outline:none;resize:none;overflow:auto;">FORM TEXT HERE</textarea></center><lj-raw> </fieldset> <!-- HOW THIS WORKS END --> <!-- LOCATIONS --> <fieldset style="max-width:100%;background:#fff;border:1px solid #f5f5f5;border-radius:0px;text-align:left;margin:0 auto;font-size:13px;text-align:justify;line-height:1.5;padding:25px 25px;margin:20px 0px;"> <legend style="padding:5px 15px;background:#808080;color:#fff;font-size:20px;font-weight:bold;text-transform:lowercase;">locations!</legend> </lj-raw><b>⬦ <A href="">LOCATION</a>:</b> Location description. <b>⬦ <A href="">LOCATION</a>:</b> Location description. <b>⬦ <A href="">LOCATION</a>:</b> Location description. <b>⬦ <a href="">OOC - QUESTIONS, COMMENTS, CONCERNS!</a></b><lj-raw> </fieldset> <!-- LOCATIONS END --> </fieldset> </div> <!-- CREDIT --> <div style="max-width:580px;margin:0 auto;text-align:right;font-size:10px;"><a title="code credit!" href="http://thisismanx.dreamwidth.org" style="text-decoration:none;color:#ddd;">♡</a></div> <!-- CREDIT --> </lj-cut></lj-raw>

This box isn't included in the final code.

what's up?

This is where the general IC flavor backdrop setting of the event goes. What is happening here? Where is it located??

Suspendisse et sem ultrices, finibus ante id, rhoncus metus. Cras at sem nec felis eleifend semper sed ac metus. Nullam ligula ipsum, venenatis ac molestie vel, eleifend varius metus. Integer in faucibus enim. Aliquam vitae consectetur est. Proin tincidunt dictum elit ac interdum. Proin euismod sapien quis urna mollis, eu egestas ante laoreet. In porttitor mi eu nunc rhoncus dictum.

This box is clearly marked for removal if desired. Or you can add display:none; to the fieldset css.

visuals!

Refreshments! Decorations! General #mood! Searching anything + 'aesthetic' on Pinterest is a great place to start.

This box uses flexbox and wrapping, so as many or as few images can be added as desired, just add or remove the divs with the url(IMG) code in them. Fiddling with the height and widths can make for a more moodboard-y appearance.

This box is clearly marked for removal if desired. Or you can add display:none; to the fieldset css.

volunteer slots!

Volunteer A does a thing! Wow!
Volunteer B does a thing to Volunteer C!

This box is clearly marked for removal if desired. Or you can add display:none; to the fieldset css.

pairings list!

• Group 1
• Character A
• Character B
• Character C

• Character Name
• STB #1: Character A
• STB #2: Character B
• 7MIH: Character C

• Character A
• &
• Character B

• Lorem ipsum dolor sit amet, consectetur adipiscing elit.

This box uses flexbox and wrapping, so as many or as mini-boxes can be added as desired. I've provided a couple examples of how to style this section.

This box is clearly marked for removal if desired. Or you can add display:none; to the fieldset css.

cast list!

Jack
Little Red Riding Hood
The Baker
The Baker's Wife
The Witch
Cinderella
Cinderella's Prince
Cinderella's Stepmother
& etc

D'Artagnan Brandon
Sophronia Hayward
Tuor Chill Daddy
Perdita Toadsquawk
Éowyn Hellgnash
Nydia McKinney Jr.
Logann Bling Bone
Belphoebe Flitterpuff
Percival Jellyspark

This box is clearly marked for removal if desired. Or you can add display:none; to the fieldset css.

playlist!

1. ⯈ Song Name by Song Artist
2. ⯈ Song Name by Song Artist
3. ⯈ Song Name by Song Artist

This box is clearly marked for removal if desired. Or you can add display:none; to the fieldset css.

how this works!

⬥ AKA the Rules Section. This is where general OOC notes go.

⬥ Here's something you should know!

⬥ Here's another thing you should know!

⬥ I don't like messing with list codes so this is a faux list.

⬥ If you need a text box for any reason - there's a standard html form for players to fill out, etc - then here's some prestyled code for that.

<textarea style="font-size:13px;width:75%;height:100px;border:1px solid #808080;color:#000;background:#F5F5F5 url()center;outline:none;resize:none;overflow:auto;">FORM TEXT</textarea>

This box is clearly marked for removal if desired. Or you can add display:none; to the fieldset css.

locations!

⬦ LOCATION: Location description.

⬦ LOCATION: Location description.

⬦ LOCATION: Location description.

⬦ OOC - QUESTIONS, COMMENTS, CONCERNS!

This box is clearly marked for removal if desired. Or you can add display:none; to the fieldset css.

♡

Comments

Broken Code

[thisismanx]

This code was affected by the latest DW code push and no longer displays as intended. I will be looking into fixing this code at a later date.

Re: Broken Code - Fixed!

[thisismanx]

Everything shooould be tweaked so it is working as originally intended again.

Re: Broken Code - Fixed!

[crowmod]

an official driveby muah you're amazing

Re: Broken Code - Fixed!

[thisismanx]

♥!!