jay, novice human (![[personal profile]](https://www.dreamwidth.org/img/silk/identity/user.png)
10billionghosts) wrote2022-09-07 05:35 pm
10billionghosts) wrote2022-09-07 05:35 pm
Entry tags:
code: chip - a detailed character roster code (UPDATED 9/7/2022)
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:
This code is an alternate card that does not feature a clickable details menu.
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!
no subject
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!!
no subject
thank you so much, though!! i appreciate the help so much, and thank you again for all the really lovely code you provide! 💕
no subject
no subject
thank you so much again!! 💕
no subject
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
no subject