jay, novice human (![[personal profile]](https://www.dreamwidth.org/img/silk/identity/user.png)
10billionghosts) wrote2022-07-02 11:59 am
10billionghosts) wrote2022-07-02 11:59 am
Entry tags:
code: columned - a splash nav code
Hello friends. Sorry for the long absence. I continue to be uhhhhhhhhhhhh very tired and creatively zapped, but we're probably all more than a little zapped at this point. WHEW ANYWAY time to remember how to do a release post.
COLUMNED is a simple combination mood board and nav code created for use as a splash page, but functional as a simple in entry post, as well. You can see a couple of live previews of this code on Dreamwidth attotheviktor and on InsaneJournal at ![[insanejournal.com profile]](https://www.dreamwidth.org/img/external/ij-userinfo.gif)
nonecknovember. In entry examples are at the bottom of this post.
The code's pretty straightforward (for once lmao) so let's get right to it! Instructions below.
CODE HERE:
HOW TO USE:
❣️ Mind those lj-raw tags!! It can really donk this code up if you lose one lmao so be careful.
❣️ This code is insanejournal optimized (it was made for IJ first) and conditionally mobile compatible. It is fully mobile compatible on InsaneJournal and may be mobile compatible in some, but not all, Dreamwidth layouts.
❣️ 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.
❣️ Remember to replace IMG_URL with the url of the image you'd like to use. Portrait images and landscape images that have the point of focus well centered work best for this code.
❣️ 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 #6a0000 is a dark red and is the color used on the border of each column. Find and replace this to change the border color.
❣️ hex code #9c0000 is a bright red and is both the color of text in the center of the middle column and the background color for each link. Be sure to find-replace this if you'd like to change this color.
❣️ hex code #8f0303 is the color for the horizontal line separating the header from the blurb text. Don't forget to change this to match the rest of your code!
❣️ If you'd like to edit the shadow, make sure you do so for each of the three instances of it (box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px in the base code) to ensure each column looks consistent.
❣️ This code features space for 8 links. If you're using this as a splash page code and you're using your journal's reading page regularly, I strongly suggest tying one of the links to your reading page.
❣️ While I'm happy to assist in modifying the code to have fewer links, I can't support adding more links, as adding more sort of becomes a pain in the butt.
❣️ 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!
COLUMNED is a simple combination mood board and nav code created for use as a splash page, but functional as a simple in entry post, as well. You can see a couple of live previews of this code on Dreamwidth at
totheviktor and on InsaneJournal at nonecknovember. In entry examples are at the bottom of this post.The code's pretty straightforward (for once lmao) so let's get right to it! Instructions below.
HOW TO USE:
❣️ Mind those lj-raw tags!! It can really donk this code up if you lose one lmao so be careful.
❣️ This code is insanejournal optimized (it was made for IJ first) and conditionally mobile compatible. It is fully mobile compatible on InsaneJournal and may be mobile compatible in some, but not all, Dreamwidth layouts.
❣️ 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.
❣️ Remember to replace IMG_URL with the url of the image you'd like to use. Portrait images and landscape images that have the point of focus well centered work best for this code.
❣️ 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 #6a0000 is a dark red and is the color used on the border of each column. Find and replace this to change the border color.
❣️ hex code #9c0000 is a bright red and is both the color of text in the center of the middle column and the background color for each link. Be sure to find-replace this if you'd like to change this color.
❣️ hex code #8f0303 is the color for the horizontal line separating the header from the blurb text. Don't forget to change this to match the rest of your code!
❣️ If you'd like to edit the shadow, make sure you do so for each of the three instances of it (box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px in the base code) to ensure each column looks consistent.
❣️ This code features space for 8 links. If you're using this as a splash page code and you're using your journal's reading page regularly, I strongly suggest tying one of the links to your reading page.
❣️ While I'm happy to assist in modifying the code to have fewer links, I can't support adding more links, as adding more sort of becomes a pain in the butt.
❣️ 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!
no subject
I used it for a character image gallery, included (with credit + links) here; and here's an example of the version with two images.
Obviously a bit different, and a very different PURPOSE; I wanted it to go full width and stack on mobile 👀
I hope you don't mind ❤️ and also that something in my alterations is interesting/useful to you! I love that grid lets us, uh, cheat around DW comment restrictions on setting heights and margins.
no subject
no subject
I'm fairly terrible at actually coming up with designs myself but I'm good at the HTML/CSS (and JavaScript), I do that part for my work sjskjdk
Your stuff is SO COOL okay. So so cool.
Still not quite happy with this one, which tries to combine some of your biosheet code :gt;
That is all I've done so far but!!! Thank you for making such amazing codes.
no subject
If you DO want to get inspo for design ever, I definitely suggest searching things like "magazine spread example", "scrapbook layout ideas", and browsing stuff like that. It translates really well to journal site coding, specifically.
no subject
Ohhh that's such a good idea. Thank you!
no subject
no subject
no subject
That's so great looking!!! Ahhhh I'm happy I could help you in return. ♥