[Support request] How to “rotate” bg-colours on Query-Loop items?

[Sascha]

Hi

I have created a blog-layout on this page, where the “Post Template” block inside the “Query Loop” block has applied the bg-colour “accent-yellow”.

I’d like to kinda “swap” the bg-colour for each post, how can I do this?

Thank you in advance and kind regards,
Sascha

[David]

Hi there,

can i see what you have so far?

And when you say:

I’d like to kinda “swap” the bg-colour for each post, how can I do this?

How many colors are there? Will each post have a different color ?
Or for example is there only 2 colors that alternate between the posts ?

[Sascha]

Here’s the current version, currently we have defined 2 colours for this purpose:

accent-green
accent-yellow

and will add 2 more, so when we have 8 blog-posts, each one should be “framed” by a different colour

[David]

Theres a few options to do this, the simplest is to use the nth-child pseudo selector in some CSS:

.gb-query-loop-item:nth-child(2) {
    --accent-green: #f00;
}
.gb-query-loop-item:nth-child(3) {
    --accent-green: #0f0;
}
.gb-query-loop-item:nth-child(4) {
    --accent-green: #00f;
}

You create a separate CSS rule that targets the nth-child(#) in the post loop. And that switches the value of the color variable you have set for the background color ie. --accent-green

[Sascha]

Nice one, thanks a lot!

By the way: I have created this blog-layout as a page, which was pretty simple with help of the Query Loop block. Now I’ve heard about the new “Loop Template” Element Type and wonder about its use-case.

Can you please tell me about 1-2 sample-use-cases, where it’s better to use an Element with Loop Template instead of Page with Query Loop blocks?

[David]

Loop Template allows you to rebuild the entire archive or blog pages.
More info:

The Themes has archive.php and index.php templates.
When viewing the blog, the search or any archive eg. Categories, WordPress loads the relevant template.
Inside each template is the WordPress Loop.
The loop function is what gets all the posts for that specific query, and for every post it finds it displays it using the relevant content.php template.

With a Block Element – Content Template you can replace the individual post content.php template.

With a Block Element – Loop Template you can replace the Entire Loop function, with whatever you want, including a GB Query Loop. If you use a GB Query Loop then you enable its Inherit Query from Template option.

[Sascha]

Thanks Dave, now it’s clearer to me, but to be on the safe side, I try to replicate the workflow:

Whenever I need to display blog-posts on another page, I simply edit that page and add the Query Loop Block.

Whenever I need to style the default blog-archive or a category-archive, I should create a Block-Element, set it to Loop Template and add the Query Loop Block here.

Correct?

[David]

Whenever I need to display blog-posts on another page, I simply edit that page and add the Query Loop Block.

Correct, for Static Pages or Posts. Edit them and add a Query Loop block with the specific params you require.

Whenever I need to style the default blog-archive or a category-archive, I should create a Block-Element, set it to Loop Template and add the Query Loop Block here.

Correct that is one option.
Note my comment above: If you use a GB Query Loop then you enable its Inherit Query from Template option.
This will allow you to create 1 x Block Element Loop Template for many or ALL archives and GP/WP will automatically set the query params

[Author]

Posts