jay, novice human (![[personal profile]](https://www.dreamwidth.org/img/silk/identity/user.png)
10billionghosts) wrote2022-12-13 08:45 pm
10billionghosts) wrote2022-12-13 08:45 pm
Entry tags:
code: SEASONAL (LOCKBOX) - a mood board with a hidden collapsible
CLICK ME PLEASE
SAPPHO ○ delian
STARCHILD ○ Ghost Quartet
FLOWERS (EURYDICE'S SONG) ○ Anaïs Mitchell
PERSEPHONE ○ Daisy the Great
ONCE UPON A DREAM ○ Lana Del Rey
listen
Merry Draftsmas! This is code Seven-ish (6.5?) of the release block, SEASONAL (LOCKBOX). It takes the very straightforward SEASONAL (STATIC) and through the magic of details tags and breaking geometric laws with negative margins, adds a collapsible spot where you can store text and other things.
I've pre-styled three versions of this code:
The code itself is a bit messier than the plain LOCKBOX (STATIC) code, but it's still relatively easy to use. I've provided some basic instructions below. You can pick up the codes, check out a live preview of each style, and take a look at advanced instructions for each at the bottom of this post.
HOW TO USE:
❣️ Mind those lj-raw tags!!
❣️ This code is mobile compatible and insanejournal friendly!
❣️ DO YOU WANT YOUR CODE TO START IN THE OPEN POSITION? Add the word open immediately after the word details in the details tag. So, it'll look like 'details open style="...' etc.
❣️ Want to use this code as a splash page? Check out Manx's guide to making splash pages on Dreamwidth, or Tess's guide for insanejournal!
❣️ Be sure to change any instances of #URL_HERE to the proper URL!
❣️ There are 7 instances of IMG_URL here that will need to be changed in the code. They are clearly labeled.
❣️ I would suggest using a simple gif, low detail image, or solid color for the two smaller squares. You get kinda interesting results if you use one portrait ratio image for both squares.
❣️ If you would like any square to be a solid color and not an image, instead of replacing IMG_URL, change that square's #ccc hex code to whatever color you'd like it to be.
❣️ This code comes with an additional BG_URL_HERE, which is best served by a very light transparent tiling background like some of the ones you can find at transparent textures. The examples on this post use a texture from this site. Just be sure to host the texture you want to use at imgur and do not hotlink!
❣️ Be sure to change #eee (extremely light gray) to the color you'd like the hidden background to be when it's expanded out.
❣️ The default color for text is declared at the very top of the code. If you'd like to change the color of the non-header text, change color:#000.
❣️ Generally there aren't many other colors to mess with here. If you'd like to change the font color of the header text, though, change color:#fff to the color you'd like the text to be.
❣️ This code comes with a credit by default. Appreciate it if you leave it in, but you can delete if you want! :)
❣️ 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 one of the charities listed on the main draftmas hub post.
I've pre-styled three versions of this code:
- a playlist code to populate with extremely shippy songs right before you send someone a squirrelly "haha they're so bad together" dm.
- a game ad/navigation code to make people have to work before they can get your info.
- a basic block text styling so you can store your bad poetry i guess
The code itself is a bit messier than the plain LOCKBOX (STATIC) code, but it's still relatively easy to use. I've provided some basic instructions below. You can pick up the codes, check out a live preview of each style, and take a look at advanced instructions for each at the bottom of this post.
HOW TO USE:
❣️ Mind those lj-raw tags!!
❣️ This code is mobile compatible and insanejournal friendly!
❣️ DO YOU WANT YOUR CODE TO START IN THE OPEN POSITION? Add the word open immediately after the word details in the details tag. So, it'll look like 'details open style="...' etc.
❣️ Want to use this code as a splash page? Check out Manx's guide to making splash pages on Dreamwidth, or Tess's guide for insanejournal!
❣️ Be sure to change any instances of #URL_HERE to the proper URL!
❣️ There are 7 instances of IMG_URL here that will need to be changed in the code. They are clearly labeled.
❣️ I would suggest using a simple gif, low detail image, or solid color for the two smaller squares. You get kinda interesting results if you use one portrait ratio image for both squares.
❣️ If you would like any square to be a solid color and not an image, instead of replacing IMG_URL, change that square's #ccc hex code to whatever color you'd like it to be.
❣️ This code comes with an additional BG_URL_HERE, which is best served by a very light transparent tiling background like some of the ones you can find at transparent textures. The examples on this post use a texture from this site. Just be sure to host the texture you want to use at imgur and do not hotlink!
❣️ Be sure to change #eee (extremely light gray) to the color you'd like the hidden background to be when it's expanded out.
❣️ The default color for text is declared at the very top of the code. If you'd like to change the color of the non-header text, change color:#000.
❣️ Generally there aren't many other colors to mess with here. If you'd like to change the font color of the header text, though, change color:#fff to the color you'd like the text to be.
❣️ This code comes with a credit by default. Appreciate it if you leave it in, but you can delete if you want! :)
❣️ 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 one of the charities listed on the main draftmas hub post.
VERSION 1: the playlist
EXAMPLE TEXT
SONG TITLE ○ Artist Name
SONG TITLE ○ Artist Name
JUST AS AN EXAMPLE, A VERY LONG SONG TITLE
Probably Mid-90s Death Cab for Cutie
Probably Mid-90s Death Cab for Cutie
SONG TITLE ○ Artist Name
SONG TITLE ○ Artist Name
listen
HOW TO USE:
❣️ Change SONG TITLE and Artist Name were indicated.
❣️ You can add additional songs by simply copying and pasting the full div for a song title/artist.
❣️ Don't forget to update the #URL_HERE for the "listen" button. You can also safely delete this button if you don't have a spotify or other playlist to link to.
❣️ The background defaults to #eee with no tiling background. Change BG_URL_HERE to add a tiling background. Change #eee if you want a solid color background or if you are using a transparent tiling background.
❣️ rgba(0, 0, 0,.3) is the color for the background of each song entry. You will almost certainly want to change this color value to better match your aesthetic.
❣️ hex code #bbb is a dark gray and is the background color of the listen button, be sure to update this as well.
VERSION 2: the game ad
HOW TO USE:
❣️ As mentioned you can start this code in the open position by adding the word open immediately after the word details in the details tag. So, it'll look like 'details open style="...' etc.
❣️ This code uses a serif font for the header text by default. If you want to change it, under the label part of the code, change the font family to the fonts you'd like to use. Remember they have to be web safe fonts!
❣️ You don't need to include summary text if you don't want it. Just delete the summary text section if you'd like to skip that.
❣️ You can add as many links as you want! Copy-paste them in where indicated in the code.
❣️ Don't forget to update all #URL_HEREs and !!user text!!
❣️ Hex code #bbb is the default color for all buttons. Please update this and make the code beautiful.
❣️ I think that's it??? omg lmao instruction posts are so hard please just let me know if something doesn't make sense and I'll help/update this post with details.
VERSION 3: the text block
!!HEADER CLICK TEXT!!
I am very tired and don't have the energy to do another random mood board. But look, see? You can add as much text as you want and it'll do it's thing. If you prefer your text aligned justify, you can just change the text-align:left tag at the start of this section to whatever alignment you like.
Apple pie marshmallow danish fruitcake sweet sugar plum sweet. Dragée oat cake tiramisu carrot cake gingerbread gummies sugar plum sweet roll chocolate bar. Biscuit jelly beans soufflé marzipan sweet roll fruitcake. Candy powder biscuit apple pie gummi bears chupa chups cake candy canes tart.
Sugar plum powder cookie toffee marshmallow lemon drops oat cake liquorice. Sweet roll liquorice cupcake danish jelly beans wafer shortbread. Jelly gingerbread liquorice liquorice tart. Candy shortbread chocolate toffee soufflé cheesecake chocolate bar carrot cake jelly beans.
Apple pie marshmallow danish fruitcake sweet sugar plum sweet. Dragée oat cake tiramisu carrot cake gingerbread gummies sugar plum sweet roll chocolate bar. Biscuit jelly beans soufflé marzipan sweet roll fruitcake. Candy powder biscuit apple pie gummi bears chupa chups cake candy canes tart.
Sugar plum powder cookie toffee marshmallow lemon drops oat cake liquorice. Sweet roll liquorice cupcake danish jelly beans wafer shortbread. Jelly gingerbread liquorice liquorice tart. Candy shortbread chocolate toffee soufflé cheesecake chocolate bar carrot cake jelly beans.
HOW TO USE:
❣️ SUPER DUPER STRAIGHT FORWARD. Just write all your words where indicated!
❣️ This particular code is VERY blank slate and lends itself to being used for other things. Theoretically you could put like, a CR chart in here, or even more aesthetic images. The world is your oyster, dude.
no subject
no subject
If you want these to fit multiple per row, I thiiink you can probably get them to sit up to two across on desktop if you stick the codes into the outer wrapper I use for my cast list codes:
You'll need to make sure you keep track of and remove excess lj-raw tags, and you may want to adjust the gap to something a little bigger to create more appropriate spacing.
no subject