10billionghosts: (listen i just love my wol)
jay, novice human ([personal profile] 10billionghosts) wrote2024-03-08 03:45 pm
  • Add Memory
  • Share This Entry
Entry tags:

code set: SALAD, a modular code set





Surprise! It's time for a new modular code set. I'm SO excited to share this set with y'all, cuz I love the look of it, and it's pretty easy to use. Say hello to SALAD!

SALAD started out as a build-your-own monthly planner/thread tracker code, as I've had a few requests for those over the last few years. Shout out to [personal profile] panicstrickyn and [personal profile] lofivibe in particular for their detailed requests!

Like my other modular codes, SALAD comes with a number of pre-styled standalone codes in addition to its assorted bits and pieces. Each pre-styled code can be picked up in its own entry, linked next. If you aren't super comfortable with HTML and CSS or if you just don't feel like building from scratch, I'd suggest grabbing one of these first.

If you want to build your own version of the code from scratch or are just interested in browsing all the available subsections, stay on this post. Pick up the outer wrapper below (you need it for the code to work) as a starting point, then select the subsections you want to use from the bottom of this post.

OUTER WRAPPER:


Why SALAD?
Because.

Does this hub post contain anything that isn't featured in the individual code release posts?
YES! This hub post does contain a few subsections that aren't used in any of the pre-styled codes. The MOOD BOARDS & MISC part at the very bottom has most of them.

Is there anything found in the pre-styled codes that isn't also represented on this post?
Not really. While the pre-styled codes have unique-looking elements, anything unique you find in those is a slightly tweaked version of what you can grab on this post.

HOW TO USE:

❣️ Mind those lj-raw tags!!

❣️ This code is mobile compatible and insanejournal friendly! It is not comment compatible.

❣️ While this set is modular, it doesn't make for good Frankenstein fodder. What that means is, I can't guarantee it'll play nice with other codes or sets without some amount of code tweaking, so combine with other codes at your own risk.

❣️ If you aren't using a pre-styled standalone code, start by posting the OUTER WRAPPER code above into a blank entry.

❣️ There are two flavors of subsection in this set: full width subsections and 1x1 compatible subsections.
  • Full width subsections will ALWAYS fill the width of the wrapper (one row) on their own. They will not shrink to allow more than one item on their row.

  • Most text box codes have full width and 1x1 versions. All dividers, headers, and footers are full width by default.

  • A 1x1 compatible subsection will, on desktop resolution views, sit side-by-side with another 1x1 compatible subsection. On mobile view, a 1x1 subsection will stretch to fill the full width of the wrapper.

  • If not used alongside another 1x1 subsection, a 1x1 compatible section will stretch to the full width of the wrapper. (This is intentional.)

  • 1x1 sections will always pair with a preceding 1x1 section, if one is available. Three 1x1 subsections in a row will result in the first two subsections pairing and the third section stretching to the full width.

  • You can force a 1x1 compatible subsection to be full width. I'll explain that in the next major point below.
❣️ If you'd like to make a 1x1 compatible subsection automatically take up a whole row, add a full width section, header, footer, or divider code right after the 1x1 subsection. Alternatively, you can paste this linebreak code immediately after the subsection code to achieve the same effect without adding visible content:


❣️ You can apply a seamless tiling background to the outer wrapper. Replace the BG_HERE placeholder text with the URL for the image you'd like to use. The stuff at transparenttextures.com works great for this!

❣️ Add additional subsections by pasting full codes where indicated. Comments within the code indicate where to add new subsections and where those sections begin and end. You can add as many subsections as you want. Everything will auto-scale!

❣️ There are a few common markers and placeholders you'll want to watch out for and update:
  • #URL_HERE - link placeholder.

  • IMG_URL - (optional) image url placeholder; any image will work.

  • BG_HERE - optionally apply a background image to the code's outer wrapper; found at the top of the wrapper code, only.

  • #ENTRY_URL - for fake lj-cuts, update this placeholder text AFTER posting the entry with a link to the entry.

  • !! text surrounded by exclamation points !! - for multi-sentence or multi-line blocks of text.
❣️ By default, colors are standard for all standalone codes and subsections. I encourage you to customize them! Here're the hex codes you'll want to update:
  • hex code #5c4677 - used extensively throughout code; definitely use find and replace to update.

  • hex code #fff - white. sub-section background color and font color.

  • hex code #232323 - used for borders and shadows.

  • hex code #e0d7ea - used for some accents.
❣️ This code contains a credit link. I'd appreciate if you'd left it in!

❣️ I love peeking at what people do with my codes, so feel free to comment if you use!

❣️ I'm so excited to share this code set with everyone, and I really hope y'all enjoy it. It took a tremendous amount of work to research, code, style, and write instructions for this set. If you are so inclined, you can toss me a few bucks on my ko-fi to support my coding efforts!

SUBSECTION PREVIEWS & CODES CAN BE FOUND BELOW
All subsections are ordered by their function in the design. Click a header to reveal them.


TEXT BOX CODES (this is a long one)
1x1 Just Text
If you just want to slap some text right into the code without any bells and whistles, use this code and add your block of text between the lj-raw tags. Very straightforward. This code is 1x1 compatible, so keep that in mind when using it. Refer to the HOW TO USE section above for an explanation of how a 1x1 compatible section works.
CODE:
Just Text
Here is the full width version of the above "just text" code. This will automatically stretch the the full width of a row. If you want to adjust how much space the text takes up, you can change width:100% on this subsection to as small as width:55% and it'll still act as a "full width" code.
CODE:
Full Width Box w Side-Label
header
Full width version of side-labeled text boxes. I'm just showing off the left-side label box to save on space, but you can also pick up the box with the right-side label below. These boxes will force a new line to start.

The header text will always align toward the top of the div. If you'd like the header text to align toward the bottom of the div, change the header's text-align value to left. You can also do center to perfectly center the label text -- that's a good choice for long header text.
LEFT-SIDE CODE:
RIGHT-SIDE CODE:
1x1 Text Boxes w Side Labels
header
This is a set of two boxes that, on wider displays, will align side by side. On narrow displays like mobile screens, they'll collapse down to one per row.
You can take just one box from this subsection and pair it with another 1x1 code element from the set (like an image square or list) and they'll align properly. If you simply take one box and don't add another compatible 1x1 code, the one box will stretch to fill the row.
header
CODE:
1x1 Image Boxes
Descriptive Title.
!! description here !!
Descriptive Title.
!! description here !!
CODE:
1x1 Info / Image
INFO/ IMAGE is a 1x1 compatible set. The default code here is TEXT FIRST, IMAGE SECOND, but you can change this so that the image is on the left by swapping the order of the {info} and {image} codes.

These boxes are set to a fixed height of 250px and will auto generate a thin scrollbar if you add more text than will fit. This is the only one of the text boxes that will generate a scroll bar instead of scaling vertically with more text.
CODE:
Full Width Box w Bubble Label
header text.
Full width text box with a "bubble" label. If you just want the box without a label, simply delete the header div. You can either put a boatload of text in one of these or post multiple in a wrapper to separate different sections. You can see a live preview of that on the Info Pages code release post.
CODE:
1x1 Bubble Label Boxes
header text.
Here's a 1x1 version of the bubble label code so that you can have side-by-side text boxes if you'd like!
header text.
!! your content here !!
CODE:
1x1 Simple Label Boxes
Header
Here's a set of simple 1x1 text boxes with thin header bars. It's used in the SALAD Event code by default.
Header
!! your content here !!
CODE:
Text w Image Float (Appearance Section)
Header
This section features a right-floating image. It's used for the APPEARANCE section on the Biosheet code. As you can see, the text will wrap around the image if you add enough of it.

If you want to swap the image alignment, under the {image} section, change "float:right" to "float:left" and "margin:0 0 0 15px;" to "margin:0 15px 0 0;"

Advanced coding note: technically, you can have multiple images by copy-pasting the {image} section multiple times. That requires a bit more advance coding knowledge, though.
CODE:
Text w Image Float (Quick Info)
Header Text

This is a slightly more structured version of the APPEARANCE section code above, but it does basically the same thing, I guess? It just starts with the image on the left and has a white background. Honestly I forgot this sub-section existed so I'm adding it last minute whoops.
CODE:


THREAD TRACKERS
Collapsing Thread Tracker
Thread Tracker
date
type
link
desc
status
00/00
type
!! short desc !!
active
CODE:
1x1 Narrow Thread Tracker
Threads
date
link
desc
00/00
!! short desc !!
00/00
!! short desc !!
This "narrow" thread tracker is a smaller alternative for when you don't want the thread tracker to be the focus of a code. If you don't pair it with another 1x1 column item like this, it will expand out to the full width of the wrapper, and not look too different from the standard wrapper.

If you're building your own code and using the narrow thread tracker, I encourage you to swap this default subsection ({just narrow text}) out with a more exciting sub-section, like line item list or checklist.
CODE:



CODES FOR MAKING LISTS

1x1 Checklist
✔
This is another 1x1 compatible subsection that'll stretch to the full width of the div if not used alongside another 1x1 compatible code.
There's a full width version below.
CODE:
Full Width Checklist
✔
Full width checklist!
Does what it says on the tin.
CODE:
Biosheet Stats w Images
full name:
answer
alias:
answer
age/dob:
answer
pronouns:
answer
field:
answer
Feel free to add or remove additional line items here. The mood board will scale nicely about it.
CODE:
1x1 Compatible Link List
Add as many links as you want to this 1x1 compatible link list. You can replace the IMG_URL placeholder text with the URL of an image to make the links pop a bit more, or swap out the default prestyled links with a link styling you like more.

By default, the links will hug the bottom of the row they're in. You can make them hug the top of the row or sit in the center by changing align-items:end; to align-items:start; or align-items:center;
CODE:
Full Width Link List
CODE:


HEADERS, FOOTERS, & DIVIDERS
Header Text
The left side of this header with get smaller to accommodate the right side. If your text string is long enough, the dots will disappear completely. You can see how this works by viewing the release post on mobile, where multi-line headers cause the dots to disappear entirely.
DOTS HEADER W TEXT:
This is just a divider that matches the above header. Not much else of note here!
THICC DOTS DIVIDER:
Header Text
This divider/header works best with either no text at all (just delete the words "Header Text" or with a 1 - 2 word header. Longer strings of header text will wonk this up, especially on mobile.
HEADER DIVIDER:
Header Text
These divider/headers work best with either no text at all (just delete the words "Header Text" or with a 1 - 2 word header. Longer strings of header text will wonk this up, especially on mobile.
Header Text
RIGHT-SIDE HEADER DIVIDER:
LEFT-SIDE HEADER DIVIDER:
HEADER TEXT
subheader
The HEADER w LINKS utilizes a reverse flow flex grid to ensure the actual header text is always at the top. It's made with 1x1 compatible codes, so you can replace the link list code with any other 1x1 compatible code if you like. It may not look all that good, though.

The included link list is identical to the 1x1 link list code. You can add as many links as you want.
LINK LIST HEADER:
HEADER:
subheader
If you don't want a subheader, just delete the word "subheader" from the code. Similarly, the code will still work if you delete the placeholder "HEADER:"
INFO HEADER:
It's just dots.
DIVIDER:
ooc info:
player name . timezone . contact . pb info
An OOC info footer for a biosheet code. It's a 1x1 compatible code set into a full width wrapper, so if you're comfortable with HTML, you can play with setting it alongside another 1x1 compatible subsection.
OOC INFO FOOTER:


MOOD BOARDS & MISC.
Jumbo Mood Board
Optional Header Text
So, for best results on this Big McLargehuge mood board, I'd suggest using bigger/higher resolution images for the background image spaces (stuff you find on like unsplash). Images that are lower resolution or smaller may not look super nice in the background spaces. You never know, though! Feel free to mess around with it!

This board comes with optional header text that you can remove by deleting the words "OPTIONAL HEADER TEXT."
JUMBO MOOD BOARD:
Manageable Mood Board
Optional Header Text
A more manageably sized version of the above banner mood board. This 1x1 compatible mood board is set to a fixed height of 250, and will not get any taller than that. So keep that in mind when you're using it.

This mood board pairs nicely with the text box from the 1x1 Info / Image subsection in the text box codes group above.
1x1 MOOD BOARD:
Portrait Mood
This is the default portrait mood board from the top of the biosheet code. It's 1x1 compatible and should generally only be used when paired with another 1x1 code, because it'll look goofy if stretched to the full width of a row.

The "portrait" image space (left upper corner) is set to a fixed height, and the bottom bar is not. The result is that you can pair this mood board with any 1x1 code and not "break" the portrait if the paired 1x1 winds up with a very big height value.
PORTRAIT MOOD BOARD:
Pill Mood
Optional Header Text
This is the mood board used at the top of SALAD Event, just with all the fake LJ-cut stuff removed. You can plop this version anywhere in the code and not have to worry about LJ-cuts messing with things.

If you don't want text in the mood board, delete the words "OPTIONAL HEADER TEXT" from the code.
PILL MOOD BOARD:
Circle Gallery
By default this (full width) "gallery" comes with space for four images, which works best with the code layout across desktop and mobile. You can add additional images by copying the circle code and pasting additional circles, or delete the existing circles, if you want. The code'll still work.
CIRCLE GALLERY:
Square Gallery
Same as the above, but the default image space is styled a bit differently.
SHADOW SQUARE GALLERY:
1x1 Progress Bars
Title - 50%
Title - 30%
Title - 12%
Title - 75%
Title - 100%
Title - 7%
I made this for the monthly planner code and then wound up axing it from the final version because it didn't actually feel all that useful. However, aesthetically it is pleasing to look at! So, here it is, in case you want a bunch of progress bars!

There's commenting in the code that indicates the value you need to change to adjust the "completed-ness" of the bar. As with other similar codes, you can add or remove bars freely. The space will stretch to accommodate.

This is a 1x1 compatible code, so you'll need to pair it with another 1x1 code, because it looks really goofy when it's stretched to the full width of the wrapper.
Textarea
I can't send you away without including the styled textarea code! As you've seen through this release post, the textarea code is a 1x1 compatible code that will sit next to other 1x1 compatible codes, or move to a new line if there's no space.
TEXTAREA CODE:


hello from the bottom of the post! I am very tired lmao I really hope you enjoy this set!!
Flat | Top-Level Comments Only
thisisalex: (Default)

[personal profile] thisisalex 2024-03-08 11:26 pm (UTC)(link)
bro these codes are so sexy. i can't wait to make pointless moodboards and events and omg the progress bars. i don't even know what i'm going to use those for but i'm GOING to make up an excuse.
juliajoy: (Default)

[personal profile] juliajoy 2024-03-09 12:52 am (UTC)(link)
i scrolled down here with the intent of saying "dude this is so sexy" and then i saw you had functionally already commented exactly that
Edited (IT'S SO LEGIBILE) 2024-03-09 00:52 (UTC)
10billionghosts: (Default)

[personal profile] 10billionghosts 2024-03-09 03:09 am (UTC)(link)
LMAO THANK YOU 😭 God I honestly really did aim for something compact but still very organized and legible so I'm glad that worked out
10billionghosts: (Default)

[personal profile] 10billionghosts 2024-03-09 03:08 am (UTC)(link)
THANK YOU I legitimately cannot wait for you to incorporate progress bars into a mud wrestling IC/OOC somehow.
panicstrickyn: (Default)

[personal profile] panicstrickyn 2024-03-09 04:27 am (UTC)(link)
Joining the THIS IS SO SEXY brigade.
10billionghosts: (Default)

[personal profile] 10billionghosts 2024-03-09 04:35 am (UTC)(link)
LMAO THANK YOU! I'm sorry you had to wait like 2 years for a monthly planner code bsjdhsjs but I'm thrilled that the set's going over well so far.
chiming: (Default)

[personal profile] chiming 2024-03-09 09:50 pm (UTC)(link)
These are SO cool-looking! I especially love the event code ❤️ You make me wish I was in a game right now so I could use them. They'd be so easy to theme, too! Any kind of team-based game could easily make variants for each team. :3
10billionghosts: (Default)

[personal profile] 10billionghosts 2024-03-10 05:01 pm (UTC)(link)
Oh that would be such a cute use of the set? LOVE themed styling. Thank you!!

Yeah whenever I make a biosheet or event code that I really like, a part of me is like, "Wish I still had brain for game and writing. 🥲"
baisemain: (Default)

[personal profile] baisemain 2024-03-10 03:26 am (UTC)(link)
ran to the comments to be like "this is so sexy" only to see that i am not the only one
10billionghosts: (Default)

[personal profile] 10billionghosts 2024-03-10 05:03 pm (UTC)(link)
😭 Genuine lol It's a party down here THANK YOU
hallmark: (mermaid.)

[personal profile] hallmark 2024-03-12 04:05 pm (UTC)(link)
oh i love everything!!
10billionghosts: (Default)

[personal profile] 10billionghosts 2024-03-12 10:00 pm (UTC)(link)
Thank you!! :]
lofivibe: (pic#15948512)

[personal profile] lofivibe 2024-03-13 04:16 pm (UTC)(link)
/screaming quietly

THIS IS ALL SO LOVELY THANK YOUUUUU

editing to add i am so here for all these rounded edges holy shit
Edited 2024-03-13 16:17 (UTC)
10billionghosts: (Default)

[personal profile] 10billionghosts 2024-03-15 11:22 pm (UTC)(link)
I'm so glad you liked it!! Thank you again for all the suggestions they were a huge help for the thread trackers.
lofivibe: (pic#15948561)

[personal profile] lofivibe 2024-03-15 11:33 pm (UTC)(link)
No problem! I'm glad I could help and I'm super pumped to use all of these 🎊💖👏
midvalley: (KOHEI | he's a victim of his occupation)

[personal profile] midvalley 2024-05-11 07:03 am (UTC)(link)
thank you for this beauty! i want to use it for everything, but right now i've put together something for my muselist!
10billionghosts: (Default)

[personal profile] 10billionghosts 2024-06-01 12:08 am (UTC)(link)
Hi I JUST saw this comment like weeks later ajhfld sorry for the delay. THIS LOOKS SO GOOD? I love how it turned out as a muselist.
buckette: (Default)

[personal profile] buckette 2024-05-31 11:54 pm (UTC)(link)
Hi!

I am using it here. I was wondering if there was a way to have the header and the 6 links?
clutterbitch: (Default)

[personal profile] clutterbitch 2024-06-01 12:09 am (UTC)(link)
Heya! Sorry, just a clarifying question, did you mean you wanted the header and the six links on two separate lines?
Edited (tdajfdl this is 10billionghosts i'm just logged in on the wrong account) 2024-06-01 00:09 (UTC)
10billionghosts: (Default)

[personal profile] 10billionghosts 2024-06-01 01:00 am (UTC)(link)
Sure! You can achieve the links and header on two different lines with this code:

misclassed: FGO; CRAFT ESSENCE. (Default)

[personal profile] misclassed 2024-08-11 07:54 pm (UTC)(link)
thanks so much for making this code! its perfect for material heavy character biosheets, and i had a hoot making profile frankenstein out of the various pieces.
dj_dedf1sh: Samsa - Teniwoha (Default)

[personal profile] dj_dedf1sh 2025-02-16 10:23 pm (UTC)(link)
This is an awesome code base, I've been using it for various info sheets. But I have been wanting to do the fake LJ cut of the event code without having to use the pill mood board. Is there a way to achieve this?
10billionghosts: (Default)

[personal profile] 10billionghosts 2025-02-17 07:16 pm (UTC)(link)
Yeah! So, I'll give you the actual code here, too, but, to explain a bit...

You fake an LJ-Cut by basically placing an LJ-Cut where you want it to appear in your design, and then just wrapping the lj-cut in a div that you've set to display:none; that hides the standard ( LJ CUT TEXT )-type link that appears.

To still access the full post, you then add a traditional link linking directly to the entry, itself. This means that you DO have to post the entry, get its url, and then update the entry with a link to the url.

SO, anyway. Here is the code for your hidden LJ-cut, which, again, you'll want to place right where you'd want the cut to appear in your code/design:


And then somewhere in the code you will also want to add <a href="#ENTRY_URL_HERE" style="whatever style elements you want for the link">anchor text if wanted</a>

I hope that helps!! Let me know if you have more questions and I'll try to answer them to the best of my ability. :]
Flat | Top-Level Comments Only