code: PEEPERS, a collapsing muse list code

[10billionghosts]

Took a wee coding break after releasing SALAD, and now I'm BACK! I'm dipping my toes into canon/quasi-canon PSLing for the first time, and so I made this character list/muse box code for me (rather than the spirit of the internet taking control of my consciousness and compelling me to create and release something, as is usually the case). Here's PEEPERS!

PEEPERS is a character/muse list code for people like me, who hate taking up space but still want to make dumbfuck jokes for folks to find if they're willing to click around. Each "card" (the character bars) will expand down when clicked, providing a space for additional content. By default, I've provided three prestyled options:

• OC BAR - Prioritizes line items over text space, comes with a link list.


• CANON BAR - Prioritizes block text space, comes with a progress bar.


• PLAYLIST BAR - Simple styling for a song list + link.

To start, grab the outer wrapper code here. It also contains one copy of the header code I made, but you can replace that with any text header/horizontal divider!

OUTER WRAPPER (grab me first!):
<lj-raw><div style="max-width:900px;width:100%;display:flex;flex-wrap:wrap;justify-content:center;align-items:start;align-content:start;gap:20px;font-family:helvetica, arial, sans serif;font-size:12px;"> <!-- items below this point --> <!-- HEADER --> <div style="width:100%;display:grid;grid-template-columns:1fr;grid-template-rows:10px 12px;"> <div style="grid-column-start:1;grid-column-end:2;grid-row-start:2;grid-row-end:3;clip-path: polygon(2% 0, 100% 0%, 98% 100%, 0% 100%);background:#b9d8e5"></div> <div style="box-sizing:border-box;transform:rotate(0deg);grid-column-start:1;grid-column-end:2;grid-row-start:1;grid-row-end:3;padding-left:20px;font-size:25px;line-height:.8;font-weight:bold;font-style:italic;text-shadow:1px 1px 0 #d7edf7, 2px 2px 0 #d7edf7;color:#347a99">HEADER TEXT</div> </div> <!-- HEADER --> <!-- items above this point --> <!-- credit --> <div style="width:100%;margin:5px auto;text-align:right;font-size:10px;"><a title="code credit!" href="http://10billionghosts.dreamwidth.org" style="text-decoration:none;color:#ccc;">code</a></div> <!-- credit --> </div></lj-raw>

Once you've grabbed the outer wrapper above, check the HOW TO USE section, and pick up the code for the card style you want at the bottom of this post.

HOW TO USE:

❣️ Mind those lj-raw tags!!

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

❣️ Be sure to grab the OUTER WRAPPER code above first! This code will ... lmao SO super not work without it. I'm not kidding.

❣️ Once you've got the outer wrapper pasted into a fresh new post, paste as many cards as you'd like into the code where indicated.

❣️ By default, this code stacks three cards across on wider displays and will shuffle down to one per line on mobile. You can set it to max two across by going to the top of the OUTER WRAPPER code and changing max-width:900px to max-width:600px.

❣️ Feel free to delete the default header entirely!

❣️ I'd definitely suggest editing the code comments on this one; each card is labeled ITEM: name, where name is meant to be changed to a title for that particular card. This'll make it easier for you to edit stuff later. I swear.

❣️ READ THIS PART, IT'S ABOUT MAKING SURE THE IMAGE LOOKS GOOD EASILY: While you can put ANY image url into the IMG_URL placeholder and it will technically work, for BEST AND EASIEST RESULTS, you'll want to resize and crop an image yourself for best fit.

• Firstly, if you're using fanart, please be sure to check the original artist's use policy. Not every artist wants you using their art, let alone editing it/cropping it. Please respect artist use policies!


• Take the image you'd like to use, resize and crop it so that it is 275px width x 75px height. A quick search of "image cropping" will turn up a ton of online resources to accomplish this if you don't have access to an image editing program!


• Host your image somewhere like imgur, and replace IMG_URL with the URL to that image.

❣️ READ THIS PART, PART II: If you absolutely do not want to fuss with cropping an image, you can attempt to fenangle positioning manually...

• Try adjusting the background-size: value. By default it is set to cover. What value works best depends entirely on the image, but you'll most likely want to change it to a percent value. For example, 350%.


• Try adjusting the background positioning. Background positioning is sort of math-y, and I am absolutely not equipped to explain it well lmao, but you can read about it here.


• A combination of both of these can get you very nice results! To test the code, on my own personal musebox I used a combination of cropped images and code-positioned images, and I don't think it's obvious from a glance which is which.

❣️ CUSTOMIZING THE CHARACTER NAME / TITLE TEXT:

• All of this is done under the part of the code that says "character name / title"


• By default, the title text will align to the right side of the card. To change this, change justify-content: from end to either start (for left aligned title) or center (for centered title).


• You may need to change the font color for visibility reasons. If so, change the hex value of color:#fff to whatever color you'd like to use.


• You may need to fiddle with the text-shadow:0 0 1px #000 value to improve visibility or just cuz. A good alternative is 1px 1px 0 #000. Here's a text-shadow value generator that you can use if you aren't sure how text shadow works. I'd recommend keeping all number values small.


• If you are a small caps hater, delete font-variant:small-caps entirely to restore normie letters.

❣️ Every code snippet within the {hidden content} portion of each card is optional and can be freely mix-n-matched and moved around. Want a link list at the top? Slap a links code snippet at the start of the {hidden content} subsection!

❣️ There are 5 total code snippet types in PEEPERS:

• line item, a single line for a short string of text, like "name", "canon", "pronouns", etc.


• blurb, a space for a block of text; put as much text as you want.


• links, coding for a simple link list; links will size themselves automatically as you add them, max 3 per line. Found in the OC BAR by default.


• progress, a progress bar that you can customize; use it for Confidence or Interest or CR or whatever you'd like.


• song, a single line styled for song/artist, specifically, but I bet you could use it as a thread tracker too if you wanted.

❣️ Don't forget to change the #URL_HERE placeholder text if you use the link list!

❣️ For the song snippet, you can completely delete the song lyrics part of the code if you just want song name and artist.

❣️ CUSTOMIZING THE PROGRESS BAR CODE:

• It's set to 50% by default.


• Under the part of the code that says 'adjust width value here', change the default width:50% to another % value.


• If you want to set it to 100%, change border-radius:15px 0 0 15px; to border-radius:15px;.


• Don't forget to update the labeling under the part of the code that says 'describe value here'; it's INTEREST and 50% by default.

❣️ HERE ARE YOUR DEFAULT HEX CODES:

• hex code #fff, white, is used throughout the code in a variety of different ways, so don't use find-replace on this one.


• hex code #000, black, is used throughout the code, mostly for default shadows. should be safe to find-replace.


• hex code #347a99, is the default color for text backgrounds, the progress bar, and the text in the default header. Safe to use find-replace to change these quick.


• hex code #134b63, default text code, declared at the top of each card.


• hex code #b9d8e5, used only in the header bar, as the line color.


• hex code #d7ecf7, a very light blue, used only in the header bar, as the drop shadow on the text.


• radial-gradient(circle, rgba(246,246,246,1) 0%, rgba(235,235,235,1) 100%), this is a gray gradient used in the background of the details dropdown; use a css gradient generator to change this color, if you'd like.

❣️ The font is declared in the outer wrapper code. Search for font-family: to adjust it.

❣️ font-size: is declared once in the outer wrapper and again in certain parts of the individual cards. Use the search function to make sure you've updated all font sizes if you want to change them.

❣️ text-align:justify is the default alignment setting. Feel free to change this to left/right/center! I just like justified text.

❣️ 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'd like, you can also donate to my ko-fi!

Pick up individual card codes below

warrior of light

canon:

canon source

name:

character name

quick notes:

Jelly-o candy halvah caramels caramels topping jelly wafer. Jujubes chocolate cake chocolate cake icing candy marshmallow. Pudding oat cake dessert bonbon cotton candy brownie dragée gummi bears lemon drops.

Gingerbread icing marshmallow tiramisu bear claw marshmallow dragée. Gingerbread candy jelly soufflé dessert bear claw tart sugar plum.

profile

OC BAR CODE: <!-- ITEM: name --> <div style="box-sizing:border-box;max-width:275px;width:100%;min-height:85px;display:grid;grid-template-columns:.5fr 1fr;grid-template-rows:75px 1fr 10px;gap:0;color:#134b63"> <!-- [graphics] --> <div style="transform:rotate(0deg);grid-column-start:1;grid-column-end:3;grid-row-start:1;grid-row-end:2;padding:3px;border-radius:5px;box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;background:#fff;"> <div style="width:100%;height:100%;border-radius:5px;background:#ddd url('IMG_URL')center;background-size:cover;"></div></div> <!-- end [graphics] --> <!-- [text content] --> <details style="grid-column-start:1;grid-column-end:3;grid-row-start:1;grid-row-end:3;"> <!-- character name / title --> <summary style="transform:rotate(0deg);box-sizing:border-box;cursor:pointer;width:100%;padding:5px 10px;height:75px;display:flex;flex-wrap:wrap;justify-content:end;align-items:end;font-weight:bold;font-variant:small-caps;text-shadow:0 0 1px #000;color:#fff;">!!header/title text!!</summary> <!-- end character name / title --> <div style="box-sizing:border-box;width:100%;margin-top:-10px;padding:20px 10px 10px;display:flex;flex-wrap:wrap;justify-content:start;align-items:start;align-content:start;gap:7px;border-radius:0 0 10px 10px;background: radial-gradient(circle, rgba(246,246,246,1) 0%, rgba(235,235,235,1) 100%);"> <!-- {hidden content} goes below this line--> <!-- line item --> <div style="box-sizing:border-box;width:100%;display:grid;grid-template-columns:auto 1fr;"> <div style="box-sizing:border-box;padding:0 10px;display:flex;align-items:center;font-weight:bold;text-transform:lowercase;font-variant:small-caps;border-radius:12px;background:#347a99;color:#fff;">item:</div> <div style="box-sizing:border-box;padding:0 5px;text-align:right;">answer</div></div> <!-- end line item --> <!-- line item --> <div style="box-sizing:border-box;width:100%;display:grid;grid-template-columns:auto 1fr;"> <div style="box-sizing:border-box;padding:0 10px;display:flex;align-items:center;font-weight:bold;text-transform:lowercase;font-variant:small-caps;border-radius:12px;background:#347a99;color:#fff;">item:</div> <div style="box-sizing:border-box;padding:0 5px;text-align:right;">answer</div></div> <!-- end line item --> <!-- blurb --> <fieldset style="width:100%;padding:0;margin:5px 0;border:0;"><label style="box-sizing:border-box;width:37%;padding:0 10px;margin-bottom:4px;display:flex;align-items:center;font-weight:bold;text-transform:lowercase;font-variant:small-caps;border-radius:12px;background:#347a99;color:#fff;">quick notes:</label> <div style="box-sizing:border-box;width:100%;padding:0 7px;font-size:11px;text-align:justify;line-height:1.2;"></lj-raw>!! your content here!!<lj-raw></div> </fieldset> <!-- end blurb --> <!-- links --> <div style="box-sizing:border-box;width:100%;display:grid;grid-template-columns:auto auto auto;justify-content:center;"> <a href="#URL_HERE" style="text-decoration:none;width:auto;padding:0 10px;text-align:center;font-weight:bold;text-transform:lowercase;font-variant:small-caps;border-radius:12px;background:#347a99;color:#fff;">link</a> </div> <!-- end links --> <!-- {hidden content} goes above this line --> </div></details> <!-- end [text content] --> </div> <!-- end ITEM: name -->

veritas ratio

canon:

honkai star rail

quick notes:

Sugar plum jelly wafer tootsie roll tiramisu pie chocolate bar danish. Pudding powder halvah cupcake powder. Wafer topping wafer macaroon chocolate shortbread carrot cake sugar plum.

Jelly sweet roll lollipop sweet roll wafer gummies marshmallow jelly-o. Shortbread jelly jelly jujubes jelly beans dessert. Icing tootsie roll liquorice chupa chups jelly sweet roll.

confidence

75% (voice testing)

CANON BAR CODE: <!-- ITEM: name --> <div style="box-sizing:border-box;max-width:275px;width:100%;min-height:85px;display:grid;grid-template-columns:.5fr 1fr;grid-template-rows:75px 1fr 10px;gap:0;color:#134b63"> <!-- [graphics] --> <div style="transform:rotate(0deg);grid-column-start:1;grid-column-end:3;grid-row-start:1;grid-row-end:2;padding:3px;border-radius:5px;box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;background:#fff;"> <div style="width:100%;height:100%;border-radius:5px;background:#ddd url('IMG_URL')center;background-size:cover;"></div></div> <!-- end [graphics] --> <!-- [text content] --> <details style="grid-column-start:1;grid-column-end:3;grid-row-start:1;grid-row-end:3;"> <!-- character name / title --> <summary style="transform:rotate(0deg);box-sizing:border-box;cursor:pointer;width:100%;padding:5px 10px;height:75px;display:flex;flex-wrap:wrap;justify-content:end;align-items:end;font-weight:bold;font-variant:small-caps;text-shadow:0 0 1px #000;color:#fff;">!!header/title text!!</summary> <!-- end character name / title --> <div style="box-sizing:border-box;width:100%;margin-top:-10px;padding:20px 10px 10px;display:flex;flex-wrap:wrap;justify-content:start;align-items:start;align-content:start;gap:7px;border-radius:0 0 10px 10px;background: radial-gradient(circle, rgba(246,246,246,1) 0%, rgba(235,235,235,1) 100%);"> <!-- {hidden content} goes below this line--> <!-- line item --> <div style="box-sizing:border-box;width:100%;display:grid;grid-template-columns:auto 1fr;"> <div style="box-sizing:border-box;padding:0 10px;display:flex;align-items:center;font-weight:bold;text-transform:lowercase;font-variant:small-caps;border-radius:12px;background:#347a99;color:#fff;">item:</div> <div style="box-sizing:border-box;padding:0 5px;text-align:right;">answer</div></div> <!-- end line item --> <!-- blurb --> <fieldset style="width:100%;padding:0;margin:5px 0;border:0;"><label style="box-sizing:border-box;width:37%;padding:0 10px;margin-bottom:4px;display:flex;align-items:center;font-weight:bold;text-transform:lowercase;font-variant:small-caps;border-radius:12px;background:#347a99;color:#fff;">quick notes:</label> <div style="box-sizing:border-box;width:100%;padding:0 7px;font-size:11px;text-align:justify;line-height:1.2;"></lj-raw>!! your content here!!<lj-raw></div> </fieldset> <!-- end blurb --> <!-- progress --> <div style="box-sizing:border-box;width:100%;display:grid;grid-template-columns:auto 1fr;gap:0;"> <div style="box-sizing:border-box;grid-column-start:1;grid-column-end:3;height:15px;padding:2px;overflow:hidden;border-radius:15px;border:1px solid #347a99;background:#fff;"> <!-- ADJUST WIDTH VALUE HERE --> <div style="box-sizing:border-box;width:50%;height:100%;border-radius:15px 0 0 15px;background:#347a99"></div></div> <!-- DESCRIBE VALUE HERE --> <div style="box-sizing:border-box;padding:0 5px;line-height:1.1;font-weight:bold;text-transform:lowercase;font-variant:small-caps;color:#347a99">interest</div> <div style="box-sizing:border-box;padding:0 5px;line-height:1.1;font-size:10px;text-align:right;">50%</div> </div> <!-- end progress --> <!-- {hidden content} goes above this line --> </div></details> <!-- end [text content] --> </div> <!-- end ITEM: name -->

playlist

SONG TITLE ○ Artist Name

song lyrics song lyrics song lyrics song lyrics song lyrics song lyrics song lyrics song lyrics song lyrics song lyrics song lyrics song lyrics song lyrics song lyrics

SONG TITLE ○ Artist Name

song lyrics song lyrics song lyrics song lyrics song lyrics song lyrics song lyrics song lyrics song lyrics song lyrics song lyrics song lyrics song lyrics song lyrics

SONG TITLE ○ Artist Name

song lyrics song lyrics song lyrics song lyrics song lyrics song lyrics song lyrics song lyrics song lyrics song lyrics song lyrics song lyrics song lyrics song lyrics

playlist

PLAYLIST BAR CODE: <!-- ITEM: name --> <div style="box-sizing:border-box;max-width:275px;width:100%;min-height:85px;display:grid;grid-template-columns:.5fr 1fr;grid-template-rows:75px 1fr 10px;gap:0;color:#134b63"> <!-- [graphics] --> <div style="transform:rotate(0deg);grid-column-start:1;grid-column-end:3;grid-row-start:1;grid-row-end:2;padding:3px;border-radius:5px;box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;background:#fff;"> <div style="width:100%;height:100%;border-radius:5px;background:#ddd url('IMG_URL')center;background-size:cover;"></div></div> <!-- end [graphics] --> <!-- [text content] --> <details style="grid-column-start:1;grid-column-end:3;grid-row-start:1;grid-row-end:3;"> <!-- character name / title --> <summary style="transform:rotate(0deg);box-sizing:border-box;cursor:pointer;width:100%;padding:5px 10px;height:75px;display:flex;flex-wrap:wrap;justify-content:end;align-items:end;font-weight:bold;font-variant:small-caps;text-shadow:0 0 1px #000;color:#fff;">!!header/title text!!</summary> <!-- end character name / title --> <div style="box-sizing:border-box;width:100%;margin-top:-10px;padding:20px 10px 10px;display:flex;flex-wrap:wrap;justify-content:start;align-items:start;align-content:start;gap:7px;border-radius:0 0 10px 10px;background: radial-gradient(circle, rgba(246,246,246,1) 0%, rgba(235,235,235,1) 100%);"> <!-- {hidden content} goes below this line--> <!-- song --> <div style="width:100%;padding:0 7px;text-align:center;"><b>SONG TITLE</b> ○ <i>Artist Name</i></div> <div style="width:90%;margin:-4px auto 5px;text-align:center;font-size:10px;"></lj-raw>song lyrics song lyrics song lyrics song lyrics song lyrics song lyrics song lyrics song lyrics song lyrics song lyrics song lyrics song lyrics song lyrics song lyrics <lj-raw></div> <!-- end song --> <!-- song --> <div style="width:100%;padding:0 7px;text-align:center;"><b>SONG TITLE</b> ○ <i>Artist Name</i></div> <div style="width:90%;margin:-4px auto 5px;text-align:center;font-size:10px;"></lj-raw>song lyrics song lyrics song lyrics song lyrics song lyrics song lyrics song lyrics song lyrics song lyrics song lyrics song lyrics song lyrics song lyrics song lyrics <lj-raw></div> <!-- end song --> <!-- song --> <div style="width:100%;padding:0 7px;text-align:center;"><b>SONG TITLE</b> ○ <i>Artist Name</i></div> <div style="width:90%;margin:-4px auto 5px;text-align:center;font-size:10px;"></lj-raw>song lyrics song lyrics song lyrics song lyrics song lyrics song lyrics song lyrics song lyrics song lyrics song lyrics song lyrics song lyrics song lyrics song lyrics <lj-raw></div> <!-- end song --> <!-- links --> <div style="box-sizing:border-box;width:100%;display:grid;grid-template-columns:auto auto auto;justify-content:center;"> <a href="#URL_HERE" style="text-decoration:none;width:auto;padding:0 10px;text-align:center;font-weight:bold;text-transform:lowercase;font-variant:small-caps;border-radius:12px;background:#347a99;color:#fff;">playlist</a> </div> <!-- end links --> <!-- {hidden content} goes above this line --> </div></details> <!-- end [text content] --> </div> <!-- end ITEM: name -->

Comments

[panicstrickyn]

Holy shit you're on a roll. ❤️👀👀👀👀 I'm gonna use this like asap tyty!

[10billionghosts]

I accidentally added a ton of little scrap codes to my unfinished pile in the last 2 weeks too lmao so more may be coming. THANK YOU!! It's a little Code Dense but hopefully still easy to use.

[lofivibe]

Ahhhh I love this one (the playlist is especially choice)! Such a neat idea 🙏

[10billionghosts]

Thank you!! 😊 Hope it is easy to use!

[boltund]

so many uses, so beautiful

[10billionghosts]

🥰 THANK YOU! I'm glad you like it!!

[craftings]

I just happened upon this and oh my god I love everything about it SO MUCH

This will be a fantastic little cr chart/character blurb thing to work on in the future, I appreciate you so much LMAO

[10billionghosts]

ahhhh! I'm glad you like it!! :] Thank you!!

YESS it feels very handy for CR/blurb stuff. It's a pretty simple code but I'm so happy it's turned out fairly dynamic.

[lenabee]

This is really cool! Is there a way to make the images taller? Like mayber closer to 150px tall?

[10billionghosts]

Yes! It requires a few different specific tweaks, so I just went ahead and made them myself. This should give you a 150px height image space. :]

<!-- ITEM: name --> <div style="box-sizing:border-box;max-width:275px;width:100%;min-height:150px;display:grid;grid-template-columns:.5fr 1fr;grid-template-rows:140px 1fr 10px;gap:0;color:#134b63"> <!-- [graphics] --> <div style="transform:rotate(0deg);grid-column-start:1;grid-column-end:3;grid-row-start:1;grid-row-end:2;padding:3px;border-radius:5px;box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;background:#fff;"> <div style="width:100%;height:100%;border-radius:5px;background:#ddd url('IMG_URL')center;background-size:cover;"></div></div> <!-- end [graphics] --> <!-- [text content] --> <details style="grid-column-start:1;grid-column-end:3;grid-row-start:1;grid-row-end:3;"> <!-- character name / title --> <summary style="transform:rotate(0deg);box-sizing:border-box;cursor:pointer;width:100%;padding:5px 10px;height:140px;display:flex;flex-wrap:wrap;justify-content:end;align-items:end;font-weight:bold;font-variant:small-caps;text-shadow:0 0 1px #000;color:#fff;">!!header/title text!!</summary> <!-- end character name / title --> <div style="box-sizing:border-box;width:100%;margin-top:-10px;padding:20px 10px 10px;display:flex;flex-wrap:wrap;justify-content:start;align-items:start;align-content:start;gap:7px;border-radius:0 0 10px 10px;background: radial-gradient(circle, rgba(246,246,246,1) 0%, rgba(235,235,235,1) 100%);"> <!-- {hidden content} goes below this line--> <!-- line item --> <div style="box-sizing:border-box;width:100%;display:grid;grid-template-columns:auto 1fr;"> <div style="box-sizing:border-box;padding:0 10px;display:flex;align-items:center;font-weight:bold;text-transform:lowercase;font-variant:small-caps;border-radius:12px;background:#347a99;color:#fff;">item:</div> <div style="box-sizing:border-box;padding:0 5px;text-align:right;">answer</div></div> <!-- end line item --> <!-- blurb --> <fieldset style="width:100%;padding:0;margin:5px 0;border:0;"><label style="box-sizing:border-box;width:37%;padding:0 10px;margin-bottom:4px;display:flex;align-items:center;font-weight:bold;text-transform:lowercase;font-variant:small-caps;border-radius:12px;background:#347a99;color:#fff;">quick notes:</label> <div style="box-sizing:border-box;width:100%;padding:0 7px;font-size:11px;text-align:justify;line-height:1.2;"></lj-raw>!! your content here!!<lj-raw></div> </fieldset> <!-- end blurb --> <!-- progress --> <div style="box-sizing:border-box;width:100%;display:grid;grid-template-columns:auto 1fr;gap:0;"> <div style="box-sizing:border-box;grid-column-start:1;grid-column-end:3;height:15px;padding:2px;overflow:hidden;border-radius:15px;border:1px solid #347a99;background:#fff;"> <!-- ADJUST WIDTH VALUE HERE --> <div style="box-sizing:border-box;width:50%;height:100%;border-radius:15px 0 0 15px;background:#347a99"></div></div> <!-- DESCRIBE VALUE HERE --> <div style="box-sizing:border-box;padding:0 5px;line-height:1.1;font-weight:bold;text-transform:lowercase;font-variant:small-caps;color:#347a99">interest</div> <div style="box-sizing:border-box;padding:0 5px;line-height:1.1;font-size:10px;text-align:right;">50%</div> </div> <!-- end progress --> <!-- {hidden content} goes above this line --> </div></details> <!-- end [text content] --> </div> <!-- end ITEM: name -->

[chaosandkindness]

Hi! Once again so awesome! I am messing with it here. Is there a way for the bubbles to be clickable links instead of just buttons?

[10billionghosts]

Heya! Clarifying question, did you mean you want the Canon/App/Inbox/etc. fields to also be links the same as the "Journal" link? Or did you mean you want them to be styled more traditionally like links (with the underline) rather than like buttons? (Does that make sense? dfjhdla)

[chaosandkindness]

Hi! The first one, please.

[10billionghosts]

Hey! Thanks for your patience. So! If you want to change those items into links, replace each line item you want in the code with this:

<!-- line item --> <div style="box-sizing:border-box;width:100%;display:grid;grid-template-columns:auto 1fr;"> <a href="#URL_HERE" style="text-decoration:none;width:auto;padding:0 10px;text-align:center;font-weight:bold;text-transform:lowercase;font-variant:small-caps;border-radius:12px;background:#347a99;color:#fff;">item:</a> <div style="box-sizing:border-box;padding:0 5px;text-align:right;">answer</div></div> <!-- end line item -->

You can customize URL, color, etc. :]