jay, novice human (![[personal profile]](https://www.dreamwidth.org/img/silk/identity/user.png)
10billionghosts) wrote2022-12-31 12:48 am
10billionghosts) wrote2022-12-31 12:48 am
Entry tags:
code: SHELF - a customizable image board & nav
Merry Draftsmas! CODE THIRTEEN! Unless I get one more big burst of energy tomorrow, this is my last release of the draftsmas block. I am, as the French say, le tired.
SHELF is a very simple mood board code with some easy-to-customize elements that will allow you to have a lot of links or no links at all. It's Sorta Modular, and so you can pick up the base code just below this text, and then additional options at the very bottom of the post. Please don't forget to read the HOW TO USE section for instructions.
SINGLE COLUMN CODE HERE:
HOW TO USE:
❣️ Mind those lj-raw tags!!
❣️ This code is mobile compatible and insanejournal friendly!
❣️ Swap the placeholder text IMG_URL with the URL for the image you want where indicated in the code. By default, there are three instances of IMG_URL. The SOLID BLOCK VARIANT and SOLID BLOCK LINK VARIANT squares also have an IMG_URL for you to change.
❣️ Be sure to change any instance of #URL_HERE to an active URL, and any link placeholder text to relevant anchor text.
❣️ Be sure to change hex code #ccc to a color that matches the general aesthetic of what you're putting together! #ccc, a gray, shows up a lot in the code, and more depending on the variant you're using, so definitely update that hex code to something else for a really vibrant mood board!
❣️ By default, this code comes with 3 links in each of the square sections. You can delete or add as many as you like. Generally, I'd recommend avoiding adding more than 5 links per section, as it will start to look overly cramped.
❣️ This code comes with 2 variants for the smaller square boxes.
❣️ If you don't want the white background and light gray border around the mood board, go to the top of the code. Completely remove border:1px solid #ddd;, and change background:#fff; to background:transparent;.
❣️ Listen I'm so tired I've probably forgot an important step please let me know if you're confused by anything on this code lmao I'll help!
❣️ 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.
SHELF is a very simple mood board code with some easy-to-customize elements that will allow you to have a lot of links or no links at all. It's Sorta Modular, and so you can pick up the base code just below this text, and then additional options at the very bottom of the post. Please don't forget to read the HOW TO USE section for instructions.
HOW TO USE:
❣️ Mind those lj-raw tags!!
❣️ This code is mobile compatible and insanejournal friendly!
❣️ Swap the placeholder text IMG_URL with the URL for the image you want where indicated in the code. By default, there are three instances of IMG_URL. The SOLID BLOCK VARIANT and SOLID BLOCK LINK VARIANT squares also have an IMG_URL for you to change.
❣️ Be sure to change any instance of #URL_HERE to an active URL, and any link placeholder text to relevant anchor text.
❣️ Be sure to change hex code #ccc to a color that matches the general aesthetic of what you're putting together! #ccc, a gray, shows up a lot in the code, and more depending on the variant you're using, so definitely update that hex code to something else for a really vibrant mood board!
❣️ By default, this code comes with 3 links in each of the square sections. You can delete or add as many as you like. Generally, I'd recommend avoiding adding more than 5 links per section, as it will start to look overly cramped.
❣️ This code comes with 2 variants for the smaller square boxes.
- SOLID BLOCK VARIANT, will replace the links with a solid color block or image.
- SOLID BLOCK LINK VARIANT, replaces the multi-link box with a single full square link that is styled to accept both an image background and a text foreground.
❣️ If you don't want the white background and light gray border around the mood board, go to the top of the code. Completely remove border:1px solid #ddd;, and change background:#fff; to background:transparent;.
❣️ Listen I'm so tired I've probably forgot an important step please let me know if you're confused by anything on this code lmao I'll help!
❣️ 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.