Skip Navigation

[Gelöst] Change color of every second item

Dieser Thread wurde gelöst. Hier ist eine Beschreibung des Problems und der Lösung.

Problem:

The issue here is that the user wanted to change the background color of every other item that is displayed in their view loop.

Solution:

This can be done by using the [wpv-item] shortcode with the index attribute odd and even.

Example

[php]

[wpv-item index=even]

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

[wpv-item index=odd]

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

[php]

Where you can assign different css classes to the odd and even items.

This support ticket is created vor 6 Jahren, 1 Monat. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun Mon Tue Wed Thu Fri Sat
- 9:00 – 12:00 9:00 – 12:00 9:00 – 12:00 9:00 – 12:00 9:00 – 12:00 -
- 13:00 – 18:00 13:00 – 18:00 13:00 – 18:00 14:00 – 18:00 13:00 – 18:00 -

Supporter timezone: America/Jamaica (GMT-05:00)

Dieses Thema enthält 20 Antworten, hat 2 Stimmen.

Zuletzt aktualisiert von thomasR-9 vor 6 Jahren, 1 Monat.

Assistiert von: Shane.

Author
Artikel
#1137015

Shane
Supporter

Sprachen: Englisch (English )

Zeitzone: America/Jamaica (GMT-05:00)

Hi Thomas,

Would you mind providing me with admin access to the site so that I can have a look at this for you ?

Thanks,
Shane

#1138216

Shane
Supporter

Sprachen: Englisch (English )

Zeitzone: America/Jamaica (GMT-05:00)

Hi Thomas,

I believe I figured out the issue.

The problem I see is that the 5th item is being added after the 6th one.

I'm still running checks on this and will let you know as soon as I have a solution.

Thanks,
Shane

#1138403

Shane
Supporter

Sprachen: Englisch (English )

Zeitzone: America/Jamaica (GMT-05:00)

Hi Thomas,

So after doing some experimenting I found that the issue was being caused by this code here

jQuery( document ).ready(function() {
runmasonry();
});

// Masonry Function //

function runmasonry() {
jQuery('.masonry-grid').masonry({
// options
itemSelector: '.grid-item'
});
}

I recommend that you have a look at this tutorial below in order to setup a masonry grid.
versteckter Link

Also could you let me know where you go this code from?

Thanks,
Shane

#1138803

Hi Shane, the code is from another support ticket (masonry grid, https://toolset.com/forums/topic/create-a-masonry-grid-with-from-a-custom-post-type/) from Minesh. He linked this article: https://toolset.com/forums/topic/masonry-grid/ Where I found this code.

Thank you for the link to medium, but I'm not able to transfer this to my page. Can you change my view, that it works?

Best, Thomas

#1142322

Shane
Supporter

Sprachen: Englisch (English )

Zeitzone: America/Jamaica (GMT-05:00)

Hi Thomas,

After some testing I was able to get it to work with just 2 columns.
versteckter Link

Please let me know if this is ok.

Thanks,
Shane

#1142854

Perhabs a solution to make it standard?