jay, novice human (![[personal profile]](https://www.dreamwidth.org/img/silk/identity/user.png)
10billionghosts) wrote2022-01-28 08:57 pm
10billionghosts) wrote2022-01-28 08:57 pm
code: PIECES - a nav-mood board in 4 mix-n-match flavors
Hello! Had a busy couple weeks with freelance projects, and wasn't feeling inspired by any of the other codes I had going, so I whipped this up today! PIECES is a combination mood board + navigation code that comes pre-done in four different flavors.
This code is divided up into four main sections:
Because it's organized this way, and clearly commented in the code, it's very easy to mix things up, use the 8-link navigation or the 4-image board in VERSION 4 in any of the other boards, and, likewise, use any of the centerpiece codes on VERSION 4.
You can find the code for each board beneath its live preview below. Enjoy!
HOW TO USE:
❣️ Mind those lj-raw tags!!
❣️ This code is mobile compatible and insanejournal friendly!
❣️ This code will automatically scale to a width that allows it to fit on any screen. For this reason, it looks nicest when used as a splash or on layouts that have wider width entries. It'll work on any layout, though!
❣️ 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!
❣️ Don't want those link squares to be links? remove href="#URL_HERE" from each one, and it will stop the link action.
❣️ Every single square is coded to accept a background image. Replace IMG_URL with the url of the image you'd like to use.
❣️ By default, all squares are hex code #ccc which is a gray. You only need to change this if you are not using an image, but do remember to change the colors! All of the examples utilized colorized squares for the links, rather than background images.
❣️ Tip: the bottom bar always looks best as just a solid color, or with a nice, seamless repeating pattern. Trying to get an image to look nice there is a lil tough.
❣️ By default, all images are set to background-size:cover (meaning they will automatically resize) and positioned to the center both vertically and horizontally. You may have to futz with this to get some images to look right.
❣️ HOW DO I MIX & MATCH? This code is commented out to denote each "section". If you'd like to use different sections together (like, the 4 image board with the 4 link nav):
❣️ CENTERPIECE: TEXT LABEL is styled with black text by default. You can change this by editing color:#000.
❣️ CENTERPIECE: TEXT LABEL is also styled with an override:auto, which means if you put a lot of text in there, it'll generate a scroll bar. This is mostly meant to preserve the look of things on mobile views.
❣️ 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 code is divided up into four main sections:
- Navigation links, which come in two flavors: 4 link and 8 link
- A main image board, also in two flavors: 5 image and 4 image
- A centerpiece, in three flavors: tiny, text, and portrait
- A single bottom bar
Because it's organized this way, and clearly commented in the code, it's very easy to mix things up, use the 8-link navigation or the 4-image board in VERSION 4 in any of the other boards, and, likewise, use any of the centerpiece codes on VERSION 4.
You can find the code for each board beneath its live preview below. Enjoy!
HOW TO USE:
❣️ Mind those lj-raw tags!!
❣️ This code is mobile compatible and insanejournal friendly!
❣️ This code will automatically scale to a width that allows it to fit on any screen. For this reason, it looks nicest when used as a splash or on layouts that have wider width entries. It'll work on any layout, though!
❣️ 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!
❣️ Don't want those link squares to be links? remove href="#URL_HERE" from each one, and it will stop the link action.
❣️ Every single square is coded to accept a background image. Replace IMG_URL with the url of the image you'd like to use.
❣️ By default, all squares are hex code #ccc which is a gray. You only need to change this if you are not using an image, but do remember to change the colors! All of the examples utilized colorized squares for the links, rather than background images.
❣️ Tip: the bottom bar always looks best as just a solid color, or with a nice, seamless repeating pattern. Trying to get an image to look nice there is a lil tough.
❣️ By default, all images are set to background-size:cover (meaning they will automatically resize) and positioned to the center both vertically and horizontally. You may have to futz with this to get some images to look right.
❣️ HOW DO I MIX & MATCH? This code is commented out to denote each "section". If you'd like to use different sections together (like, the 4 image board with the 4 link nav):
- Pick one of the base codes. I'd suggest picking a code based on the numberof links you want.
- Copy the entirety of the section you'd like to use. It'll be marked with comments.
- Paste that section over the corresponding section in the base code.
❣️ CENTERPIECE: TEXT LABEL is styled with black text by default. You can change this by editing color:#000.
❣️ CENTERPIECE: TEXT LABEL is also styled with an override:auto, which means if you put a lot of text in there, it'll generate a scroll bar. This is mostly meant to preserve the look of things on mobile views.
❣️ 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
VERSION 1
VERSION 2
summary
threads
aesthetic
game
HEADER
This space will auto-generate a scroll bar.
This space will auto-generate a scroll bar.
This section can be used for quotes, blurbs, excerpts, or even more links. You'll need to do a bit of styling to customize it. In the code there is an empty style="" that you can add your customizations to!
Change the align-items:center above to either align-items:left or align-items:justify if you're doing a lot of text.
VERSION 3
VERSION 4
no subject
Thanks!
no subject
#6b84a0 - square 1
#b1c6d3 - square 2
#ecddc3 - square 3
#d0ae76 - square 4
#71b1d0 - bottom bar
no subject
no subject
no subject
no subject