jay, novice human (![[personal profile]](https://www.dreamwidth.org/img/silk/identity/user.png)
10billionghosts) wrote2021-10-09 10:31 pm
10billionghosts) wrote2021-10-09 10:31 pm
Entry tags:
code: shuffle! a fully modular event code
Alright! This is the post for Shuffle, a fully modular, stackable code for ic/oocs, events, and thread headers. It is purposefully matchy with Fun Facts, my information layout code. Since there's a whooole lot going on with this code, I've formatted the post a bit differently. Info up here, preview below, and the code itself with instructions at the bottom.
Before I go on, I need to CREDIT SOME FOLKS!thisismanx suggested that I make an ic/ooc code that matched my Fun Facts code. This code takes heavy inspiration from her ic/ooc code. baisemain helped with troubleshooting again, ensuring that this code would be mobile compatible! And all the folks who checked this code on their phones for me when it was broken. 🥲
Keep scrolling to see every modular section laid out one on top of the other. Some of the sections contain some additional styling options like a flex wrapping image board and a text box. Keep in mind that the code in its entirety is not meant to be used all at once. Rather, pick the sections that suit your needs. Keep it simple for me, because I certainly can't.
The links below go to some sample IC/OOCs to show off what the code can do
The Normal, Small Event Sample: Peruvian Darkness Powder from Gooseberry High
The Extremely High Key Event Sample: Leap Day Festival from Peckenpaugh
Before I go on, I need to CREDIT SOME FOLKS!
thisismanx suggested that I make an ic/ooc code that matched my Fun Facts code. This code takes heavy inspiration from her ic/ooc code. baisemain helped with troubleshooting again, ensuring that this code would be mobile compatible! And all the folks who checked this code on their phones for me when it was broken. 🥲Keep scrolling to see every modular section laid out one on top of the other. Some of the sections contain some additional styling options like a flex wrapping image board and a text box. Keep in mind that the code in its entirety is not meant to be used all at once. Rather, pick the sections that suit your needs. Keep it simple for me, because I certainly can't.
The Normal, Small Event Sample: Peruvian Darkness Powder from Gooseberry High
The Extremely High Key Event Sample: Leap Day Festival from Peckenpaugh
EVENT TITLE HERE
WHAT'S UP?
This great big aesthetic board is actually two sections: HEADER, which comprises those four images up top and the event label, and STARTER BOX, which was purpose built to go directly beneath the header and make the aesthetic board a little more robust. You don't have to use STARTER BOX -- you can use one of the other section codes in its place.
This particular section is intended to introduce your event. It has a fixed height, which means any text overflow will generate a scroll bar on that box, rather than stretch.
The base code for this design comes with both HEADER and STARTER BOX. To get rid of this section and replace it with a different one, simply delete everything from -- STARTER BOX -- to -- STARTER BOX: END -- in the code (including the open and close carats), and paste in the section you want.
Cupcake ipsum dolor sit amet. Muffin cheesecake gingerbread jelly macaroon. Just to fill out the text.
This particular section is intended to introduce your event. It has a fixed height, which means any text overflow will generate a scroll bar on that box, rather than stretch.
The base code for this design comes with both HEADER and STARTER BOX. To get rid of this section and replace it with a different one, simply delete everything from -- STARTER BOX -- to -- STARTER BOX: END -- in the code (including the open and close carats), and paste in the section you want.
Cupcake ipsum dolor sit amet. Muffin cheesecake gingerbread jelly macaroon. Just to fill out the text.
HOW THIS WORKS
This particular section is MULTIBOX. It can be filled with just about anything you'd like. Unlike the above two sections, which have a fixed height and will generate a scroll bar to contain any overflow information, MULTIBOX will stretch vertically to accommodate what you put into it.
You can add or remove sub-headers as you like. Just be sure you nab the entire sub-section code when adding or deleting. This subsection features some very simple styling for text so it's ready to go if you just want more space for words. However, I've also provided a few different subsections both as examples of what you can do, and the codes for them to use as you like.
By the way, here's a styled text area code so that your participants can easily copy-paste forms:
You can add or remove sub-headers as you like. Just be sure you nab the entire sub-section code when adding or deleting. This subsection features some very simple styling for text so it's ready to go if you just want more space for words. However, I've also provided a few different subsections both as examples of what you can do, and the codes for them to use as you like.
By the way, here's a styled text area code so that your participants can easily copy-paste forms:
VOLUNTEER SLOTS
Nothing about this particular sub-section is different from the one directly above it, but this is just an example of using the standard text sub-section code for Volunteer Slots!
Cotton candy dessert tootsie roll apple pie tiramisu. Fruitcake gummi bears dragée sugar plum sweet cheesecake.
Jelly jujubes oat cake lollipop cheesecake cake icing.
Muffin caramels candy cotton candy soufflé gingerbread halvah gummi bears.
Gingerbread bonbon gummies chupa chups liquorice. Dragée pastry cotton candy cotton candy apple pie apple pie marshmallow icing donut.
Caramels danish liquorice icing bear claw danish.
Cotton candy dessert tootsie roll apple pie tiramisu. Fruitcake gummi bears dragée sugar plum sweet cheesecake.
Jelly jujubes oat cake lollipop cheesecake cake icing.
Muffin caramels candy cotton candy soufflé gingerbread halvah gummi bears.
Gingerbread bonbon gummies chupa chups liquorice. Dragée pastry cotton candy cotton candy apple pie apple pie marshmallow icing donut.
Caramels danish liquorice icing bear claw danish.
GRUB HUB
(a simple flex image board to provide inspiration for things like drinks, decorations, NPCs, etc.)
PAIRINGS
(this subsection, GROUP UP, uses flex wrapping to allow you to neatly add a bunch of little boxes with text for things like group/room assignments, prompts, randomized pairings -- whatever!)
GROUP 1
Character A
Character B
Character C
Character A
Character B
Character C
GROUP 2
Character A
Character B
Character C
Character A
Character B
Character C
GROUP 3
Character A
Character B
Character C
Character A
Character B
Character C
Character A
&
Character B
&
Character B
Cupcake ipsum dolor sit amet chocolate cake.
By playing with the "width" value on these individual divs, you can come up with some pretty unique formatting.
Even these wider boxes (which I would use for scene prompts, for instance) will stack nicely.
CHARACTER A & CHARACTER B
Find a fully functional convenience store in the middle of the woods! And it's not just full of candy--it's made of candy. Well, this isn't suspicious at all.
Find a fully functional convenience store in the middle of the woods! And it's not just full of candy--it's made of candy. Well, this isn't suspicious at all.
SUB-HEADER
This section, labeled HUG RIGHT SECTION in the code, features a single aesthetic image and space for text or code. Any of the codes used in the sub-sections above can be used in this box right here to further customize your event code. This section is set to a fixed height and so if the content in this box exceeds the height, it will generate a scroll bar.
A Styled Link
Another Styled Link
A Styled Link
Another Styled Link
SUB-HEADER
Same as above, but this time your text is on the left side. This section is labeled HUG LEFT SECTION in the code. Just going to show off some of the things you can do and also how the scroll bar looks...
Cupcake ipsum dolor sit amet toffee jelly-o jelly-o. Cotton candy marzipan brownie gummies sweet cotton candy tootsie roll fruitcake cotton candy. Marshmallow dessert toffee gummies cake shortbread pie.
Powder donut icing cake powder. Danish gummi bears macaroon cake cake dragée. Jelly carrot cake sugar plum candy canes pie tootsie roll oat cake macaroon toffee. Jelly beans pie donut icing powder jelly-o jelly beans.
GROUP 1
Character A
Character B
Character C
Character A
Character B
Character C
GROUP 2
Character A
Character B
Character C
Character A
Character B
Character C
GROUP 3
Character A
Character B
Character C
Character A
Character B
Character C
Powder donut icing cake powder. Danish gummi bears macaroon cake cake dragée. Jelly carrot cake sugar plum candy canes pie tootsie roll oat cake macaroon toffee. Jelly beans pie donut icing powder jelly-o jelly beans.
So, now that you've seen it in action, let's get to the codes. Further instructions at the very bottom. I've split this into 4 different codes:
FIRST UP IS THE BASE CODE:
This includes the aesthetic board header and the STARTER BOX code. You can delete the STARTER BOX code and sub out one of the other codes in its place, if you'd like.
Okay! Now that we've got the base code squared away, let's move on to MULTIBOX. That's the utilitarian code that stretches so you can fill it with a bunch of sub-sections. This code features 3 styled sub-sections: TEXT, IMAGE FLEX GRID, and GROUP UP. You don't need to use all three! Just delete the ones you don't want.
HUG SECTION RIGHT looks nice when used after either STARTER BOX or HUG LEFT. You can alternate them to get a shuffled look.
Whew! Last one! This is HUG LEFT SECTION, which can replace STARTER BOX fairly well, or be alternated after HUG RIGHT if you've got a lot of sections in your event.
HOW TO USE + SOME NOTES:
❣️ Mind the lj-raw tags!! Keep them in place and be sure to write around them.
❣️ This code is mobile friendly and insanejournal friendly!
❣️ You need the base code for this to work! However, you don't need to use STARTER BOX, you can paste one of the other sections over it!
❣️ The LJ-CUT text is built into the code in the header. I've commented out around it so that you can spot it more easily.
❣️ Keep an eye out for anything !!surrounded by double exclamation points!! That's something easily missable that may need customization.
❣️ FUN WITH IMAGES & BACKGROUND-IMAGE:
❣️ Every instance of IMG_URL can be replaced with an image, gif or otherwise. IMG_URL is used exclusively for something that should just be a pure image, either in an aesthetic board, flex image board, or a user icon.
❣️ Any instance of #URL_HERE is for a link!
❣️ All of the headers and sub-headers have a HEADER_IMG that can be replaced with an image, if you would like to make your headers have a texture/repeating pattern. You do not need to add any header images.
❣️ hex code #6a8491 controls the main accent color of the code. Find and replace it to change it to whatever color code you'd like.
❣️ hex code #fff is white, and changing that will change the color of any white text in the code.
❣️ hex codes #aaa & #bbb are light grays. I've set the little color bars that separate sections to alternating #aaa and #bbb by default, so change those to whatever colors you'd like!
❣️ Whew! So, this is a lot! I hope it comes in useful for everyone's parties, festivals, and impromptu mud wrestling sessions. If you have any questions about the code, please don't hesitate to ask! But do allow 5 - 7 days for me to reply.
As always, I do not require credit, but it is always appreciated, especially if you are editing my base code. I love to see what people have done with my code, so drop me a comment with a link if you've done up an event you're particularly proud of! If you're feeling generous, you can donate to my ko-fi!
This code is compatible with insanejournal.
FIRST UP IS THE BASE CODE:
This includes the aesthetic board header and the STARTER BOX code. You can delete the STARTER BOX code and sub out one of the other codes in its place, if you'd like.
Okay! Now that we've got the base code squared away, let's move on to MULTIBOX. That's the utilitarian code that stretches so you can fill it with a bunch of sub-sections. This code features 3 styled sub-sections: TEXT, IMAGE FLEX GRID, and GROUP UP. You don't need to use all three! Just delete the ones you don't want.
HUG SECTION RIGHT looks nice when used after either STARTER BOX or HUG LEFT. You can alternate them to get a shuffled look.
Whew! Last one! This is HUG LEFT SECTION, which can replace STARTER BOX fairly well, or be alternated after HUG RIGHT if you've got a lot of sections in your event.
HOW TO USE + SOME NOTES:
❣️ Mind the lj-raw tags!! Keep them in place and be sure to write around them.
❣️ This code is mobile friendly and insanejournal friendly!
❣️ You need the base code for this to work! However, you don't need to use STARTER BOX, you can paste one of the other sections over it!
❣️ The LJ-CUT text is built into the code in the header. I've commented out around it so that you can spot it more easily.
❣️ Keep an eye out for anything !!surrounded by double exclamation points!! That's something easily missable that may need customization.
❣️ FUN WITH IMAGES & BACKGROUND-IMAGE:
Every image in this code is done as a background-image so that it scales with different sized monitors. The background image code looks like background:#aaa url('IMG_URL')center;background-size:cover;. If you don't like how an image is getting cropped, try changing that 'center' to 'left', 'right', 'top', or 'bottom' and see how that does you. You can also really fine tune its positioning. If you're interested here's a brief look at it.
❣️ Every instance of IMG_URL can be replaced with an image, gif or otherwise. IMG_URL is used exclusively for something that should just be a pure image, either in an aesthetic board, flex image board, or a user icon.
❣️ Any instance of #URL_HERE is for a link!
❣️ All of the headers and sub-headers have a HEADER_IMG that can be replaced with an image, if you would like to make your headers have a texture/repeating pattern. You do not need to add any header images.
❣️ hex code #6a8491 controls the main accent color of the code. Find and replace it to change it to whatever color code you'd like.
❣️ hex code #fff is white, and changing that will change the color of any white text in the code.
❣️ hex codes #aaa & #bbb are light grays. I've set the little color bars that separate sections to alternating #aaa and #bbb by default, so change those to whatever colors you'd like!
❣️ Whew! So, this is a lot! I hope it comes in useful for everyone's parties, festivals, and impromptu mud wrestling sessions. If you have any questions about the code, please don't hesitate to ask! But do allow 5 - 7 days for me to reply.
As always, I do not require credit, but it is always appreciated, especially if you are editing my base code. I love to see what people have done with my code, so drop me a comment with a link if you've done up an event you're particularly proud of! If you're feeling generous, you can donate to my ko-fi!
This code is compatible with insanejournal.
no subject
If I may be so bold to ask, would you potentially be interested in/available to commission for coding? It would probably mostly be a question of tweaking/fixing/sobbing over the incompetency of existing things rather than things from scratch, but if you're generally interested, lemme know and maybe we can have a chat about it. Of course, absolutely no worries if not, I just figured I'd shoot my shot in asking ;)
no subject
I'm not currently open for commissions, but do eventually plan on offering them in the future. That said, if it's a matter of tweaking the formatting of an extant code, especially if it's one of mine, I'd be happy to have a look at what's causing you trouble. c:
no subject
no subject