-
swissky
Hey,
We are using QueryLoop to show posts on Categories.
Now we are preparing for Xmas 😉We would like to add a svg image on top of the Big post. For that we already have just one single query loop. The problem is to get that image on top. Using the Advance Background solves the issue, but disabled the dynamic featured image.
Do you have an idea to solve the issue?
-
swissky
And a follow up:
I have two images – a jpg and a svg which i would like to have both as background. The svg on top of the jpg (Link 3). I changed the settings a little bit, so it should work like the documentation said, but it doesn`t.
-
Hi there,
I wonder if it would be easier to add the SVG as a Shape to the Container?
Alternatively, we could add them as regular images inside of the same Container that has the background image, and tell them to
position: absolute
so they sit on top?Let me know 🙂
-
swissky
Hey Tom
Thank you for your time. I tried it with a Sharpe (its active now) but maybe something is wrong with my settings, to its not there where it should be. Any Tip?
Btw any idea for my second message?
-
Hi there,
theres a couple of issues:
1. Overflow Hidden
The parents container with the class oflines-separation_gap_48
And the Query Loop – Post Template block
Both of them have Overflow set to Hidden
This would need to be changed to overflow default2. vertical position of shape.
Select the query loop post template block and give it a CSS Class of:has-xmas-overlay
Then add this CSS to pull the shape up.
.has-xmas-overlay .gb-shape { top: -60px !important; }
-
swissky
Hey David
Thank you.
I just found one Overflow on the elements to change. I added the CSS but need a hack to get the rest of the image in front of the white background.And did you could help me here a little bit https://generate.support/topic/svg-graphic-on-top-of-query-loop-image/#post-129757
-
swissky
oh now also the border radius is gone after changing overflow
-
yeah the border radius will break if you remove overflow hidden
If you leave overflow hidden then it means you won’t see the shape overflow above the post. Does that work for you ? -
swissky
okey thank you. But what would be now the right setting to get the Now over the Box like on link 2
-
The Container with the background image.
Change its Layout > Overflow X and Overflow Y to VISIBLE. -
swissky
Done, now the border is gone and the sharpe is still not right.
https://share.cleanshot.com/CPffcg8wy1jS3yZKdknZ -
1. Set post template container’s overflow-x and overflow-y to hidden.
2. Add the shape to the parent container of the query loop instead of adding it to the post template.
-
swissky
Hey Ying
Thank you. I made these things, also moved the
has-xmas-overlay
to that container. But now its still not over the Container.Best Kevin
-
The Container with the
.lines-separation_gap_48
class attached to it.
You need to set its Layout > Overflow to visible -
swissky
Wonderful 😉
Now we have the issue with the grid lines, which are not perfect there and this is still open
https://generate.support/topic/svg-graphic-on-top-of-query-loop-image/#post-129757 -
You currently have 5 lines, is there only supposed to be 2 lines, 1 vertical and 1 horizontal?
- You must be logged in to reply to this topic.