[Resolved] Alternative background colors for masonry blog layout

[Pradeep]

Hello there,

Apologies if this has been asked before (I did a search but nothing returned). Is there a way we can alternate background colors of post excerpts on blog page? Ideally something we can achieve through CSS or hooks, as opposed to changing jQuery file.

Many thanks in advance.

Pradeep

[Leo]

Hi there,

Give this CSS a shot:

.entry-summary {
    background-color: #ffffff;
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

[Pradeep]

Hi Leo,

Thanks for the reply. Sorry I didn’t make it clearer. What I’m after is 2 background colours. Let’s say the bricks with odd numbers get the red background and the ones with even numbers get blue background. I’m trying to find a way to automate it so I don’t have to change the background colour of each brick manually. Hope this is clear enough.

Thanks in advance.

[David]

You could use the nth-of-type CSS something like this:

.blog .type-post:nth-of-type(odd) .entry-summary {
    background-color: #abc;
}

Create one for ‘odd’ and ‘even’ or even select a number

[Leo]

ahh right thanks David!!

[Pradeep]

Perfect! That’s exactly what I was looking for 🙂 Many thanks!

[David]

Your welcome. I think i found the basis of the code here anyway! Just added it to my scrap book in case it came in handy. Of course since i been use WP Show Posts its been collecting dust! So glad it got some use.

[Author]

Posts