Archived topic
Created Related post with featured image using GB Query Loop Block
5 replies · Started by Henry on November 28, 2022
I’ve created a list of post on the sidebar using GB Query Loop Block (Check link: https://scholarsly.com/letter-of-sponsorship-for-student-visa/). How do I achieve something similar to https://share.getcloudapp.com/P8uNpyro.
And also another with numbering but without featured image.
Hi there,
in the GB Patterns library there is a Free footer pattern containing that Query Loop layout - see here:
You could copy that.
To add the Counter would require some CSS. Let me know once you have the design fixed on your site, and ill take a look at that.
I've just copied the design to my sidebar. Kindly check via the post list shared above.
Hi Henry,
I see. For the counter, can you try adding this through Appearance > Customize > Additional CSS:
.inside-right-sidebar {
counter-reset: section;
}
.inside-right-sidebar .gb-query-loop-item {
position: relative;
}
.inside-right-sidebar .gb-query-loop-item::before {
counter-increment: section;
display: block;
content: counter(section);
position: absolute;
padding: 5px;
top: 0;
left: 0;
color: #fff;
z-index: 100;
transform: translate(-35%, -40%);
}
.inside-right-sidebar .gb-query-loop-item::after {
background-color: #5555ff;
content: "";
position: absolute;
border-radius: 100%;
height: 30px;
width: 30px;
transform: translate(-40%, -40%);
border: solid 2px #fff;
top: 0;
left: 0;
z-index: 99;
}Works perfectly..
Thanks Fernando.
You're welcome, Henry!
