10billionghosts | code: compass - a nav-mood board in 3 mix-n-match flavors

COMPASS is a set of 3 combination mood board + navigation codes that are all compatible with one another. You can use each code as-is, trade elements out between them, or stack the components one on top of another if you really want to?? IDK lmao that seems like it'd be pretty long.

The codes in Compass have three main parts:

The Outer Shell.

An Upper Image Board (in 3 flavors)

A Footer (in 3 flavors)

As usual, the sections of the code are commented out for easy identification. You can find each code beneath its live preview sample below. Enjoy!

HOW TO USE:

❣️ Mind those lj-raw tags!!

❣️ This code is mobile compatible and insanejournal friendly!

❣️ The nav boards are naturally quite small and should work on most layouts, but they will also scale down for very narrow screen widths or 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. Most squares/rectangles are coded to receive an image, but some are solid color only.

❣️ By default, all squares are hex code #eee 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.

❣️ hex code #fff is white, and is the default color for any text you use in links.

❣️ hex code #333333 is a dark gray used only for the font color on FOOTER (TEXT) -- the footer in the third mood board.

❣️ By default, all images are set to background-size:cover (meaning they will automatically resize) and positioned to the center both vertically and horizontally. Because this is an itty bitty mood board, you may have to futz with this to get some images to look right.

❣️ HOW DO I MIX & MATCH?

This code is divided up into two main sections: IMG BOARD and FOOTER. They are labeled with comments that say START and END (ex: IMG BOARD 1 (ROUND) START and IMG BOARD 1 (ROUND) END).

Pick out your base code and paste it into a new entry.

Take the entire IMG BOARD or FOOTER code for the style you want to use, and completely paste it over the corresponding code in your selected base code.

You can probably stack multiple footers/multiple image boards if you want?

❣️ 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

feat: board 1 (round), 5-link nav

permissions ic contact cr chart hmd bio

CODE HERE:

<lj-raw><div style="max-width:350px;width:100%;display:flex;flex-wrap:wrap;gap:10px;padding:10px;margin:0 auto;font-family:arial, helvetica, sans serif;font-size:12px;line-height:1.2;border:1px solid #eee;color:#fff;background:#fff;">

<div style="width:100%;height:350px;display:grid;grid-template-columns: repeat(7, 1fr);grid-template-rows: repeat(9, 1fr);gap:10px;">

<div style="grid-column-start:3;grid-column-end:6;grid-row-start:4;grid-row-end:8;max-width:125px;max-height:125px;border-radius:50%;outline:10px solid #fff;background:#eee url('IMG_URL')center;background-size:cover;"></div>

</div>

<div style="width:100%;height:70px;display:grid;grid-template-columns: repeat(7, 1fr);grid-template-rows: repeat(2, 1fr);gap:10px;">

</div>

</div>
<div style="max-width:350px;width:100%;margin:0 auto;text-align:right;font-size:10px;"><a title="code credit!" href="http://10billionghosts.dreamwidth.org" style="text-decoration:none;color:#ddd;">❤</a></div>
</lj-raw>

VERSION 2

feat: board 2 (rectangle), 4-link nav

bio dropbox

tags game

CODE HERE:

<div style="width:100%;height:350px;display:grid;grid-template-columns: repeat(6, 1fr);grid-template-rows: repeat(8, 1fr);gap:10px;">

<div style="grid-column-start:3;grid-column-end:5;grid-row-start:3;grid-row-end:7;outline:10px solid #fff;background:#eee url('IMG_URL')center;background-size:cover;"></div>

</div>

<div style="width:100%;height:70px;display:grid;grid-template-columns: repeat(7, 1fr);grid-template-rows: repeat(2, 1fr);gap:10px;">

</div>

</div>
<div style="max-width:350px;width:100%;margin:0 auto;text-align:right;font-size:10px;"><a title="code credit!" href="http://10billionghosts.dreamwidth.org" style="text-decoration:none;color:#ddd;">❤</a></div>
</lj-raw>

VERSION 3

feat: board 3 (link), text footer

premise wanted cast holds apply

Use this section for text. It will scale automatically. Good for quotes, blurbs, additional links, game ads, etc.

CODE HERE:

<div style="width:100%;height:350px;display:grid;grid-template-columns: repeat(6, 1fr);grid-template-rows: repeat(8, 1fr);gap:10px;">

<div style="grid-column-start:3;grid-column-end:5;grid-row-start:3;grid-row-end:7;display:grid;grid-template:-columns:1fr;grid-template-rows: repeat(5, 1fr);gap:10px;outline:10px solid #fff;background:#fff;">

</div>

</div>

<div style="width:100%;min-height:70px;display:grid;grid-template-columns: repeat(7, 1fr);grid-template-rows: 20px 1fr 20px;gap:10px;">

<div style="grid-column-start:1;grid-column-end:8;grid-row-start:2;grid-row-end:3;text-align:justify;color:#333333"></lj-raw>
!! YOUR CONTENT HERE; mind the lj-raw tags !!
<lj-raw></div>

Flat | Top-Level Comments Only

Hi there! I used this code for my nav for a Zero (FFXIV) journal here. It's lovely and I had lots of fun messing with it. Thank you so much for your work!

Oh, love it! That looks so good! Also didn't realize Zero had Amano art 😍

Yes and no! I believe that was listed as fanart on danbooru so ty for reminding me to shove the credit somewhere (it's this lovely artist who also draws a lot of G'raha). She's definitely based on Vampire Hunter D, though, who was designed by Amano. So it's basically the same thing!

Ahhh thank you for pointing me toward this artist. Love more G'raha art on my tl. Yes, I love Zero's whole Vampire Hunter D aesthetic. They really nailed capturing the aesthetic in a way that works in the world. The level 89 trial was same, felt like Amano art in motion.

Happy to provide! ♥

The 89 trial is hands down one of my top five in the whole game. Maybe even top 3. They really found a way to take the artwork and put it in motion, like you said. I'm always in awe of Amano's artwork so I'm very excited to see what else they put in XIV!

Thanks for making these! I love this code so much, I've been using a version on this journal here.

I was wondering, is there a way to code it with an extra row of 2? I have some extra links I want to add but no more room, and I hate to change it.

Try this out! I've added an extra set of 2 links to the footer. :] Is this what you were thinking?

<div style="width:100%;height:90px;display:grid;grid-template-columns: repeat(7, 1fr);grid-template-rows: repeat(3, 1fr);gap:10px;">

That's gorgeous! Thank you so very much, especially for such a quick reply. I'll link you when I get it set up so you can see how it looks. ♥

edit; The set-up with your new code! I fiddled with it a little, hope that is okay.

Edited 2023-10-03 01:07 (UTC)

Oh it looks so good! Edits are always welcome! :] Love seeing folks get creative with these things. I'm glad you liked the code.

Hi there! The grid codes continue to baffle me, so I was just curious if there's a way to split the larger link on Version 1 into two and have six total blocks?

Yep! Here you go:

<div style="width:100%;height:70px;display:grid;grid-template-columns: auto auto auto;gap:10px;">

</div>

Edited 2024-02-18 22:54 (UTC)

Used version 2 for this journal. Thanks a bunch!

Love it with the bright colors! c:

code: compass - a nav-mood board in 3 mix-n-match flavors

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

(ALT CODE: Version 1, 6 link footer)

no subject

no subject