Archived topic
GP Site Lib - Landing - Site Footer: blue shape as (c) text background image
15 replies · Started by wo on January 31, 2023
Hey all,
I am customizing the "Landing" theme, installed from the GP Site Library. It`s got this blue V shape as SVG. I want this shape to be the background image of my GP Element Site Footer.
In the foreground, a simple paragraph is required, consisting of (c) and the usual suspect links.
Whatever I tried, I could not manage to
- make the text line visible, above the blue background
- let the shape use the entire width
- without any gap to the bottom
Please help me out, step by step.
The site under construction is this.
Thank you so much in advance
Wolfram
Hi there,
It's a bit difficult to visually what you are trying to achieve.
Have you considered using the Shape option instead of a background image for that blue shape?
https://docs.generateblocks.com/article/container-overview/#shapes
The intended visual experience is exactly the same as the original GP Site Library "Landing". It's about a white copyright text line over this purple shape.
I noticed on accident, the "Landing" shape is linked to GP Home. So I downloaded it to my media library and link it from there. Should not make any difference.
My problem is the interdependance of several settings all over the place.
This shape is SVG. I want it to cover the entire browser window, from left to right, sticking to the bottom line.
I want it to be in background, in order to have the copyright text / link line visible, in front of this background, as can be seen in the GP Site Library Demo of your theme "Landing".
So you are just trying to replicate the original Landing?
If so the SVG shape is added to the last container on the home page:
https://www.screencast.com/t/EU1EAlVrYD
And here are the original settings:
https://www.screencast.com/t/H8KvD7c4
Yes. If you will, it's just a replication. As far as I remember, the original has no site footer. And the shape is not properly set for responsiveness.
Anyway, this is what I get, on the Container > Shape route:
I'm not seeing this in your live site - I need to inspect the code to provide a suggestion.
Can you confirm?
Ok. Now it's live again.
Just to confirm, you are using a block element site footer right?
If so I don't believe you need two containers for this.
Try this structure with the Inner z-index of the container set to 2:
https://www.screencast.com/t/pHH2suBtKCOr
Thank you.
Yes. It's about setting a block element as site footer.
The structure you suggested works indeed. At least, we are back to a working z-index. My problem is: I'd like to keep the original shape, that's incorporated with your "Landing" theme. This is not included in the standard shape collection, GP (or GB?) provides.
As a strict believer in SVG, I think, it doesnt matter if I use standard SVG or custom. But when I am assigning the custom shape as the background image, I lose access to z-index.
I am sure, there is a CSS workaround, for which I'm too stupid to invent.
Here are two screenshots of my last results:
And here is the link to download the custom shape (copied from GP Site Lib Landing theme)
Did you get it to work using the background image?
This is what I'm seeing now:
https://www.screencast.com/t/UC2H1aD1i6
Fresh-minded, I gave it another try et voilà!
Somehow the intended z-index is accepted for the background svg as well (do you guys have a secret backdoor? :))
This CSS helps:
/* FOOTER (C) LINKS */
.footer-copyright-links {
margin-top: 14rem;
margin-bottom: 0.5rem;
text-align: center;
}
.footer-copyright-links, .footer-copyright-links a{
color: #fff ;
}
.footer-copyright-links a:hover {
color: #00a9ff;
}
These margins are completely trial and error. Seem to work, except if the user decides to zoom out some steps.
Do you know - finally - what I could do to stick this copyright line to the bottom of the screen, having a responsively constant margin, even when the user is zooming out for some secret reasons?
Anyhow, thanks for your patience!
what I could do to stick this copyright line to the bottom of the screen
I checked a few responsive views and the copyright is always at the bottom of the screen from what I can see.
Is there a specific width that you are seeing this issue?
On Firefox, Zoom in 100 - 500 % is ok. Zoom out 100 - 80 % is ok as well.
But then zooming out 67 %, the bottom text line jumps up. Zooming out 33 %, no text line is visible anymore. It's white on white.
On Chrome, same story. Kind of weird. But practically not super important.
Do you anyway have an idea, what I could do to enjoy my perfectionism?
If not, no problem. I am already considering this topic as solved.
Zoom is very difficult to deal with unfortunately :)
As said, for now, I'm very happy with the solution. Thanks again for your support. Until next :)