jay, novice human (![[personal profile]](https://www.dreamwidth.org/img/silk/identity/user.png)
10billionghosts) wrote2022-09-13 07:43 pm
10billionghosts) wrote2022-09-13 07:43 pm
Entry tags:
code: VENDING MACHINE - another simple nav-mood board
GREETINGS FRIENDS. Had the desire to make a new simple mood board/nav code. This one was lightly inspired by baisemain's new layout and also iliekrp's request that I make a code that uses the colors #b4d455 and #f42069.
By default, this code comes with space for 5 links, but you can use fewer. Once you pick up the code below, please be sure to read the HOW TO USE section for details on how to customize the links. As uzh, check out the very bottom of the post for live previews of the code.
Here is the 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 name!! should be changed to the name of what you're linking to (for example, "profile", "bio", "IC contact", "pinterest", etc.); this will ensure that when someone mouses over a box, it displays where the link is going.
❣️ Don't want those link squares to be links? Remove href="#URL_HERE" from each one, and it will stop the link action.
❣️ IMG_URL is placeholder text for all mood board images. Replace each of those with the URL of an image you'd like to use.
❣️ By default, all mood board 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.
❣️ By default, this code features 5 squares for links. You cannot add more without breaking the code, but you can subtract the number there by simply deleting links in the NAVIGATION BOXES section of the code.
❣️ LINK ICON CUSTOMIZATION: In the sample codes, each of the link icons is sourced from iconify.design. By default, the code comes with a few generic pre-chosen icons, you can change those, though...
❣️ hex code f42069 is the hot pink color used by default for each icon symbol.
❣️ This code comes with a credit at the bottom 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 my ko-fi
baisemain's new layout and also iliekrp's request that I make a code that uses the colors #b4d455 and #f42069.By default, this code comes with space for 5 links, but you can use fewer. Once you pick up the code below, please be sure to read the HOW TO USE section for details on how to customize the links. As uzh, check out the very bottom of the post for live previews of the 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 name!! should be changed to the name of what you're linking to (for example, "profile", "bio", "IC contact", "pinterest", etc.); this will ensure that when someone mouses over a box, it displays where the link is going.
❣️ Don't want those link squares to be links? Remove href="#URL_HERE" from each one, and it will stop the link action.
❣️ IMG_URL is placeholder text for all mood board images. Replace each of those with the URL of an image you'd like to use.
❣️ By default, all mood board 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.
❣️ By default, this code features 5 squares for links. You cannot add more without breaking the code, but you can subtract the number there by simply deleting links in the NAVIGATION BOXES section of the code.
❣️ LINK ICON CUSTOMIZATION: In the sample codes, each of the link icons is sourced from iconify.design. By default, the code comes with a few generic pre-chosen icons, you can change those, though...
- To completely remove icons and have empty squares, for each link square, delete the URL found within url('THERE'S A BIG LONG URL HERE')center;. That will remove the icon entirely.
- If you'd like to change up the icons you use, head on over to iconify.design's Emoji One (Monotone) page and select the icon you want to use, then use this image to guide you through customizing and getting the URL you need.
- If you just wanna change the color of the icon's symbol, do a search (control+F) for f42069 and then change that to the hex code (without the #) for the color you'd like to use.
❣️ hex code f42069 is the hot pink color used by default for each icon symbol.
❣️ This code comes with a credit at the bottom 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 my ko-fi
no subject
no subject
Also lmao SUPER glad my image guide helped because sometimes I'm like "this probably makes no sense 😵" when I make guides like that
no subject
no subject
no subject
Hope that helps c: