Skip to:

CSS Trick – How to style Activity Stream odd and even posts.

  • Profile photo of Marco72


    Find this in your css:

    /*> Activity Stream Listing
    UL.activity-list LI
    padding: 20px 0 0;
    overflow: hidden;
    padding-top: 5px;

    right after add (colors are for example):

    background-color: #EFEFEF;
    border-bottom: 1px solid #D5D5D5;
    border-top: 1px solid #f4f4f4;

    a little css3 trick. Enjoy.

Viewing 22 replies - 1 through 22 (of 22 total)
  • you can do it with php and using a child (recommended):

    This above the activity stream loop somewhere put this code:

    $style_classes = array('style-a-class','style-b-class');
    $style_index = 0;

    Then this inside the li tag that gets looped through for each activity post:

    <li <?php $s = $style_index%2; echo "class=$style_classes[$s]"; $style_index++; ?>>

    Works great for any wp template not just a buddypress.

    Profile photo of Andy Peatling
    Andy Peatling


    Or via jQuery:

    j('div.activity ul li').each( function(i) {
    if ( i % 2 != 1 )

    Profile photo of modemlooper


    I tried using addClass and it did not work for me.

    EDIT: miss coded works great

    Profile photo of atburi


    @Andy Peatling


    where in my template files do I put that jQuery code to make it work ?



    It’s funny Marco, you asked about zebra striping some two weeks ago in this thread:

    and I provide one possible approach to help out, did it just go unnoticed?

    Profile photo of thealchemist


    @marco I can’t even FIND that code anywhere in my files. So I can’t insert your sample.
    @hnla The link you provided no longer goes anywhere. Would you please offer me your approach?

    Profile photo of Nm


    @thealchemist just this. in your custom css. change the colors the way you want.

    div.activity ul.item-list li{ background: #F7F5ED; }
    div.activity ul.item-list li:nth-child(odd) { background: #F2EFE5; }


    Profile photo of thealchemist


    AHA! Thank you for your help! Looks nice!

    Can someone tell me exactly what file(s) I edit to make this work? Of course outside buddypress directory to prevent upgrades overwriting existing files. I use bp 1.2.7

    Your directions are too advanced for me if some one can break this down much simpler. First grade style.


    Profile photo of nit3watch


    when using `div.activity ul.item-list li:nth-child(odd) { background: #F2EFE5; }`
    it works in ff, gc but not in ie. any one found a solution for this?

    jQuery, it’s how striping was/is achieved for the other various tables / lists dotted around the app.

    In fact I’m sure I showed how a month or two back along with enqueue function to add your own JS snippets file.

    EDIT// just spotted my earlier remark in this thread oh well so much for permalinks then, side splittingly funny that :(

    I take it all back permalinks are lovely :)

    Hand crafted a new link, obvious really :)

    Added this snippet fro a while back from the link above it might be useful, but also I posted this over a year ago so may contain inaccuracies:
    In file bp-themes/bp-default/activity/activity-loop.php

    add line ‘’ above line 20 ‘’

    Immediately below the while loop on line 20 add:


    To print out the odd or even classes go to the file:


    And add :

    ‘’ to line 5 so it looks like:

    ‘<li class=” ” ‘

    You can then style the classes ‘odd’ and ‘even’ as you wish.

    Profile photo of nit3watch


    @hnla, may contain inaccuracies despite being on line 19 as apposed 20, your example was very explanatory though its not working?

    I implemented the above though when I check the activity entries, it isn’t printing them out as even/odd. There has been a change to entry.php which is most likely the culprit?

    Hmm working for me. Just tested on a 1.3 test install. line numbers need disregarding or at least using as a very rough pointer to the area, line numbers have changed even more in 1.3.

    One thing that needs doing is where there is an instance of ‘odd’ or ‘even’ those need to become ‘ odd’ ‘ even’ i.e they need white space before the first letter in order to ensure that the class prints out as a valid syntactical class group:
    class=”groups new_forum_topic odd”

    If it’s still not working paste up your file showing pertinent lines, this is a very simple approach so shouldn’t run into problems.

    I would also make one other change and that is to rename $class as that is rather generic and open to clashing with another of that name change it to something like $stripe_class

    Profile photo of nit3watch


    @hnla ok these are the only edits I have made, though I see you said via jQuery though I haven’t implemented andys one – was I supposed to and if yes, how?

    Still not printing out odd or even.

    the forums not liking something in my code so its on past bin

    Couple of things: first you need the space as mentioned bit earlier ‘ odd’ ‘ even’ second I notice some backticks in the pastebin code that’s probably fromm trying to paste the code into the forum fist but just make sure that those backticks don’t exist in the real source code.

    You should be seeing a new class on the li elements? Where are you actually looking for results? you initially will not see any styling as all this does is place a class and you will then need to style that class: pseudo example #activity-stream li.odd {background: red;}

    You won’t be using this to style with : :nth-child(odd)

    How are you checking the elements for the generated / printed class? Firebug will let you see the markup as output to browser.

    The pastebin code looks ok!

    Profile photo of nit3watch


    hnla im not sure what you are talking about here: first you need the space as mentioned bit earlier ‘ odd’ ‘ even’

    All I have done is whats in the pastbin file, except I changed the css as mentioned. Is ther anything else I am meant to add? could you not past the example that worked for you?

    Sorry Im sounding stupid but cant get where its going wrong

    Examine your browser source code that should show the new classes applied to the list elements of the activity stream ul.

    You should or want to see a class of odd or even but last after a few others that are generated and there must be a space between class tokens (words/strings) that is why the instruction to include the space required in the PHP code ‘ odd’ rather than ‘odd’

    Your example should work it’s the same as mine but you need to use the css ruleset I showed above or something similar there’s nothing really I can paste up that would help further – have you got your theme running live anywhere to look at?

    Profile photo of nit3watch


    @hnla lol dude sorry im a fool. ‘*space*odd’

    Working great >.<

    :) glad it’s working I was getting worried *happy days*

    Hi Guys! new here and reading the threat.. works fine in chrome and ff but it doesn’t work in IE…

    Someone have a workaround for Internet explorer?

    Many thanks!

Viewing 22 replies - 1 through 22 (of 22 total)
  • The topic ‘CSS Trick – How to style Activity Stream odd and even posts.’ is closed to new replies.
Skip to toolbar