[Support request] Different colors for Blog page

[Edwin]

Hi

Is there a way to have a different color for every blog line and display the rows in full width, but keep the content fixed.

Grey, White, Grey, White

As show in the screenshot

https://snipboard.io/yTknBo.jpg

Thanks

Edwin

[David]

Hi there,

you can:

1. Make the Blog page full width using a Layout Element:

https://docs.generatepress.com/article/layout-element-overview/

2. Use a Content Template to build your post design.

https://docs.generatepress.com/article/block-element-content-template/

The first part of that design would include a Container Block, set its inner width to what you require. And give it a CSS class of custom-post-container in Advanced > Additional CSS class(es)

Then build your post card inside that.

Once thats done we can sue some CSS to change background colors for every odd container eg.

.gb-container.custom-post-container:nth-child(odd) {
    background-color: #ccc !important;
}

[Edwin]

Thanks for that. I didn’t know about that functionality. It will make life much easier 🙂

I followed the tutorial and the blog is working, however it is showing 3 articles and it repeats itself with the same blog articles.
When i scroll down to the bottom i can still see the normal blog articles.

I added the css to the container but only showing one color.

https://snipboard.io/45uFsK.jpg
https://snipboard.io/duom7j.jpg

Thanks

Edwin

[David]

You don’t want to add a Post Block inside as that is adding a list of posts inside every post in your loop.
Just build the post content template for the individual post. The video in the doc shows how:

https://docs.generatepress.com/article/block-element-content-template/

[Edwin]

Thanks David,

That worked, but color is still only showing grey.

I tried

.gb-container.custom-post-container:nth-child(odd) {
background-color: #ededed !important;
}

.gb-container.custom-post-container:nth-child(even){
background-color: #fffffff!important
}

[David]

Aah ok – change the CSS to:

.blog .dynamic-content-template:nth-child(odd) {
    background-color: #ccc !important;
}

[Author]

Posts