jay, novice human (![[personal profile]](https://www.dreamwidth.org/img/silk/identity/user.png)
10billionghosts) wrote2025-06-05 06:56 pm
10billionghosts) wrote2025-06-05 06:56 pm
Entry tags:
code: GRIDDY - a mood board with hidden links and text
I've been wanting to do something with a simple grid of images for a while, so here we are!
Griddy is a 3x3 image board that contains three collapsing details sections for blocks of text and link lists. By default, it comes with one text section and two links sections, but you can swap the collapsible sections around or remove them entirely if you'd like. Be sure to check the HOW TO USE section for details on that.
Once again thank you to Churl for making the pretty previews for this code because my brain is just not having it. lmao
CODE HERE:
HOW TO USE:
❣️ This code is mobile compatible!
❣️ Mind the LJ-raw tags on the text subsections!
❣️ Be sure to change any instance of IMG_URL to the URL for a picture. Alternatively, if you'd like a given square to be a solid color, leave the IMG_URL placeholder text and instead change the hex code that preceeds it to a color you'd like to use.
❣️ Be sure to change the HEADER TEXT placeholder for each collapsible area that you're keeping!
❣️ The header text that opens each collapsible section is white by default (#fff), and it's declared on each header. So you'll want to change three instances of #fff to fully update the color!
❣️ By default, this code comes with three collapsible sections, one of which is a text area, and two being link lists. You can swap these around or remove them. I'll get to that in a sec -- I'm going to delve into the two subsection types first.
❣️ If you'd like a given subsection to be visible by default when the page loads find that subsection in the code and immediately after the word details add the word open. So it'll look like
❣️ LINK LIST SUBSECTION:
❣️ I love peeking at what people do with my codes, so feel free to comment if you use! If you're feeling generous, you can also donate to my ko-fi -- it's always greatly appreciated!
Griddy is a 3x3 image board that contains three collapsing details sections for blocks of text and link lists. By default, it comes with one text section and two links sections, but you can swap the collapsible sections around or remove them entirely if you'd like. Be sure to check the HOW TO USE section for details on that.
Once again thank you to Churl for making the pretty previews for this code because my brain is just not having it. lmao
HOW TO USE:
❣️ This code is mobile compatible!
❣️ Mind the LJ-raw tags on the text subsections!
❣️ Be sure to change any instance of IMG_URL to the URL for a picture. Alternatively, if you'd like a given square to be a solid color, leave the IMG_URL placeholder text and instead change the hex code that preceeds it to a color you'd like to use.
❣️ Be sure to change the HEADER TEXT placeholder for each collapsible area that you're keeping!
❣️ The header text that opens each collapsible section is white by default (#fff), and it's declared on each header. So you'll want to change three instances of #fff to fully update the color!
❣️ By default, this code comes with three collapsible sections, one of which is a text area, and two being link lists. You can swap these around or remove them. I'll get to that in a sec -- I'm going to delve into the two subsection types first.
❣️ If you'd like a given subsection to be visible by default when the page loads find that subsection in the code and immediately after the word details add the word open. So it'll look like
<details open style="...❣️ LINK LIST SUBSECTION:
- The link list subsection will auto sort links to 3 across. If there are fewer than 3 links in a section, they will stretch to fill the area automatically.
- By default, the link list subsection comes with 6 links, but you can copy-paste more in or delete the ones that are there.
- Don't forget to change #URL_HERE and the placeholder "link" text for each link.
- You can change the button color of links by doing a find-replace on
background:#bbb;.
- The font, font size, default text color, and line height for paragraphs are all declared at the very top of the code. If you change those values there, it'll reflect elsewhere in the code.
- The default text color for text block areas is a dark gray, hex code #303030. Change that at the top of the code to change text color for JUST the text block content.
- The text area is set to justify by default. This value is declared right in the subsection, so feel free to change text-align:justify to center, left, or right if you'd like!
- You can write as much text as you'd like! It'll stretch vertically.
- Each subsection is labeled in the code as hidden content (text) or (links). These areas are commented out. To change one section type to another, paste the type you'd prefer over the type that's there!
- To remove a collapsible section entirely, simply delete the code between the hidden content (type) markers.
❣️ I love peeking at what people do with my codes, so feel free to comment if you use! If you're feeling generous, you can also donate to my ko-fi -- it's always greatly appreciated!
ONE
Carrot cake donut macaroon macaroon sugar plum. Sesame snaps donut shortbread chocolate cake pastry chocolate cake chocolate sweet roll. Pudding soufflé jujubes sweet gingerbread carrot cake. Pudding jujubes muffin chupa chups muffin bear claw biscuit cupcake. Dragée cupcake brownie pie candy canes sweet brownie chupa chups sweet. Gingerbread soufflé caramels toffee pudding macaroon jelly beans tootsie roll pudding. Cake pastry apple pie cheesecake macaroon.
hard?
Carrot cake donut macaroon macaroon sugar plum. Sesame snaps donut shortbread chocolate cake pastry chocolate cake chocolate sweet roll. Pudding soufflé jujubes sweet gingerbread carrot cake. Pudding jujubes muffin chupa chups muffin bear claw biscuit cupcake.
Dragée cupcake brownie pie candy canes sweet brownie chupa chups sweet. Gingerbread soufflé caramels toffee pudding macaroon jelly beans tootsie roll pudding. Cake pastry apple pie cheesecake macaroon.
Dragée cupcake brownie pie candy canes sweet brownie chupa chups sweet. Gingerbread soufflé caramels toffee pudding macaroon jelly beans tootsie roll pudding. Cake pastry apple pie cheesecake macaroon.
header text
Carrot cake donut macaroon macaroon sugar plum. Sesame snaps donut shortbread chocolate cake pastry chocolate cake chocolate sweet roll. Pudding soufflé jujubes sweet gingerbread carrot cake. Pudding jujubes muffin chupa chups muffin bear claw biscuit cupcake. Dragée cupcake brownie pie candy canes sweet brownie chupa chups sweet. Gingerbread soufflé caramels toffee pudding macaroon jelly beans tootsie roll pudding. Cake pastry apple pie cheesecake macaroon.