code: chip - a detailed character roster code (UPDATED 9/7/2022)

[10billionghosts]

LIAM
BLUMENTHAL
matt bennett

+ +

+

The Moon
squad xii, second
Hahaiah, Angel of Refuge

SAILOR
MOON
tsukino usagi

+ +

+

in the name of the moon
i'll punish you!
★★★

CHARACTER
NAME
pb name

+ +

★

code

UPDATE 9/7/2022: My sincere apologies! I didn't realize just how broken this code was, but I think I've taken care of it. Chip has been significantly rewritten to account for cross-browser issues! In the process, I've also done some general clean up. The code is now insanejournal compatible out of the box, (hopefully) no longer experiencing overflow issues, better commented, and aligning as intended.

If you were using this code prior to 9/7/2022, I strongly urge you to completely redo the entry you were using it for so that the code doesn't show as broken on some browsers. I apologize for the inconvenience.

original (9/19/2021) description follows...
This Pantone chip-inspired directory/character list code features a hidden menu (press the plus sign at the bottom) that you can add whatever you'd like to! It auto-scales, so you can add a fair bit of text. Good for things like stats, memes, brief blurbs, minimalist character relationship charts, playlists, the next great novel -- whatever you'd like.

Below the base code, I've included an alternate code that does not have an expanding menu (that's the card with the star at the bottom), adding a simpler option for game cast lists.

Here's the base code:

<lj-raw><div style="max-width:800px;width:100%;margin:0 auto;display:flex;flex-wrap:wrap;justify-content:center;align-items:start;gap:30px;"> <!-- PASTE ALL CARDS BELOW THIS LINE --> <!-- CARD --> <div style="width:230px;padding:20px 0 0;border:1px solid #f2f2f2;display:flex;flex-wrap:wrap;justify-content:center;align-items:start;gap:5px;background:#fff;"> <!-- PORTRAIT: change IMG_URL --> <div style="width:200px;height:295px;background:#ccc url('IMG_URL')center;background-size:cover;"> </div> <!-- PORTRAIT: end --> <!-- CHAR INFO: account for text & #URL_HERE --> <div style="width:150px;font-family:arial;font-weight:bold;font-size: clamp(17px, 1vw, 20px);letter-spacing:1px;line-height:1;color:#000;"></lj-raw>!!CHAR!! !!NAME!! <span style="font-weight:normal;font-style:italic;font-size:10px;color:#474747;">!!pb name!!</span><lj-raw></div> <div style="width:50px;font-family:arial, sans serif;font-weight:bold;font-size:20px;letter-spacing:1px;line-height:1.5;text-align:right;"> <a href="#URL_HERE" title="link description" style="padding:1px 5px;text-decoration:none;background:#ccc;color:#000">+</a> <a href="#URL_HERE" title="link description" style="padding:1px 5px;text-decoration:none;background:#ccc;color:#000">+</a> </div> <!-- CHAR INFO: end --> <!-- COLLAPSIBLE START --> <div style="width:230px;background:#eee;"><details><summary style="cursor:pointer;text-align:center;font-family:arial, sans serif;font-weight:bold;text-align:center;display:flex;justify-content:center;align-items:center;background:#ccc;color:#000;">+</summary> <!-- COLLAPSIBLE: content --> <div style="width:190px;margin:0 auto;padding:7px 0;font-family:arial, sans serif;font-size:11px;color:#000;"> </lj-raw>this space can be used for all sorts of information! Get creative!<lj-raw> </div></details></div> <!-- COLLAPSIBLE: content end --> <!-- COLLAPSIBLE END --> </div> <!-- CARD name: END --> <!-- PASTE ALL CARDS ABOVE THIS LINE --> <!-- CREDIT --> <div style="width:100%;margin-top:-15px;text-align:right;font-size:10px;color:#ddd"><a title="code credit!" href="http://10billionghosts.dreamwidth.org" style="text-decoration:none;color:#ddd;">code</a></div> <!-- CREDIT --> </div></lj-raw>

This code is an alternate card that does not feature a clickable details menu.

<lj-raw><div style="max-width:800px;width:100%;margin:0 auto;display:flex;flex-wrap:wrap;justify-content:center;align-items:start;gap:30px;"> <!-- PASTE ALL CARDS BELOW THIS LINE --> <!-- NO MENU CARD: Name --> <div style="width:230px;padding:20px 0 0;border:1px solid #f2f2f2;display:flex;flex-wrap:wrap;justify-content:center;align-items:start;gap:5px;background:#fff;"> <!-- PORTRAIT: change IMG_URL --> <div style="width:200px;height:295px;background:#ccc url('IMG_URL')center;background-size:cover;"> </div> <!-- PORTRAIT: end --> <!-- CHAR INFO: account for text & #URL_HERE --> <div style="width:150px;font-family:arial;font-weight:bold;font-size: clamp(17px, 1vw, 20px);letter-spacing:1px;line-height:1;color:#000;"></lj-raw>!!CHAR!! !!NAME!! <span style="font-weight:normal;font-style:italic;font-size:10px;color:#474747;">!!pb name!!</span><lj-raw></div> <div style="width:50px;font-family:arial, sans serif;font-weight:bold;font-size:20px;letter-spacing:1px;line-height:1.5;text-align:right;"> <a href="#URL_HERE" title="link description" style="padding:1px 5px;text-decoration:none;background:#ccc;color:#000">+</a> <a href="#URL_HERE" title="link description" style="padding:1px 5px;text-decoration:none;background:#ccc;color:#000">+</a> </div> <!-- CHAR INFO: end --> <!-- BOTTOM BAR --> <div style="width:230px;margin-top:5px;background:#ccc;text-align:center;font-weight:bold;color:#000;font-family:arial, sans serif;">★</div> <!-- BOTTOM BAR END --> </div> <!-- NO MENU CARD name: END --> <!-- PASTE ALL CARDS ABOVE THIS LINE --> <!-- CREDIT --> <div style="width:100%;margin-top:-15px;text-align:right;font-size:10px;color:#ddd"><a title="code credit!" href="http://10billionghosts.dreamwidth.org" style="text-decoration:none;color:#ddd;">code</a></div> <!-- CREDIT --> </div></lj-raw>

HOW TO USE
❣️ Mind the lj-raw tags!!

❣️ This code is mobile friendly and insanejournal friendly out of the box!

❣️ For best results, paste into a new blank post behind an lj-cut.

❣️ This code will max out at aligning 3 cards across. On mobile, it should show as one card per line. If you would like to fiddle with showing fewer than 3 cards across, adjust that very first "width" value at the top of the card -- make it smaller.

❣️ If you would like to mix both the hidden menu and the no menu options, make sure you are ONLY using one instance of the code's outer wrapper (that's the part that says "ALL CARDS BELOW / ABOVE THIS LINE") and post cards within that one wrapper.

❣️ Change IMG_URL to a picture of your choice to customize the portrait. It should auto-fit to the space.

❣️ hex code #000 was used for almost all fonts, so replace each #000 hex code with an appropriate new color hex code if you'd like to change the font color.

❣️ hex code #474747 is a dark gray used for the !!pb name!! field. Adjust this value to change the color of that text.

❣️ background:#ccc was used for the background color of the + sign links and bottom bar. Adjust every instance of #ccc to change those colors.

❣️ background:#eee is a very light gray and was used for the background of the hidden details menu. Adjust this value to change that background color.

❣️ Change #URL_HERE to an appropriate URL. Optionally look for title="link description" and change the link description to the name of the link.

❣️ 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!

Comments

[ninjawon]

this code is so cute... thanks for making it!! time to overhaul my muselist for the nth time

[10billionghosts]

Going thru and replying to old comments I missed. Thank you so much and apologies for the intensely late response!

[elaborately]

Hey! I love this and I'm using it for my own muselist, but I thought you might wanna know, I think there's a bit of an error/typo in the code for the color of the character name? With the colons and the semi-colons.

This bit at the end:
margin-top:5px:color#000;
?

[10billionghosts]

Oop! Sure is. The one after 5px should be a semi-colon. Thank you for the heads up!!

[elaborately]

No problem! I think maybe also a colon is missing between color and # there?

Ahhh, you said you like seeing what ppl did with your codes so here is where I put it btw!

[10billionghosts]

Replying to this... months later I'm so sorry lmao. Thank you for noticing these and bringing them to my attention! I appreciate your help with finding these issues. I just did a full clean up on the code (amazing how much you improve in a year 😩). It should be a lot cleaner/work more smoothly now, if you have any desire to update from the old version. Lovely work, by the way!! c:

[elaborately]

I had no idea it was having issues on other browsers considering I... Do all my coding on mobile (I know, I know, I'm a masochist). But I redid it from scratch with your new coding! Thanks!!

[wizardly]

hi!! so, first off, i want to say that i adore this code, and i've been getting a really lovely muse page set up with it!

i've run into a small bug, tho: for some reason, i'm getting some overflow of the drop-down box, where it juts well past the edge of the main box area :0 have you seen that before, or maybe know what would cause something like that? my knowledge of code is super rudimentary still, so i may just be missing something that's making it act a bit funky. (i'd be happy to link my page for an example, if it's a new issue!)

[10billionghosts]

Thank you so much! I love your muse code.

Oh, I didn't notice this issue. Thanks for pointing it out! It does look like I didn't account for some cross-browser stuff. (Browsers and sites all treat that collapsible thing very differently) I'll take a look at it this weekend and see if I can't get it fixed this week. I'll let you know when it's updated by replying to you here, and fixing should (hopefully) be as simple as copy pasting over a few lines of code!!

[wizardly]

ohhh, that makes sense! i hadn't even considered it might be a browser thing - i use firefox, if that helps out at all? :O

thank you so much, though!! i appreciate the help so much, and thank you again for all the really lovely code you provide! 💕

[10billionghosts]

Whew! Fixed now! SADLY it wasn't just tweaking one line of code lmao BUT the fixed and cleaned up version is available in the main post now. c:

[wizardly]

oh no omg! i'm sorry you had to go through so much, but the code looks great!! the little navigation labels on each section help a ton (esp with my dyslexia throwing hands with me while coding sklhdfls), and the box error's no longer coming up! :D

thank you so much again!! 💕

[10billionghosts]

Aaaa I'm so glad the labeling helps! I really should go back and adjust the labeling on old codes. I'll add that to my eventual to-do list.

YOUR ROSTER LOOKS SO GOOD!! Thank you for pointing out the issues. I've always liked this code and honestly didn't realize how janky it was before lmfao

[wizardly]

thank you omg!!! 💕 this code is honestly one of my favorite muse list codes i've run into on here, so i'm really glad i could help out in any way to make working on it easier!

[inkcharm]

This is such a lovely code. I'm using edited versions of it here and here, and I just love how easy it is to use and how gorgeous it looks. Thank you so much for sharing <3

[10billionghosts]

Oooh! I really like the color customization you did! Very pretty c: Glad you enjoy the code and I'm so glad it's easy to use. Thank you!

[amber]

i'm using this here! i made a bunch of changes but i love it so so much, especially since i could never have coded the mobile wraparound on my own and i use my phone all the time. anyway thank you so so so so sooooo much for this inspiring and cool muselist!

[10billionghosts]

Oooh! I really like this a ton! 👀 A nice, compact variant.

[batteryacid]

Not quite a muse list, but I used this code here for my character's in-game farm. I love the two options for 'cards' and how clean everything looks. :)