jay, novice human (![[personal profile]](https://www.dreamwidth.org/img/silk/identity/user.png)
10billionghosts) wrote2023-06-16 10:09 pm
10billionghosts) wrote2023-06-16 10:09 pm
Entry tags:
code: WISH YOU WERE HERE - a portrait postcard set with many uses
So, WISH YOU WERE HERE is basically just a styled flex-box mood board that wraps nicely on mobile screens, but I think its simplicity allows you to do a lot with it. The code is designed so that you can add as many portraits as you'd like pretty much infinitely. You can also slap it on top of any other code and it'll play fairly nicely. So you could use it as the header or fake LJ-cut for a biosheet
Since it might be a bit opaque, I've created a few basic templates that you can pick up and use right away at the bottom of this post. That said, I encourage you to experiment and make something that suits your specific needs!
You can refer to the HOW TO USE section below for detailed instructions on how to best customize this code, but as is, I've provided templates for:
HOW TO USE:
❣️ Mind those lj-raw tags!!
❣️ This code is mobile compatible and insanejournal friendly!
❣️ You can add or remove portrait cards (marked CARD in the code) freely. Simply delete or copy-paste cards, making sure to update necessary information.
❣️ TO ADJUST THE ANGLE OF EACH CARD change the number in 'transform: rotate(##deg)'. You can do positive or negative numbers. I would recommend keeping the numbers small -- between -20 and 20, but you can experiment and see what you like.
❣️ The code looks most aesthetically pleasing when each card has a slightly different degree of rotation, and I personally suggest alternating positive and negative values for card rotation. So, for example, doing a set that's 15deg, -15deg, 7deg, -10deg.
❣️ Remember to replace each instance of IMG_URL!
❣️ All templates have "TEXT" for placeholder text in each card. You can either change this to text you'd like to have or delete it to have no text in cards.
❣️ All images are set to scale down and center by default. Pick images with centered composition if you don't know how to fiddle with background positioning in code.
❣️ Want just 2 cards across? At the top of the code, change 'max-width:620px' to 'max-width:350px'.
❣️ If you use text on each card, hex code #dd6777 controls the shadow behind the text. Change it to better match your cards, and use find-replace to update. You can also remove the drop shadow, if you like, by deleting 'text-shadow:1px 2px dd6777' from each card.
❣️ hex code #fff (white) is declared at the very top of the card for font color on the cards, and then on each individual card for the border color.
❣️ This code comes with a credit by default. Appreciate it if you leave it in, but you can delete if you want! :) It's at the top of the code this time, but it's still clearly marked.
❣️ 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.
Keep scrolling for individual codes!
Since it might be a bit opaque, I've created a few basic templates that you can pick up and use right away at the bottom of this post. That said, I encourage you to experiment and make something that suits your specific needs!
You can refer to the HOW TO USE section below for detailed instructions on how to best customize this code, but as is, I've provided templates for:
- 4-Image Mood Board. Works as a post topper for threads, ic/oocs, bio sheets, etc.
- 4-Image Mood Board + Text. This is just the above code, but I've included a styled space for text, as well. You can use this for posting logs, thread starters, or information pages.
- 4-Image Mood Board (Linked). Same as above, but the text in each card is styled into a link, so you can use it as a nav.
- 6-Image Mood Board. Same as the 4 across mood board, but with six portraits that'll play nice together in widescreen or mobile view.
- 6-Image Mood Board (Linked). Noticing a pattern? lmao
- Thread Topper. 2 portraits, for posting thread starters and logs.
HOW TO USE:
❣️ Mind those lj-raw tags!!
❣️ This code is mobile compatible and insanejournal friendly!
❣️ You can add or remove portrait cards (marked CARD in the code) freely. Simply delete or copy-paste cards, making sure to update necessary information.
❣️ TO ADJUST THE ANGLE OF EACH CARD change the number in 'transform: rotate(##deg)'. You can do positive or negative numbers. I would recommend keeping the numbers small -- between -20 and 20, but you can experiment and see what you like.
❣️ The code looks most aesthetically pleasing when each card has a slightly different degree of rotation, and I personally suggest alternating positive and negative values for card rotation. So, for example, doing a set that's 15deg, -15deg, 7deg, -10deg.
❣️ Remember to replace each instance of IMG_URL!
❣️ All templates have "TEXT" for placeholder text in each card. You can either change this to text you'd like to have or delete it to have no text in cards.
❣️ All images are set to scale down and center by default. Pick images with centered composition if you don't know how to fiddle with background positioning in code.
❣️ Want just 2 cards across? At the top of the code, change 'max-width:620px' to 'max-width:350px'.
❣️ If you use text on each card, hex code #dd6777 controls the shadow behind the text. Change it to better match your cards, and use find-replace to update. You can also remove the drop shadow, if you like, by deleting 'text-shadow:1px 2px dd6777' from each card.
❣️ hex code #fff (white) is declared at the very top of the card for font color on the cards, and then on each individual card for the border color.
❣️ This code comes with a credit by default. Appreciate it if you leave it in, but you can delete if you want! :) It's at the top of the code this time, but it's still clearly marked.
❣️ 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.
4 IMAGE MOOD BOARD BASICS: plain, linked, and with text block
Pudding cake candy cake chocolate powder jelly beans gummies. Halvah oat cake icing cake topping. Shortbread carrot cake chocolate jelly-o tootsie roll. Macaroon chupa chups donut cupcake topping. Cheesecake pie halvah shortbread candy canes cotton candy tiramisu soufflé. Fruitcake cookie caramels lollipop donut biscuit halvah icing cookie. Cupcake candy halvah bear claw lemon drops.
click for BASIC 4-IMAGE MOOD BOARD CODE
click for 4-IMAGE MOOD BOARD (WITH LINKS) CODE:
click for 4-IMAGE MOOD BOARD (WITH BLOCK TEXT) CODE:
6 IMAGE MOOD BOARD: plain, linked
click for BASIC 6-IMAGE MOOD BOARD CODE
click for 6-IMAGE MOOD BOARD (WITH LINKS) CODE:
2 IMAGE THREAD TOPPER
name & name
when & where
here's a short, one sentence description of what happens in this log
⚠ warnings
here's a short, one sentence description of what happens in this log
⚠ warnings
Pudding cake candy cake chocolate powder jelly beans gummies. Halvah oat cake icing cake topping. Shortbread carrot cake chocolate jelly-o tootsie roll. Macaroon chupa chups donut cupcake topping. Cheesecake pie halvah shortbread candy canes cotton candy tiramisu soufflé. Fruitcake cookie caramels lollipop donut biscuit halvah icing cookie. Cupcake candy halvah bear claw lemon drops.
THIS CODE COMES WITH A FAKE LJ-CUT. Be sure to change #POST_URL_HERE to the URL for your entry once you've posted this!
no subject
no subject
no subject
No rush I have no particular need I just thought it would be neat