jay, novice human (![[personal profile]](https://www.dreamwidth.org/img/silk/identity/user.png)
10billionghosts) wrote2024-02-10 11:49 pm
10billionghosts) wrote2024-02-10 11:49 pm
Entry tags:
code: SLICK LIST, a roster code
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 📜
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.
By default, this code comes in the style at the top of this post: each line item in its own box. I've also included a variant code for JUST the interior, which allows you to add larger, scaling boxes that can have multiple lines or blocks of text. Check the bottom of this post for some live previews. Mamma Mia, let'sa go.
CODE HERE:
VARIANT LIST BODY CODE:
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.
❣️ The default base code comes with 4 columns, 2 names per line. You can add as many columns as you want, but at max they'll stack 4 across (and min 1 per line on narrow mobile screens).
❣️ Want to use the VARIANT BODY CODE? Replace the section labeled [names, individual] with the [names, block] code.
❣️ Consult the comments in the code for where and how to add additional names.
❣️ This code works best if you just use a solid color for the background of the names section, but it IS set up so that you can add an image background, instead. Replace IMG_URL with an appropriate image to turn the solid default color into an image. Otherwise, leave the placeholder text.
❣️ In the default version, add additional names where indicated in the code by copy-pasting the individual ITEM codes.
❣️ 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'). You can up that to 12px or 13px relatively comfortably, if you'd like text to be larger. Or shrink it if you're into that I guess.
❣️ 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 VARIANT BODY CODE, 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 etnire [names, block] code.
❣️ By default, this code is designed to put 4 columns side by side on wide displays and 1 - 2 columns on mobile displays. You can customize this by going to the COLUMN bit of the code and adjusting the 'max-width:175px' value. You can increase this width to around 350px, which will net you 2 across on desktop, and 1 per row on mobile.
❣️ COLOR DETAILS:
❣️ This code contains a credit link. I'd appreciate if you'd left it in, but you can remove it if you'd like!
❣️ I love peeking at what people do with my codes, so feel free to comment if you use! If you'd like, you can also donate to my ko-fi!
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.
By default, this code comes in the style at the top of this post: each line item in its own box. I've also included a variant code for JUST the interior, which allows you to add larger, scaling boxes that can have multiple lines or blocks of text. Check the bottom of this post for some live previews. Mamma Mia, let'sa go.
VARIANT LIST BODY CODE:
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.
❣️ The default base code comes with 4 columns, 2 names per line. You can add as many columns as you want, but at max they'll stack 4 across (and min 1 per line on narrow mobile screens).
❣️ Want to use the VARIANT BODY CODE? Replace the section labeled [names, individual] with the [names, block] code.
❣️ Consult the comments in the code for where and how to add additional names.
❣️ This code works best if you just use a solid color for the background of the names section, but it IS set up so that you can add an image background, instead. Replace IMG_URL with an appropriate image to turn the solid default color into an image. Otherwise, leave the placeholder text.
❣️ In the default version, add additional names where indicated in the code by copy-pasting the individual ITEM codes.
❣️ 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'). You can up that to 12px or 13px relatively comfortably, if you'd like text to be larger. Or shrink it if you're into that I guess.
❣️ 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 VARIANT BODY CODE, 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 etnire [names, block] code.
❣️ By default, this code is designed to put 4 columns side by side on wide displays and 1 - 2 columns on mobile displays. You can customize this by going to the COLUMN bit of the code and adjusting the 'max-width:175px' value. You can increase this width to around 350px, which will net you 2 across on desktop, and 1 per row on mobile.
❣️ 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, but you can remove it if you'd like!
❣️ I love peeking at what people do with my codes, so feel free to comment if you use! If you'd like, you can also donate to my 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
no subject