[Resolved] Odd/Even styling using classic views

[Author]

Posts

[marioD-5]

Hello,

I have a view (loop pasted below this message), that has 3 columns and I'd like to apply an odd/even class styling.
I added the desired effect in the attached screenshot.

-----------------
[wpv-layout-start]
[wpv-items-found]
<!-- wpv-loop-start -->
<div class="container wpv-loop js-wpv-loop speakers_container">
<wpv-loop wrap="3" pad="true">
[wpv-item index=1]
<div class="row ">
<div class="col-md-4 speaker_odd">[wpv-post-body view_template="loop-item-in-view-speakers-in-an-event"]</div>
[wpv-item index=2]
<div class="col-md-4">[wpv-post-body view_template="loop-item-in-view-speakers-in-an-event"]</div>
[wpv-item index=3]
<div class="col-md-4">[wpv-post-body view_template="loop-item-in-view-speakers-in-an-event"]</div>
</div>
[wpv-item index=pad]
<div class="col-md-4"></div>
[wpv-item index=pad-last]
<div class="col-md-4"></div>
</div>
</wpv-loop>
</div>
<!-- wpv-loop-end -->
[/wpv-items-found]
[wpv-no-items-found]
[wpml-string context="wpv-views"]No speakers found[/wpml-string]
[/wpv-no-items-found]
[wpv-layout-end]
----------------------

[Minesh]

Hello. Thank you for contacting the Toolset support.

Toolset view's shortcode [wpv-item] offers the attribute index and with index attribute you can define the odd or even.

For example:

<wpv-loop>
    [wpv-item index=odd]
         add your content for odd index
    [wpv-item index=even]
         add your content for even index
       
 </wpv-loop>

More info:
=> https://toolset.com/documentation/programmer-reference/views/views-shortcodes/#vf-154400

[marioD-5]

Hi Minesh,

I got that part, but how can I still put them into a 3 columns layout?
Please check my code to see what I mean.

Thanks,

[Minesh]

As you want to use the pad and wrap attribute with your loop.

You can add styling that you want to add for odd to the following:
- [wpv-item index=1]
- [wpv-item index=3]

And you can add the even styling to the following:
- [wpv-item index=2]

[marioD-5]

Hi Minesh,

Please check the screenshot I attached in my initial question.
Your solution repeats the same pattern on each line:
1 = purple
2= red
3=purple

That's not exactly what I'm looking for.

Is there any other way you could think of?

Thanks for your assistance,

[marioD-5]

Nevermind, I figured it out.
I changed wrap=6 and explicitly declared index 1 through 6.

My issue is resolved now. Thanks,

[Minesh]

Great - you are welcome to mark resolve this ticket.

[marioD-5]

My issue is resolved now. Thank you!