code: ENCIRCLED - a splash nav or header code

[10billionghosts]

code

WE ARE THE SUM OF OUR DEEDS,

link link link link

NOT OUR NAMES.

HELLO! Here is ENCIRCLED, a nav code that is intended to be used for a splash page, but can still function as a simple in entry post.

Out of the box, ENCIRCLED features a header, 4 links, and a footer in a section labeled OVERLAY LAYER in the code. You can remove any of these items with ease as well as add additional links to suit your needs. Check the very bottom of this post for a few live examples of what you can produce.

CODE HERE:
<lj-raw><div style="max-width:500px;width:100%;height:425px;margin:0 auto;display:grid;grid-template-rows:.75fr 1fr .54fr;grid-template-columns:1fr 1fr;font-family:arial, helvetica, sans serif;font-size: clamp(10px, 1vw, 12px);text-align:center;color:#fff;"> <!-- BACKGROUND; change #a86076 to change the color of the circle, BG_URL can be changed to a URL for a background image if wanted, but not necessary --> <div style="grid-row-start:1;grid-row-end:4;grid-column-start:1;grid-column-end:3;max-width:425px;width:100%;height:425px;margin:0 auto;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;align-content:center;border-radius:50%;background:#a86076 url('BG_URL');"> <!-- BACKGROUND; end of the top of the background wrapper --> <!-- PORTRAIT PHOTOS; be sure to change the two instances of IMG_URL here --> <div style="max-width:350px;width:100%;height:375px;display:grid;grid-template-columns:1fr 75px 1fr;grid-template-rows:75px 1fr 75px;gap:0;"> <div style="grid-column-start:2;grid-column-end:4;grid-row-start:2;grid-row-end:4;border:10px solid #fff;box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;background:transparent;"></div> <div style="grid-column-start:1;grid-column-end:3;grid-row-start:1;grid-row-end:3;;border:10px solid #fff;box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;background:#ccc url('IMG_URL')center;background-size:cover"></div> <div style="grid-column-start:2;grid-column-end:4;grid-row-start:2;grid-row-end:4;border:10px solid #fff;background:#ccc url('IMG_URL')center;background-size:cover"></div> <!-- credit --> <div style="grid-column-start:2;grid-column-end:4;grid-row-start:4;grid-row-end:5;padding:3px;font-size:10px;text-align:right;"><a title="code credit!" href="http://10billionghosts.dreamwidth.org" style="text-decoration:none;color:#ddd;">code</a> </div> <!-- credit; end --> </div> <!-- PORTRAIT PHOTOS; end --> </div> <!-- OVERLAY LAYER; this entire section can be deleted if you'd just like the circle with the two portrait images --> <div style="grid-row-start:2;grid-row-end:3;grid-column-start:1;grid-column-end:3;display:flex;flex-wrap:wrap;justify-content:center;align-items:end;align-content:end;gap:5px;"> <!-- THE UPPER LABEL; don't want an upper header? delete this section! text looks best in all caps --> <div style="width:100%;padding-left:10px;line-height:1;font-size: clamp(17px, 2vw, 22px);letter-spacing:1.5px;text-align:left;font-weight:bold;text-shadow: 1px 2px 0px rgba(0,0,0,0.3), 0px 0px 2px rgba(0,0,0,0.3);"> !!UPPER HEADER TEXT!! </div> <!-- THE UPPER LABEL; end --> <!-- LINKS; copy and paste more links into this section as needed, for best aesthetic results, add links in groups of four. delete this section entirely if you don't want any links --> <a href="#URL_HERE" style="max-width:117px;width:23%;padding:5px 0;text-decoration:none;background:#d10846;color:#fff;">link</a> <a href="#URL_HERE" style="max-width:117px;width:23%;padding:5px 0;text-decoration:none;background:#d10846;color:#fff;">link</a> <a href="#URL_HERE" style="max-width:117px;width:23%;padding:5px 0;text-decoration:none;background:#d10846;color:#fff;">link</a> <a href="#URL_HERE" style="max-width:117px;width:23%;padding:5px 0;text-decoration:none;background:#d10846;color:#fff;">link</a> <!-- LINKS; end -- post any additional links you want above this line --> <!-- THE LOWER LABEL; this can be deleted if you don't want a footer --> <div style="width:100%;padding-right:10px;line-height:1;font-size: clamp(17px, 2vw, 22px);letter-spacing:1.5px;text-align:right;font-weight:bold;text-shadow: 1px 2px 0px rgba(0,0,0,0.3), 0px 0px 3px rgba(0,0,0,0.5)"> !!LOWER HEADER TEXT!! </div> <!-- THE LOWER LABEL; end --> </div> <!-- OVERLAY LAYER; end --> </div></lj-raw>

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!

❣️ The part of the code labeled OVERLAY LAYER can be deleted entirely to remove the header, footer, and links. Each subsection (UPPER LABEL, LINKS, and LOWER LABEL) can also be removed individually if you'd like to remove just one part.

❣️ By default, the code comes with four links, but you can add more by copy pasting the link code into the designated area. I recommend doing this in groups of four if you want to preserve the symmetry of the links.

❣️ BG_URL is the placeholder text that controls the background circle. You can leave this blank if you just want a solid color or you can replace the placeholder text with the URL For an image or seamless texture/pattern. A transparent seamless texture (like one from transparent textures or subtle patterns is going to look best in this spot.

❣️ IMG_URL is the placeholder text for the two portrait images. Make sure you search for and replace that placeholder text with the URLs for whichever images you want to use.

❣️ #URL_HERE is the placeholder text for any of the links. Don't forget to change the anchor word "LINK" to a descriptive word (like BIOSHEET, PLAYLIST, DROPBOX, RULES, etc.).

❣️ Any text !!BETWEEN EXCLAMATION POINTS!! is text for you to customize.

❣️ hex code #a86076 is the default color of the background circle. It is used just once near the top of the code. Change this to change the background circle color.

❣️ hex code #d10846 is the default color for the link backgrounds. Find replace this color with the hex code for the color you'd like the links to be. You can also make each link a different color!

❣️ rgba(0,0,0,0.5) and rgba(0,0,0,0.3) are both black set to different transparencies to create shading that makes the header text a lil more visible. You don't need to futz with these as this should work pretty well regardless of your color scheme, but you can if you want!

❣️ hex code #fff is white, and it is the default color for all text in the code. If you want to change it, be sure to use find-replace to do it as there are a few instances of it.

❣️ 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 my ko-fi.

code

link link link link link link link link

YOU CALL ME WHATEVER YOU WANT

code

link link link link link link link link link link link link

WHAT LIES IN THE GLOAM

code

WE ARE THE SUM OF OUR DEEDS,

link link link link

NOT OUR NAMES.

code

code

!!UPPER HEADER TEXT!!

link link link link

!!LOWER HEADER TEXT!!

Comments

[morrow]

This is so neat! Great work :)

[10billionghosts]

Thank you! C: Glad you like it!

[panicstrickyn]

Love these!

[10billionghosts]

Thank you! ;u;

[baisemain]

i LOVE how simple this looks 😍 i'm going to use it for all my contact pages

[10billionghosts]

aaaaa THANK YOU I can't wait to snoop & see 👀

[moonflow]

I really love this code! But after seeing the textless version you demoed above I have a question wrt modifying it a little bit.

I tried to wrap my head around this already but I think I might be far too rusty with coding to brain this myself, so I was wondering if it was possible to have the background circle and two images be one giant link to a nav page instead of having the links visible?

I feel like there is probably an insanely simple solution to this but for the life of me I just cannot sort it out.

[10billionghosts]

For a quick fix, I can for sure make the two pictures into a link! To get the background circle included in the link, I think I'd have to rewrite the code. 🤔 I can noodle on it, but in the meantime, here's the two portrait images as links:

<lj-raw><div style="max-width:500px;width:100%;height:425px;margin:0 auto;display:grid;grid-template-rows:.75fr 1fr .54fr;grid-template-columns:1fr 1fr;font-family:arial, helvetica, sans serif;font-size: clamp(10px, 1vw, 12px);text-align:center;color:#fff;"> <!-- BACKGROUND; change #a86076 to change the color of the circle, BG_URL can be changed to a URL for a background image if wanted, but not necessary --> <div style="grid-row-start:1;grid-row-end:4;grid-column-start:1;grid-column-end:3;max-width:425px;width:100%;height:425px;margin:0 auto;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;align-content:center;border-radius:50%;background:#a86076 url('BG_URL');"> <!-- BACKGROUND; end of the top of the background wrapper --> <!-- PORTRAIT PHOTOS; be sure to change the two instances of IMG_URL here --> <div style="max-width:350px;width:100%;height:375px;display:grid;grid-template-columns:1fr 75px 1fr;grid-template-rows:75px 1fr 75px;gap:0;"> <div style="grid-column-start:2;grid-column-end:4;grid-row-start:2;grid-row-end:4;border:10px solid #fff;box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;background:transparent;"></div> <a href="#URL_HERE" style="grid-column-start:1;grid-column-end:3;grid-row-start:1;grid-row-end:3;;border:10px solid #fff;box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;background:#ccc url('IMG_URL')center;background-size:cover"></a> <a href="#URL_HERE" style="grid-column-start:2;grid-column-end:4;grid-row-start:2;grid-row-end:4;border:10px solid #fff;background:#ccc url('IMG_URL')center;background-size:cover"></a> <!-- credit --> <div style="grid-column-start:2;grid-column-end:4;grid-row-start:4;grid-row-end:5;padding:3px;font-size:10px;text-align:right;"><a title="code credit!" href="http://10billionghosts.dreamwidth.org" style="text-decoration:none;color:#ddd;">code</a> </div> <!-- credit; end --> </div> <!-- PORTRAIT PHOTOS; end --> </div> </div></lj-raw>
There are two instances of #URL_HERE in this code that should be changed to the same URL.

[moonflow]

I won't ask you to rewrite the whole code unless you're up for the challenge because the quick fix works wonderfully! I really can't thank you enough. I was wracking my brain all night. Thank you so much!

[longitudinally]

this is literally the most aesthetically pleasing code i've seen and i've used it for this journal. it was really easy to work with and the result is amazing!

[10billionghosts]

Ahhh thank you so much! Extremely glad it's easy to use. ;u; I love what you've put together! It's very elegant.

[adonais]

Holy SHIT I love this so much.

[10billionghosts]

Glad you like it! c:

[skeine]

Thank you! Using it for this journal.

[10billionghosts]

Ahh I love the colors, very sherbet-y

[gurge]

hi! i'm using this code on this journal and i really love it, but had a question: is there a quick and easy way to make the first image the one "on top" of the second, instead of the way it is now? i'd appreciate it, thank you!

[10billionghosts]

Yep! It's a little involved to explain completely (in short, swap the order of the images and move the code for the shadows around), so I just went ahead and converted it. Here you go!

<lj-raw><div style="max-width:500px;width:100%;height:425px;margin:0 auto;display:grid;grid-template-rows:.75fr 1fr .54fr;grid-template-columns:1fr 1fr;font-family:arial, helvetica, sans serif;font-size: clamp(10px, 1vw, 12px);text-align:center;color:#fff;"> <!-- BACKGROUND; change #a86076 to change the color of the circle, BG_URL can be changed to a URL for a background image if wanted, but not necessary --> <div style="grid-row-start:1;grid-row-end:4;grid-column-start:1;grid-column-end:3;max-width:425px;width:100%;height:425px;margin:0 auto;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;align-content:center;border-radius:50%;background:#a86076 url('BG_URL');"> <!-- BACKGROUND; end of the top of the background wrapper --> <!-- PORTRAIT PHOTOS; be sure to change the two instances of IMG_URL here --> <div style="max-width:350px;width:100%;height:375px;display:grid;grid-template-columns:1fr 75px 1fr;grid-template-rows:75px 1fr 75px;gap:0;"> <div style="grid-column-start:1;grid-column-end:3;grid-row-start:1;grid-row-end:3;;border:10px solid #fff;box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;background:transparent;"></div> <div style="grid-column-start:2;grid-column-end:4;grid-row-start:2;grid-row-end:4;border:10px solid #fff;background:#ccc url('IMG_URL')center;box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;background-size:cover"></div> <div style="grid-column-start:1;grid-column-end:3;grid-row-start:1;grid-row-end:3;border:10px solid #fff;background:#ccc url('IMG_URL')center;background-size:cover"></div> <!-- credit --> <div style="grid-column-start:2;grid-column-end:4;grid-row-start:4;grid-row-end:5;padding:3px;font-size:10px;text-align:right;"><a title="code credit!" href="http://10billionghosts.dreamwidth.org" style="text-decoration:none;color:#ddd;">code</a> </div> <!-- credit; end --> </div> <!-- PORTRAIT PHOTOS; end --> </div> <!-- OVERLAY LAYER; this entire section can be deleted if you'd just like the circle with the two portrait images --> <div style="grid-row-start:2;grid-row-end:3;grid-column-start:1;grid-column-end:3;display:flex;flex-wrap:wrap;justify-content:center;align-items:end;align-content:end;gap:5px;"> <!-- THE UPPER LABEL; don't want an upper header? delete this section! text looks best in all caps --> <div style="width:100%;padding-left:10px;line-height:1;font-size: clamp(17px, 2vw, 22px);letter-spacing:1.5px;text-align:left;font-weight:bold;text-shadow: 1px 2px 0px rgba(0,0,0,0.3), 0px 0px 2px rgba(0,0,0,0.3);"> !!UPPER HEADER TEXT!! </div> <!-- THE UPPER LABEL; end --> <!-- LINKS; copy and paste more links into this section as needed, for best aesthetic results, add links in groups of four. delete this section entirely if you don't want any links --> <a href="#URL_HERE" style="max-width:117px;width:23%;padding:5px 0;text-decoration:none;background:#d10846;color:#fff;">link</a> <a href="#URL_HERE" style="max-width:117px;width:23%;padding:5px 0;text-decoration:none;background:#d10846;color:#fff;">link</a> <a href="#URL_HERE" style="max-width:117px;width:23%;padding:5px 0;text-decoration:none;background:#d10846;color:#fff;">link</a> <a href="#URL_HERE" style="max-width:117px;width:23%;padding:5px 0;text-decoration:none;background:#d10846;color:#fff;">link</a> <!-- LINKS; end -- post any additional links you want above this line --> <!-- THE LOWER LABEL; this can be deleted if you don't want a footer --> <div style="width:100%;padding-right:10px;line-height:1;font-size: clamp(17px, 2vw, 22px);letter-spacing:1.5px;text-align:right;font-weight:bold;text-shadow: 1px 2px 0px rgba(0,0,0,0.3), 0px 0px 3px rgba(0,0,0,0.5)"> !!LOWER HEADER TEXT!! </div> <!-- THE LOWER LABEL; end --> </div> <!-- OVERLAY LAYER; end --> </div></lj-raw></center>

[gurge]

oh lovely, thank you so much! ♥