[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

[occultamorus]

Question: the clouds/rainbow images you have REALLY work for one of my characters. Would it be possible to use those in the code?

[fuck1ngusernam3]

Hello! I love this and am trying to adapt it so there is only one single background image that stays in place behind all the links while the user scrolls, but clearly I only know just enough bits and pieces about html and css to get myself in trouble because my background image is there but so zoomed in and indistinct it's impossible to tell what it is. Do you know why this might be happening?

I commented out your html for all the images, added a couple links, removed the background of the first div and added it back in by creating a new class for it and putting the css, in the format you have it for the fancy stuff, for that class in the custom journal layout. The changed parts look like this:

<!--background color info gone from that gap in the middle--> <div style="display: grid; grid-gap: 10px; padding: 10px; border: 10px solid #333; 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;" class="mirror"> <!--css that got put into layout customization--> .mirror { background: center/cover url('https://fuck1ngusernam3.dreamwidth.org/file/8048.png') fixed, #ddd !important; }

Currently it looks like this. It's supposed to be the image of a face in profile, and I can tell whatever images I try to put there do get put there, just... changed, for some reason. The version I'm using is the vertical 500x500 one, and my background image is 500px wide and 571px high, but I tried trimming my background image to 500x500 and now it seems like even the original image is even more zoomed in. I'm pretty amused by this because it means I'm still not sure whether the size of the background images I'm using is the issue.

No worries if figuring this out would take too long, I'm just not sure what to google to try and figure out what I'm not understanding about what I'm doing. It's not essential that it looks fancy anyway, I got it working without the fancy stuff, but on the off chance there's a simple solution for this I figured I'd ask. Thanks for the navigation page theme, it's cool!

[wildefae]

I literally had to stare at this several times to understand that it's just the scrolling and the types of images you used that makes it look like the image blocks have their own color filters that are moving over background pictures. WHAT A COOL EFFECT.

Two questions:
1. If one wanted to use two alternating photos for the fancy version -- say, column 1 and column 3 were one picture and column 2 and column 4 were another, if using the vertical version (now that I'm describing this it might need more gridding to make this look coherent but that's the idea, anyway -- sort of like these kind of collages: 1, 2) -- is there a shorter way to indicate that?

For example - could you list the second column's grid areas for the same link? Or do you just have to do them all together?

And 2) Do you have a particular stock site you like more for finding these kind of pics, or just a really good search term? I'm trying to redecorate and I LOVE your rainbow/candy-colored/pastel/etc themes. If it's just "rainbow" I can run with that, but I feel like I find a lot of not-quite-what-I'm-looking-for that way too.