Archived topic
Alternating backgrounds on a container within a query loops template & grid
3 replies · Started by Michael on October 30, 2022
pretty straight forward but, I haven't figured out how to get an alternating background going. basic structure is the query loop, within the post template i have a container > a two column grid > first column container > and a container with in that where im trying to have an alternating background, namely two different linear gradients representing the brands two main colors. This is on a page pointing to a set of posts from a custom post type. I'm able to change the background of a specific instance using the post id in the css, but cant get a 'nth child' working on my own. Feel like I'm missing what should be way easier to figure out.
here's the code to change an instance of the background, with 'zoom' and 'imgshapes' being the classnames I have on the container in question in two different queries:
.zoom, .imgshapes {
background-image: linear-gradient(135deg, var(--accent), var(--accent-dark) 15%, rgba(0, 0, 0, 0) 15.2%, rgba(0, 0, 0, 0) 84.8%, var(--accent-dark) 85%, var(--accent));
}
.post-343695 > .gb-container > .gb-inside-container > .gb-container > .gb-inside-container > .gb-grid-wrapper > .gb-grid-column > .gb-container > .gb-inside-container > .zoom {
background-image: linear-gradient(135deg, #0059e8, var(--contrast) 15%, rgba(0, 0, 0, 0) 15.2%, rgba(0, 0, 0, 0) 84.8%, var(--contrast) 85%, #0059e8);
}
Hi there,
to use nth-child, you can:
1. Select the Grid Block inside your Query Loop. Give it a class eg. alternate-backgrounds
2. Use that class to target the direct descendant gb-grid-column element with nth-child, then the target element. Eg.
.alternate-backgrounds > .gb-grid-column:nth-child(odd) .imgshapes {
/* your odd post img shapes style */
}
.alternate-backgrounds > .gb-grid-column:nth-child(even) .imgshapes {
/* your even post img shapes style */
}I really appreciate it. got it working very quickly with that code.
Awesome - glad to be of help
