[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

[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.

[go_loud]

(As I'm looking at this, part of the question I realize I'm asking is that I want the visible image showing to kind of ...have that same effect as the linked collages, where you see further along in the image in each consecutive row, but it's interrupted by the alternating photo doing the same thing. I feel like there should be a way to specify what part of the image is visible with coordinates, probably, but I'm not quiiite advanced enough to know how...)

[Edit: oops! Was logged in as an RP journal. Same person!]

[lina_trinch]

Hi! I'm glad you like this code! Let me see if I understand what you're asking, though. Say you're using the vertical code and you have two images. What you're wanting is image A to go in columns 1 and 3, and image B to go in columns 2 and 4, right? Or more or less.

If so, that's absolutely possible. All you have to do is use the same image for whichever columns you want them to be in. It'll give you the exact same look as those example images you linked but only on the journal/"fancy" version. On the regular version that user's will see in entries, that won't be the case. Still, gotta keep in mind the dimensions of the images. They'll be acting as backgrounds and will be just as large, so it's best to pick images that will have the visual focus wherever you're putting the navigation on your screen. Like in the center, for example.

If you're asking if this can be condensed in the code, yes and no. You won't be able to condense down the HTML due to the nature of how grids work, but you can condense it in the CSS for those "fancy" effects. Like so:

.bg1, .bg3, .bg5 { background: center/cover url(IMAGE_URL) fixed, #ddd !important; } .bg2, .bg4 { background: center/cover url(IMAGE_URL) fixed, #ddd !important; }

If I just completely missed the mark on what you're asking, I'm sorry. ;;

Lastly, about the images! I just do a Google search, lol. If I see things I like, I save them and reuse them in my codes here and there. This is an album of the images used in this code. However, if you're wanting some recs of where to find nice stock images that aren't from Google, I have a resource list for that and a bunch of other stuff over on Github.

As far as search terms go, try adding in "aesthetic", "tumblr", "minimal", or just "wallpaper" or "background" into your search request. Searching for "rainbows aesthetic background" brings up some neat stuff. c:

Anyway, I hope I helped out somewhere in this wall of text, lol. orz Let me know if I totally missed the mark on what you were asking, though. Sorry about that. x.x

[go_loud]

Hi, sorry I took so long to reply, the last week has been a little crazy.
Yep! That's exactly what I was asking, at least most of it. Thank you, that's way easier for the CSS portion!

The second part, and you allude to it here a little bit, was -- is there a way to force the picture to show where it "should" show up? Because this is hard to describe in words, I drew a little diagram:



Basically --
a) am I overthinking this entirely and will it do this on its own if I just link the image?
b) if not (as I suspect) is there a way to push the image over on the second, third etc columns to where it would naturally be, using CSS (or HTML, or whatever)?
OR c) do you have to just edit and upload (#=columns) versions of the background, each physically moved over a little...and in that case, what's visible, the center of the image?

I AM SO SORRY I'M SO COMPLICATED.

And oh! That's so easy and I suspect you repeatedly doing that vs me having never done it has just gotten you better results. I'll check out your Github and definitely try playing around with "aesthetic" and "tumblr" -- those DO get you prettier results with things :P (Thanks Tumblr for all the ethereal mood boards!)

You helped out SO much! I hope the secondary question here isn't too baffling!

[lina_trinch]

I'm still not entirely sure what you're asking here, I'm sorry. I will say that, wherever you want your image, just add this:

background: center/cover url('IMAGE_URL') fixed;

Otherwise, it'll be better if you tried out whatever you were trying to do and then link me the attempt if you hit a wall. Sorry I'm not much help. I'm just confused.

[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!]