Post list styling

Hello???

Hi @beitsiach,

I couldn’t reach your topic in due time and I’m sorry for that.
The article you’ve tried works if the posts are displayed by the theme, in your case being displayed by the plugin the add_filter doesn’t work as there’s no filter in the plugin to hook into.
If you just need to style odd and even posts you could try achieving this directly through CSS. Building on the sample CSS from the article the code you could use is this:

.obfx-grid-wrapper:nth-child(even) {
	background-color: red;
}

.obfx-grid-wrapper:nth-child(odd) {
	background-color: green;
}

And here’s the result: https://prntscr.com/o6i101

Thank you, raducan, that worked perfectly.
A question:
I have the blog in horizontal (list) layout. If I wanted to alternate the image float on on and even posts, how could I do that?
Thank you,
Vera

I’m glad it worked ??

To alternate the images you can use one of the following codes depending on how you want them to look:

1. 1. Even posts have the image to the right, the odd ones keep it on the right as it is by default:

   .obfx-grid-container .obfx-grid-wrapper:nth-child(even) .obfx-grid-col {
   	flex-direction: row-reverse;
   }

   This is the result: https://prntscr.com/o6xr95

2. 2. Even posts have the image to the left and the odd ones to the right:

   .obfx-grid-container .obfx-grid-wrapper:nth-child(odd) .obfx-grid-col.obfx-grid-col {
   	flex-direction: row-reverse;
   }

   This is the result: https://prntscr.com/o6xtbm

Thank you raducan.
This also works beautifully.
This is the page I am working on (a bilingual site, Hebrew – English). You can see everything is as it should be, in accordance with the whole site’s design and layout.
I have a shift in color under the picture, which goes left on one color and right on the other. However, I couldn’t find how to alternate them here, they all go in one direction.
I was doing them, before, when I didn’t have the alternating code, with this CSS:

.obfx-grid-col-image{
    border:1px solid #000;
    margin:10px -10px 10px 10px !important;
}

Perhaps it is the wrong way of creating this shift?
How could I make the yellow appear to go left behind the picture and the orange – right?
Thank you for your kind assistance.
Vera

You’re welcome ??

I can’t see the link, can you send it again?

Sorry, forgot to paste it. ??
Hebrew page:
https://test.eichut.net/test-blog-page/
English page:
https://test.eichut.net/en/%d7%91%d7%9c%d7%95%d7%92-%d7%a0%d7%99%d7%a1%d7%99%d7%95%d7%9f/
or via the language flag in the menu…
Thank you!
Vera

As I can tell from the page the color is added as background to the a section that is as width as the text (I hope I’m not too hard to understand). So the thing is you’d have to move that entire div which seems difficult… Why not try to move the image left/right?

Raducan,
Well, that is where I started from. I wanted to move the image a bit left and right, as I was doing in the other pages with the sections. But I haven’t found a way to do this that would achieve the effect.
This is the only way I found.
Can you tell me how to shift the picture?
Also, the image some times covers the whole frame, that is the whole width of the element, and some times doesn’t (scales per the height of the element) and it needs to be refreshed.
Thank you,
Vera

raducan?
Any suggestions?
I am preparing to go live in the next couple of days, so it would really help.
Thank you,
Vera

raducan,
Thank you so much for your help.
I found the solution with the image, as you suggested. I used the box-shadow property. So simple! I was just thinking about it wrong!
All done just as I wanted it.
Thank you again,
Vera