[Resolved] Change color of every second item

[Author]

Posts

[thomasR-9]

Tell us what you are trying to do?
I build a masonry grid for my elements. And now I want to change the color for every second item.

Is there any documentation that you are following?
No.

Is there a similar example that we can see?
No.

What is the link to your site?
<script src="hidden link"></script>
[wpv-layout-start]
[wpv-items-found]
<div class="masonry-grid">
<!-- wpv-loop-start -->
<wpv-loop>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 grid-item">
[wpv-post-body view_template="Loop item in Stimmen Alle Masonry"]
</div>
</wpv-loop>
<!-- wpv-loop-end -->
</div>
[/wpv-items-found]
[wpv-no-items-found]
[wpml-string context="wpv-views"]No items found[/wpml-string]
[/wpv-no-items-found]
[wpv-layout-end]

URL: hidden link

[Shane]

Hi Thomas,

Thank you for contacting our support forum.

To get this clear, you want every other item to have this correct?

Please let me know.

Thanks,
Shane

[thomasR-9]

Hi Shane,

yes, I want to change the color of the every other item (#1 grey, #2 blue, #3 grey ...). If it is possible, I want a free space (about 55 px) between the first and the second column.

Best,
Thomas

[Shane]

Hi Thomas,

Now I thought you wanted something like red,blue,red,blue. Alternating colors essentially.

With this requirement it won't be quite possible, unless we know the classname or ID of each item that is created. In your case it would be something that is generated dynamically so we wouldn't be able to know the classes of each new item that is added.

Let me know if this is clear.

What we can do is change the color of each alternate item between 2 colors.

Thanks,
Shane

[thomasR-9]

Hi Shane, how can I change the color of each alternate item between 2 colors? Best, Thomas

[Shane]

Hi Thomas,

Take a look here.

https://toolset.com/documentation/user-guides/views-shortcodes/#wpv-item

This is the shortcode we use to do this.

So lets say you have your view.

<wpv-loop>
    [wpv-item index=even]
   HTML for even output
    [wpv-item index=odd]
   HTML for odd output
 </wpv-loop>

For the even and odd outputs you can give them different classnames and from thi you can assign them alternating colors.

Please let me know if this helps.
Thanks,
Shane

[thomasR-9]

Hi Shane, it works not like I want. I tried this
<script src="hidden link"></script>
[wpv-layout-start]
[wpv-items-found]
<div class="masonry-grid">
<!-- wpv-loop-start -->
<wpv-loop>
[wpv-item index=even]
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 grid-item change-even">
[wpv-post-body view_template="Loop item in Stimmen Alle Masonry"]</div>
[wpv-item index=odd]
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 grid-item change-odd">
[wpv-post-body view_template="Loop item in Stimmen Alle Masonry"]
</div>
</wpv-loop>
<!-- wpv-loop-end -->
</div>
[/wpv-items-found]
[wpv-no-items-found]
[wpml-string context="wpv-views"]No items found[/wpml-string]
[/wpv-no-items-found]
[wpv-layout-end]

And in the css-class I defined the background:
.change-even {
background-color: #ffffff;
padding: 13px;
}

.change-odd {
background-color: #e9e9e9;
padding: 13px;
}

But the result under is not changing colors:
hidden link

[Shane]

Hi Thomas,

Its because you're using 2 colums, so all the evens would naturally line up with each other.

Try using a 3 column layout.

Thanks,
Shane

[thomasR-9]

Hi Shane, I tried a 3-column layout, see hidden link
but it didn't work.
What can I do?
Best, Thomas

[Shane]

Hi Thomas,

I'm not able to see this page.

Would it be possible to make this page public so that I can see what it looks like?

Thanks,
Shane

[thomasR-9]

Sorry, now you can see it!

[Shane]

Hi Thomas,

Could you add this to the loop as well ?

[wpv-item index=pad]

Please let me know if this helps.
Thanks,
Shane

[thomasR-9]

Hi Shane,

here is the code:
<script src="hidden link"></script>
[wpv-layout-start]
[wpv-items-found]
<div class="masonry-grid">
<!-- wpv-loop-start -->
<wpv-loop>
[wpv-item index=even]
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 grid-item change-even">
[wpv-post-body view_template="Loop item in Stimmen Alle Masonry"]</div>
[wpv-item index=odd]
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 grid-item change-odd">
[wpv-post-body view_template="Loop item in Stimmen Alle Masonry"]
</div>
</wpv-loop>
<!-- wpv-loop-end -->
</div>
[/wpv-items-found]
[wpv-no-items-found]
[wpml-string context="wpv-views"]No items found[/wpml-string]
[/wpv-no-items-found]
[wpv-layout-end]

Where can I add your code?

Best, Thomas

[Shane]

Hi Thomas,

Add it right before the closing </wpv-loop>

So it should be .

[wpv-items-found]
<div class="masonry-grid">
<!-- wpv-loop-start -->
<wpv-loop>
[wpv-item index=even]
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 grid-item change-even">
[wpv-post-body view_template="Loop item in Stimmen Alle Masonry"]</div>
[wpv-item index=odd]
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 grid-item change-odd">
[wpv-post-body view_template="Loop item in Stimmen Alle Masonry"]
</div>
[wpv-item index=pad]
</wpv-loop>
<!-- wpv-loop-end -->
</div>
[/wpv-items-found]

Please try this and let me know if it helps.
Thanks,
Shane

[thomasR-9]

Hi Shane, I copied your code and now my code looks like this:

<script src="hidden link"></script>
[wpv-layout-start]
[wpv-items-found]

<div class="masonry-grid">

<!-- wpv-loop-start -->

<wpv-loop>

[wpv-item index=even]

<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 grid-item change-even">

[wpv-post-body view_template="Loop item in Stimmen Alle Masonry"]</div>

[wpv-item index=odd]

<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 grid-item change-odd">

[wpv-post-body view_template="Loop item in Stimmen Alle Masonry"]

</div>

[wpv-item index=pad]

</wpv-loop>

<!-- wpv-loop-end -->

</div>

[/wpv-items-found]

[wpv-no-items-found]
[wpml-string context="wpv-views"]No items found[/wpml-string]
[/wpv-no-items-found]
[wpv-layout-end]

But it doesn't work!

Best, Thomas