jay, novice human (![[personal profile]](https://www.dreamwidth.org/img/silk/identity/user.png)
10billionghosts) wrote2025-07-25 01:14 am
10billionghosts) wrote2025-07-25 01:14 am
Entry tags:
code: SLICK LIST, a roster code (UPDATED 7/25/25)
ADVENTURERS
Character Name 🗡️
Character Name
Character Name
Character Name 📜
Character Name 🤝
HEALERS
Character Name
Character Name 🤝
Character Name 🎇📜
Character Name 🎇
Character Name
I-TOLD-YOU-SOS
Character Name 🎇
Character Name
Character Name
Character Name
Character Name 📜
UPDATE 7/25/25: Hello! This code was originally released 2/10/24. I've updated it to add a third version that collapses/hides the content of a column, per user request. I've also updated the raw codes to my newer tabbed format and clarified some of the comments for (hopefully) easier reading! Please enjoy!
Slightly edited version of the original entry description follows.
A couple of months ago, someone asked for a cast/roster list that worked similarly to the roster list from a game I ran a few years ago. I accidentally deleted the original request message 😭 and forgot about the request until recently. I seriously apologize to the original requester!! But I hope this code is somewhat useful to you, now.
SLICK LIST is a simple roster code, meant for listing short text strings like character names. On wider resolutions, it'll stack up to 4 columns across, and will flex down to double or single columns to accommodate smaller screens. This code is matchy with my SLICK CHAOS biosheet code.
This code comes in three styles:
BASIC CODE HERE:
BLOCK CODE HERE:
DETAILS CODE HERE:
HOW TO USE
❣️ Mind those lj-raw tags!!
❣️ This code is mobile compatible! It is most likely also compatible with InsaneJournal!
❣️ This code is almost completely comment compatible! It'll appear a little more narrow than the in-entry version when posted to a comment.
❣️ By default, all codes come with 4 lists & 2 names per line. You can remove lists or add as many as you want, but these lists will stack 4 across at most. On narrow displays like phone screens and tablets, they will automatically shuffle into rows of lists to accommodate.
❣️ You can customize how wide columns are by going to the COLUMN bit of the code and adjusting the 'max-width:175px' value. A max-width value of 350px will ensure you get 2 columns across per row on the widest displays. More than that and you'll wind up with one column per row.
❣️ Each version of the code is ready to go out of the box. No need to do any copy-pasting or editing to make them work.
❣️ The DETAILS version of the code is BASIC by default, but you can swap it to BLOCK by replacing the [names, individual] section of the code with the [names, block] section of the BLOCK code.
❣️ If you want the DETAILS lists to be open by default, search for this string of code --
❣️ Consult the comments in the code for where and how to add additional names.
❣️ This code works best with solid colors, but it IS set up so that you can add an image as a background, instead. Replace IMG_URL with an appropriate image to turn the solid default color into an image. Otherwise, leave the placeholder text. You can see a live preview example of this below.
❣️ By default, the font size for items is 11px. This value is declared at the very top of the code (look for 'font-size:11px'). If you'd like larger text, you can go up to about 13px comfortably without the code doing anything too goofy.
❣️ Want to turn individual boxes into links? In the base code, change 'div style="padding:5px;background:#f5909a"' to 'a href="YOUR URL" style="padding:5px;background:#f5909a"'. Also change the following '/div' to '/a'.
❣️ For the BLOCK version, you can add blocks of text OR line items by just adding content between the lj-raw tags. ADDITIONALLY, you can add additional color blocks by copying and pasting the entire [names, block] code.
❣️ COLOR DETAILS:
❣️ 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! If you like what I make, please consider throwing me some dosh on ko-fi!
Slightly edited version of the original entry description follows.
A couple of months ago, someone asked for a cast/roster list that worked similarly to the roster list from a game I ran a few years ago. I accidentally deleted the original request message 😭 and forgot about the request until recently. I seriously apologize to the original requester!! But I hope this code is somewhat useful to you, now.
SLICK LIST is a simple roster code, meant for listing short text strings like character names. On wider resolutions, it'll stack up to 4 columns across, and will flex down to double or single columns to accommodate smaller screens. This code is matchy with my SLICK CHAOS biosheet code.
This code comes in three styles:
- BASIC separates line items by boxes. The image preview at the top of the post is BASIC.
- BLOCK has just one solid "block" for all line items, rather than individual boxes. Live preview at the bottom of this post.
- DETAILS adds collapsible/hideable functionality via the details tag to individual columns. By default it comes in BASIC styling, but you can change it to BLOCK fairly easily.
BLOCK CODE HERE:
DETAILS CODE HERE:
HOW TO USE
❣️ Mind those lj-raw tags!!
❣️ This code is mobile compatible! It is most likely also compatible with InsaneJournal!
❣️ This code is almost completely comment compatible! It'll appear a little more narrow than the in-entry version when posted to a comment.
❣️ By default, all codes come with 4 lists & 2 names per line. You can remove lists or add as many as you want, but these lists will stack 4 across at most. On narrow displays like phone screens and tablets, they will automatically shuffle into rows of lists to accommodate.
❣️ You can customize how wide columns are by going to the COLUMN bit of the code and adjusting the 'max-width:175px' value. A max-width value of 350px will ensure you get 2 columns across per row on the widest displays. More than that and you'll wind up with one column per row.
❣️ Each version of the code is ready to go out of the box. No need to do any copy-pasting or editing to make them work.
❣️ The DETAILS version of the code is BASIC by default, but you can swap it to BLOCK by replacing the [names, individual] section of the code with the [names, block] section of the BLOCK code.
❣️ If you want the DETAILS lists to be open by default, search for this string of code --
details style="max-width:175px;width:100%;" and add the word "open" with no quotes directly to the right of the word details.❣️ Consult the comments in the code for where and how to add additional names.
❣️ This code works best with solid colors, but it IS set up so that you can add an image as a background, instead. Replace IMG_URL with an appropriate image to turn the solid default color into an image. Otherwise, leave the placeholder text. You can see a live preview example of this below.
❣️ By default, the font size for items is 11px. This value is declared at the very top of the code (look for 'font-size:11px'). If you'd like larger text, you can go up to about 13px comfortably without the code doing anything too goofy.
❣️ Want to turn individual boxes into links? In the base code, change 'div style="padding:5px;background:#f5909a"' to 'a href="YOUR URL" style="padding:5px;background:#f5909a"'. Also change the following '/div' to '/a'.
❣️ For the BLOCK version, you can add blocks of text OR line items by just adding content between the lj-raw tags. ADDITIONALLY, you can add additional color blocks by copying and pasting the entire [names, block] code.
❣️ COLOR DETAILS:
- hex code #f5909a; light pink used extensively throughout the code. Please just use find-replace to update this color.
- hex code #242424; dark gray used for the background box, declared under the COLUMN portion of the code.
- hex code #fff; (white) declared at the very top of the base code, for text color.
❣️ 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! If you like what I make, please consider throwing me some dosh on ko-fi!
FAVORITES
AN ITEM
AN ITEM
AN ITEM
AN ITEM
YES!
AN ITEM
AN ITEM
AN ITEM
AN ITEM
MAYBE
AN ITEM
AN ITEM
AN ITEM
AN ITEM
NO THANKS
AN ITEM
AN ITEM
AN ITEM
AN ITEM
HEADER TEXT
Character Name
Character Name
Character Name
Character Name
Character Name
Character Name
Character Name
Character Name
Character Name
Character Name
Character Name
Character Name
Character Name
Character Name
HEADER TEXT
Character Name
Character Name
Character Name
Character Name
Character Name
Character Name
Character Name
Character Name
Character Name
Character Name
Character Name
Character Name
Character Name
Character Name
!!HEADER!!
!!ITEM!!️
!!ITEM!!️
!!ITEM!!️
!!ITEM!!️
!!HEADER!!
!!ITEM!!️
!!ITEM!!️
!!ITEM!!️
!!ITEM!!️
!!HEADER!!
!!ITEM!!️
!!ITEM!!️
!!ITEM!!️
!!ITEM!!️
!!HEADER!!
!!ITEM!!️
!!ITEM!!️
!!ITEM!!️
!!ITEM!!️
no subject
no subject
no subject
no subject
no subject
no subject
no subject
Here's an edited code that'll sit 5 across on an entry page, with all 5 columns loaded in:
no subject
no subject
no subject
i have yet to screw up any of these codes, you explain things so well and everything is so clean and beautiful and yet you can make something minimal so awesome ahhhhHHHHHh
and this code specifically is what made me wanna comment. YOU CAN PUT IT IN THE COMMENTS? wild, dude, wild, i love it.
no subject
HONESTLY I was shocked this one worked in comments LMAO but grids are powerful, I guess.
no subject
no subject
If you'd like, one thing you can try out for readability is wrapping the text in bold, changing it to white, and applying a drop shadow. So, you'd wrap the name in something like this:
<b style="text-shadow: 1px 1px 1px;color:#fff">Character Name</b>This will only work for the plain text and not the user info code (I'm not sure if that can be styled), though.
no subject
no subject
no subject
I'm so glad you are enjoying my codes. It means a lot to receive such kind words!! Thank you, seriously!!
no subject
YESSsss thank you for the tess pattern suggestion, I use so much of their resources and forget there's link a ton more.
no subject
no subject
no subject
no subject