jay, novice human (![[personal profile]](https://www.dreamwidth.org/img/silk/identity/user.png)
10billionghosts) wrote2022-09-14 01:46 pm
10billionghosts) wrote2022-09-14 01:46 pm
Entry tags:
code: CHIMES - a mini aesthetic board / simple splash nav (updated 9/14/2022)
THIS IS AN UPDATE OF AN OLD CODE. CHIMES was originally released on 6/16/2020 and is based on a brochure/social media layout template found on Pinterest.
This is a complete ground-up rewrite of the code for better overall mobile and layout compatibility. The code itself is now cleaner, shorter, and better commented out to hopefully make using it a little easier! I've also included a variant code that cuts out the link list and is just the images, if you're just after the images. :)
The version of CHIMES that includes a link list has space for around 18 links. The code works best as a true mood board. Character portrait art probably will not play well with this code, but ymmv depending on the images you're using. Aesthetic photography, art, and tiling patterns work well with it for sure, though!
Here is the code for CHIMES, WITH LINK LIST:
Here is the code for CHIMES, IMAGES ONLY:
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 will need to be corrected to a proper URL, and !!link name!! should be changed to the name of a link (for example, profile, bio, preferences, etc.).
❣️ If you'd like to add more links -- up to 18 before it starts breaking the code -- simply copy the base link (that's the line that starts with a href) and paste it where indicated in the code.
❣️ Max character length for the link text before you wind up with word wrapping is 12 characters.
❣️ If you don't want any links at all, make sure to use the IMAGES ONLY version of the code.
❣️ 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.
❣️ hex code #bbb controls the color of each chime. If you'd like to just use solid colors, change this hex code value for each chime, and leave the IMG_URL value unchanged.
❣️ hex code #aaa controls the color of the link text. I recommend customizing this value to suit your needs!
❣️ hex code #ddd controls the color of the shadow beneath each link. I suggest a slightly lighter version of whatever color you are using to replace #aaa with for the best results when altering this value.
❣️ 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.
This is a complete ground-up rewrite of the code for better overall mobile and layout compatibility. The code itself is now cleaner, shorter, and better commented out to hopefully make using it a little easier! I've also included a variant code that cuts out the link list and is just the images, if you're just after the images. :)
The version of CHIMES that includes a link list has space for around 18 links. The code works best as a true mood board. Character portrait art probably will not play well with this code, but ymmv depending on the images you're using. Aesthetic photography, art, and tiling patterns work well with it for sure, though!
Here is the code for CHIMES, IMAGES ONLY:
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 will need to be corrected to a proper URL, and !!link name!! should be changed to the name of a link (for example, profile, bio, preferences, etc.).
❣️ If you'd like to add more links -- up to 18 before it starts breaking the code -- simply copy the base link (that's the line that starts with a href) and paste it where indicated in the code.
❣️ Max character length for the link text before you wind up with word wrapping is 12 characters.
❣️ If you don't want any links at all, make sure to use the IMAGES ONLY version of the code.
❣️ 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.
❣️ hex code #bbb controls the color of each chime. If you'd like to just use solid colors, change this hex code value for each chime, and leave the IMG_URL value unchanged.
❣️ hex code #aaa controls the color of the link text. I recommend customizing this value to suit your needs!
❣️ hex code #ddd controls the color of the shadow beneath each link. I suggest a slightly lighter version of whatever color you are using to replace #aaa with for the best results when altering this value.
❣️ 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.