thisismanx: (041)
Manx!!! ([personal profile] thisismanx) wrote2029-04-28 08:37 pm

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

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 [personal profile] 10billionghosts and [personal profile] 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 [community profile] gooseberryhigh is located here.

And finally, here's the code:



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.



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.
iliekrp: (Default)

[personal profile] iliekrp 2019-05-01 07:14 pm (UTC)(link)
YOU ARE DOING SO MANY PRETTY THINGS LATELY. HOW!! ARE YOU SO TALENTED!!!!
iliekrp: (Default)

[personal profile] iliekrp 2019-05-03 03:19 pm (UTC)(link)

My html ability extends to trying to edit other people's code and spectacularly breaking it, so I am always very impressed with you skilled people!

goodnightbunny: (Default)

[personal profile] goodnightbunny 2019-05-03 03:23 pm (UTC)(link)
ahhh well HOPEFULLY this isn't too hard to read but i'm happy to help if you do spectacularly break something!!!
iliekrp: (Default)

[personal profile] iliekrp 2019-05-03 06:54 pm (UTC)(link)

THANK YOU tho you may regret that offer, because I'm real good at breaking things 🙃

crowmod: (Default)

Re: Broken Code - Fixed!

[personal profile] crowmod 2020-08-17 07:03 pm (UTC)(link)
an official driveby muah you're amazing