jay, novice human (![[personal profile]](https://www.dreamwidth.org/img/silk/identity/user.png)
10billionghosts) wrote2022-07-09 05:55 pm
10billionghosts) wrote2022-07-09 05:55 pm
Entry tags:
code: star garden path - a mini text box / nav code (small update 4/10/23)
teensy update 4/10/2023: added one little nugget of code (fixing the width of the center box to be 225px at the narrowest) that should improve scaling on mobile! Update the code if you'd like! Original post to follow:
Hello friends! At the moment I am embracing chasing whatever creative thing I can, so here's a quick code for your enjoyment. STAR GARDEN PATH comes in two flavors:
The mini text box version features an automatic scroll bar if you add more text than there's room for, so the code shouldn't break even if you put a lot of text.
Both codes take one large portrait-style (or well centered landscape) image, and I think they work best if you use an image that has a centered perspective point. Hallway shots and stuff like that. ANYWAY, Next up are the codes and how-to and at the very bottom of the post there are some live examples.
Here is the mini text box code:
Here is the nav code:
HOW TO USE:
❣️ Mind those lj-raw tags!!
❣️ This code is mobile compatible and insanejournal friendly!
❣️ Want to use this code as a splash page for your journal? Check out Manx's guide to making splash pages on Dreamwidth, or Tess's guide for insanejournal!
❣️ #URL_HERE should be corrected to the url you'd like a given link to connect to, and !!link!! should be changed to the anchor text you'd like to use. It looks best if you write the word in lower case.
❣️ Remember to replace IMG_URL with the url of the image you'd like to use. This code uses one single image for the background -- it's not actually two split images. Images with a perfectly centered perspective point or images that are sort of seamless patterns do work best for this code.
❣️ The nav version of the code does feature space for a second image! Matchy gifs or icons look cute in that spot.
❣️ Keep your eyes peeled for !!text marked by two exclamation points!! as this is where you put your own text.
❣️ By default, all images are set to background-size:cover (meaning they will automatically resize) and positioned to the center both vertically and horizontally. This code has been pretty forgiving on positioning for me, but you may find that you need to tweak the background-size: value or the background positioning (that's the thing that says 'center' right next to (IMG_URL) in the code) to get things just right.
❣️ hex code #676e89 is used for the border and text on links.
❣️ hex code #cbddf3 is the background color for each of the links.
❣️ Otherwise, your plain text is set to color:#000 (black) in the first div of the code. Feel free to change that value to adjust the color of plain text.
❣️ Credit for the images used in this include: Casey Horner (star field), Bernd Dittrich (wisteria path), this random tweet for the crab pic lmao, and tenor for the gifs
❣️ 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!
Hello friends! At the moment I am embracing chasing whatever creative thing I can, so here's a quick code for your enjoyment. STAR GARDEN PATH comes in two flavors:
- mini text box, which is intended for use for things like flash reactionary posts -- those "this happened, react to it" kinda posts you see in some games.
- nav code, which probably works well for splash pages and game ads.
The mini text box version features an automatic scroll bar if you add more text than there's room for, so the code shouldn't break even if you put a lot of text.
Both codes take one large portrait-style (or well centered landscape) image, and I think they work best if you use an image that has a centered perspective point. Hallway shots and stuff like that. ANYWAY, Next up are the codes and how-to and at the very bottom of the post there are some live examples.
HOW TO USE:
❣️ Mind those lj-raw tags!!
❣️ This code is mobile compatible and insanejournal friendly!
❣️ Want to use this code as a splash page for your journal? Check out Manx's guide to making splash pages on Dreamwidth, or Tess's guide for insanejournal!
❣️ #URL_HERE should be corrected to the url you'd like a given link to connect to, and !!link!! should be changed to the anchor text you'd like to use. It looks best if you write the word in lower case.
❣️ Remember to replace IMG_URL with the url of the image you'd like to use. This code uses one single image for the background -- it's not actually two split images. Images with a perfectly centered perspective point or images that are sort of seamless patterns do work best for this code.
❣️ The nav version of the code does feature space for a second image! Matchy gifs or icons look cute in that spot.
❣️ Keep your eyes peeled for !!text marked by two exclamation points!! as this is where you put your own text.
❣️ By default, all images are set to background-size:cover (meaning they will automatically resize) and positioned to the center both vertically and horizontally. This code has been pretty forgiving on positioning for me, but you may find that you need to tweak the background-size: value or the background positioning (that's the thing that says 'center' right next to (IMG_URL) in the code) to get things just right.
❣️ hex code #676e89 is used for the border and text on links.
❣️ hex code #cbddf3 is the background color for each of the links.
❣️ Otherwise, your plain text is set to color:#000 (black) in the first div of the code. Feel free to change that value to adjust the color of plain text.
❣️ Credit for the images used in this include: Casey Horner (star field), Bernd Dittrich (wisteria path), this random tweet for the crab pic lmao, and tenor for the gifs
❣️ 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!
GARDEN PATH
Macaroon danish pastry macaroon shortbread gummi bears dragée cupcake. Danish candy canes shortbread chupa chups fruitcake. Bear claw lemon drops cheesecake jelly-o ice cream gummi bears chocolate bar brownie.
Powder jelly beans jelly tart tiramisu. Donut marshmallow chocolate bar cheesecake danish. Powder soufflé liquorice dessert brownie halvah toffee macaroon.
Sugar plum danish cookie soufflé candy canes pie lemon drops. Liquorice carrot cake tart halvah chocolate gingerbread apple pie candy. Toffee candy chocolate bar sweet roll sesame snaps gummi bears bonbon.
Powder jelly beans jelly tart tiramisu. Donut marshmallow chocolate bar cheesecake danish. Powder soufflé liquorice dessert brownie halvah toffee macaroon.
Sugar plum danish cookie soufflé candy canes pie lemon drops. Liquorice carrot cake tart halvah chocolate gingerbread apple pie candy. Toffee candy chocolate bar sweet roll sesame snaps gummi bears bonbon.
STAR GARDEN
LOOK AT THIS CRAB
!!HEADER TEXT!!
!!your content here!!
no subject
no subject
no subject
no subject