- This topic has 7 replies, 2 voices, and was last updated 3 years, 5 months ago by
David.
-
AuthorPosts
-
November 11, 2022 at 8:42 am #2411550
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,
SaschaNovember 11, 2022 at 8:54 am #2411574David
StaffCustomer SupportHi 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 ?November 11, 2022 at 9:20 am #2411610Sascha
Here’s the current version, currently we have defined 2 colours for this purpose:
accent-green
accent-yellowand will add 2 more, so when we have 8 blog-posts, each one should be “framed” by a different colour
November 11, 2022 at 9:28 am #2411627David
StaffCustomer SupportTheres a few options to do this, the simplest is to use the
nth-childpseudo 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-greenNovember 11, 2022 at 9:36 am #2411640Sascha
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?
November 11, 2022 at 9:48 am #2411646David
StaffCustomer SupportLoop Template allows you to rebuild the entire archive or blog pages.
More info:The Themes has
archive.phpandindex.phptemplates.
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 relevantcontent.phptemplate.With a Block Element – Content Template you can replace the individual post
content.phptemplate.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 Templateoption.November 12, 2022 at 6:29 am #2412400Sascha
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?
November 12, 2022 at 7:40 am #2412483David
StaffCustomer SupportWhenever 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 -
AuthorPosts
- You must be logged in to reply to this topic.