Skip to:
Content
Pages
Categories
Search
Top
Bottom

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

  • Avatar 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)
  • 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.

    Avatar 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');
    });

    Avatar of @modemlooper
    @modemlooper
    Moderator

    @modemlooper

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

    EDIT: miss coded works great

    Avatar of aburi
    Alex
    Participant

    @aburi

    @Andy Peatling

    Andy,

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

    Thanks

    Avatar of Hugo
    Hugo
    Moderator

    @hnla

    @marco72

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

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

    http://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?

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

    Avatar 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; }

    `

    Avatar of thealchemist
    thealchemist
    Member

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

    Dave

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

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

    Avatar of Hugo
    Hugo
    Moderator

    @hnla

    I take it all back permalinks are lovely :)

    Hand crafted a new link, obvious really :)

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

    Avatar 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.
    `

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

    Avatar 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

    Avatar 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

    Avatar 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!

    Avatar 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

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

    Avatar of nit3watch
    nit3watch
    Participant

    @nit3watch

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

    Working great >.<

    Avatar of Hugo
    Hugo
    Moderator

    @hnla

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

    Avatar of Amavai
    Amavai
    Member

    @amavai

    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)

You must be logged in to reply to this topic.