[39] FANCY Navigation

[lina_trinch]

Vertical Code:
<div style="display: grid; grid-gap: 10px; padding: 10px; border: 10px solid #333; background: #fff; width: 500px; height: 500px; margin: auto; grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr; font-family: Arial, Helvetica, sans-serif; text-align: center;"> <!--COL 1 IMAGE 1--> <div style="grid-area: 1 / 1 / 2 / 2; background: center/cover url(IMAGE_URL), #ddd;" class="bg1"></div> <!--COL 1 LINK--> <a href="URL" style="grid-area: 2 / 1 / 3 / 2; background: #ddd; padding: 28px 0 0; text-decoration: none; color: #fff; text-shadow: 0 0 3px #000;">Link</a> <!--COL 1 IMAGE 2--> <div style="grid-area: 3 / 1 / 7 / 2; background: center/cover url(IMAGE_URL), #ddd;" class="bg2"></div> <!--COL 2 IMAGE 1--> <div style="grid-area: 1 / 2 / 4 / 3; background: center/cover url(IMAGE_URL), #ddd;" class="bg3"></div> <!--COL 2 LINK--> <a href="URL" style="grid-area: 4 / 2 / 5 / 3; background: #ddd; padding: 28px 0 0; text-decoration: none; color: #fff; text-shadow: 0 0 3px #000;">Link</a> <!--COL 2 IMAGE 2--> <div style="grid-area: 5 / 2 / 7 / 3; background: center/cover url(IMAGE_URL), #ddd;" class="bg4"></div> <!--COL 3 IMAGE 1--> <div style="grid-area: 1 / 3 / 3 / 4; background: center/cover url(IMAGE_URL), #ddd;" class="bg5"></div> <!--COL 3 LINK--> <a href="URL" style="grid-area: 3 / 3 / 4 / 4; background: #ddd; padding: 28px 0 0; text-decoration: none; color: #fff; text-shadow: 0 0 3px #000;">Link</a> <!--COL 3 IMAGE 2--> <div style="grid-area: 4 / 3 / 7 / 4; background: center/cover url(IMAGE_URL), #ddd;" class="bg6"></div> <!--COL 4 IMAGE 1--> <div style="grid-area: 1 / 4 / 5 / 5; background: center/cover url(IMAGE_URL), #ddd;" class="bg7"></div> <!--COL 4 LINK--> <a href="URL" style="grid-area: 5 / 4 / 6 / 5; background: #ddd; padding: 28px 0 0; text-decoration: none; color: #fff; text-shadow: 0 0 3px #000;">Link</a> <!--COL 4 IMAGE 2--> <div style="grid-area: 6 / 4 / 7 / 5; background: center/cover url(IMAGE_URL), #ddd;" class="bg8"></div> </div> <!--CREDIT--> <a href="https://killthecake.dreamwidth.org/" style="display:block; width: 540px; text-decoration: none; color: #333; font-family: Arial, Helvetica, sans-serif; font-variant: small-caps; letter-spacing: 2px; font-weight: bold; margin: auto; text-align: right;font-size: 12px;">killthecake</a>


Horizontal Code:
<div style="display: grid; grid-gap: 10px; padding: 10px; border: 10px solid #333; background: #fff; width: 600px; height: 400px; margin: auto; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; grid-template-rows: 1fr 1fr 1fr 1fr; font-family: Arial, Helvetica, sans-serif; text-align: center;"> <!--COL 1 IMAGE 1--> <div style="grid-area: 1 / 1 / 2 / 2; background: center/cover url(IMAGE_URL), #ddd;" class="bg1"></div> <!--COL 1 LINK--> <a href="URL" style="grid-area: 1 / 2 / 2 / 3; background: #ddd; padding: 38px 0 0; text-decoration: none; color: #fff; text-shadow: 0 0 4px #000;">Link</a> <!--COL 1 IMAGE 2--> <div style="grid-area: 1 / 3 / 2 / 7; background: center/cover url(IMAGE_URL), #ddd;" class="bg2"></div> <!--COL 2 IMAGE 1--> <div style="grid-area: 2 / 1 / 3 / 4; background: center/cover url(IMAGE_URL), #ddd;" class="bg3"></div> <!--COL 2 LINK--> <a href="URL" style="grid-area: 2 / 4 / 3 / 5; background: #ddd; padding: 38px 0 0; text-decoration: none; color: #fff; text-shadow: 0 0 4px #000;">Link</a> <!--COL 2 IMAGE 2--> <div style="grid-area: 2 / 5 / 3 / 7; background: center/cover url(IMAGE_URL), #ddd;" class="bg4"></div> <!--COL 3 IMAGE 1--> <div style="grid-area: 3 / 1 / 4 / 3; background: center/cover url(IMAGE_URL), #ddd;" class="bg5"></div> <!--COL 3 LINK--> <a href="URL" style="grid-area: 3 / 3 / 4 / 4; background: #ddd; padding: 38px 0 0; text-decoration: none; color: #fff; text-shadow: 0 0 4px #000;">Link</a> <!--COL 3 IMAGE 2--> <div style="grid-area: 3 / 4 / 4 / 7; background: center/cover url(IMAGE_URL), #ddd;" class="bg6"></div> <!--COL 4 IMAGE 1--> <div style="grid-area: 4 / 1 / 5 / 5; background: center/cover url(IMAGE_URL), #ddd;" class="bg7"></div> <!--COL 4 LINK--> <a href="URL" style="grid-area: 4 / 5 / 5 / 6; background: #ddd; padding: 38px 0 0; text-decoration: none; color: #fff; text-shadow: 0 0 4px #000;">Link</a> <!--COL 4 IMAGE 2--> <div style="grid-area: 4 / 6 / 5 / 7; background: center/cover url(IMAGE_URL), #ddd;" class="bg8"></div> </div> <!--CREDIT--> <a href="https://killthecake.dreamwidth.org/" style="display:block; width: 640px; text-decoration: none; color: #333; font-family: Arial, Helvetica, sans-serif; font-variant: small-caps; letter-spacing: 2px; font-weight: bold; margin: auto; text-align: right;font-size: 12px;">killthecake</a>


Code to make it ✨FANCY✨ (optional):
.bg1 { background: center/cover url(IMAGE_URL) fixed, #ddd !important; } .bg2 { background: center/cover url(IMAGE_URL) fixed, #ddd !important; } .bg3 { background: center/cover url(IMAGE_URL) fixed, #ddd !important; } .bg4 { background: center/cover url(IMAGE_URL) fixed, #ddd !important; } .bg5 { background: center/cover url(IMAGE_URL) fixed, #ddd !important; } .bg6 { background: center/cover url(IMAGE_URL) fixed, #ddd !important; } .bg7 { background: center/cover url(IMAGE_URL) fixed, #ddd !important; } .bg8 { background: center/cover url(IMAGE_URL) fixed, #ddd !important; }

❖ Before we get started, just a disclaimer that this code was released a month early over on the Patreon to my subscribers. c: ❖ Now, as you can see, there is a Vertical and Horizontal version of this code. Choose whichever you want. The "fancy" code comes into play if you want the images to remain in place while a user scrolls through your journal. This will ONLY work on your journal. It will not work when a user views the entry directly. But please note, the fancy code is not necessary. The original code will work just fine without it. ❖ Make sure Disable Auto-Formatting is checked when you copy/paste the code into your post. ❖ If you don't want to bother with the fancy-ing, feel free to skip down to the Ctrl+F & Replace section. If you do want to bother, keep reading. ❖ NEW: Please keep in mind that any image you decide to use for the "fancy" code needs to be the size of a desktop wallpaper. If it's small (like 1000x1000 or 100x100) then the image will stretch. ❖ After you finish installing the code in an entry, head over to the Custom CSS of your journal layout. At the bottom of your layout's code, add the code to make it ✨FANCY✨ from above. Your custom layout will be just fine. ❖ In your entry, you'll see things like class="bg1". You'll want to use the same image that you put in this tag into the .bg1 portion of the layout's code. Then you do the same with all the others. ❖ Additional note: You can change the classes if you use the same image multiple times if you want to condense code (but if you're not sure how that works, you can ask me and I'll try to do it for you). Ctrl+F & Replace: ❖ IMAGE_URL - image urls in both the html and css ❖ Link - link text ❖ URL - link urls #333 navigation border & credit #fff navigation background & links #000 link text shadow #ddd image placeholder & link background

Comments

[go_loud]

I'm sorry! I think I'm probably overthinking or not understanding, and it doesn't make sense to you, because -- as you point out, I haven't actually done it. So I'm possibly not asking the right questions.

Thank you for all your help! I need to narrow down WHAT images I'm using but I'll absolutely link you when I get that put up if I'm even still in need of it!

[Edit: ....in retrospect, I think also it's partly my perfectionism getting in the way. Having the colored boxes for links in the diagram makes it way less helpful. Those aren't at all information-giving, they're just me trying to imitate the grid. The only thing that I'm referring to is the image(s) and what part of it shows up in column 2 vs column 4, etc. But again, don't feel the need to answer any of this, I'll be back with some examples if I still don't get it!]