Skip to:
Content
Pages
Categories
Search
Top
Bottom

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

  • Profile photo of Marco72
    Marco72
    Participant

    @marco72

    Find this in your css:

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

    right after add (colors are for example):

    UL.activity-list>li:nth-child(even)
    {
    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)
  • Profile photo of ajohnson
    ajohnson
    Member

    @ajohnson

    you can do it with php and using a child (recommended):

    This above the activity stream loop somewhere put this code:

    <?php
    $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
    Keymaster

    @apeatling

    Or via jQuery:

    j('div.activity ul li').each( function(i) {
    if ( i % 2 != 1 )
    j(this).addClass('alt');
    });

    Profile photo of @modemlooper
    @modemlooper
    Moderator

    @modemlooper

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

    EDIT: miss coded works great

    Profile photo of aburi
    Alex
    Participant

    @aburi

    @Andy Peatling

    Andy,

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

    Thanks

    Profile photo of Hugo
    Hugo
    Moderator

    @hnla

    @marco72

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

    https://buddypress.org/forums/topic/easy-change-of-activity-design

    https://buddypress.org/community/groups/how-to-and-troubleshooting/forum/topic/easy-change-of-activity-design/

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

    Profile photo of thealchemist
    thealchemist
    Member

    @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
    nm
    Participant

    @nahummadrid

    @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
    thealchemist
    Member

    @thealchemist

    AHA! Thank you for your help! Looks nice!

    Profile photo of drdave17
    drdave17
    Member

    @drdave17

    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.

    Dave

    Profile photo of nit3watch
    nit3watch
    Participant

    @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?

    Profile photo of Hugo
    Hugo
    Moderator

    @hnla

    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 :(

    Profile photo of Hugo
    Hugo
    Moderator

    @hnla

    I take it all back permalinks are lovely :)

    Hand crafted a new link, obvious really :)

    https://buddypress.org/community/groups/how-to-and-troubleshooting/forum/topic/easy-change-of-activity-design/

    Profile photo of Hugo
    Hugo
    Moderator

    @hnla

    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:

    bp-themes/bp-default/activity/entry.php

    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
    nit3watch
    Participant

    @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?

    Profile photo of Hugo
    Hugo
    Moderator

    @hnla

    @nit3watch
    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
    nit3watch
    Participant

    @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

    Profile photo of Hugo
    Hugo
    Moderator

    @hnla

    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
    nit3watch
    Participant

    @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

    Profile photo of Hugo
    Hugo
    Moderator

    @hnla

    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
    nit3watch
    Participant

    @nit3watch

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

    Working great >.<

    Profile photo of Hugo
    Hugo
    Moderator

    @hnla

    :) 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.