Skip to:
Content
Pages
Categories
Search
Top
Bottom

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

  • @marco72

    Participant

    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)
  • @ajohnson

    Member

    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.

    @apeatling

    Keymaster

    Or via jQuery:

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

    @modemlooper

    Moderator

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

    EDIT: miss coded works great

    @aburi

    Participant

    @Andy Peatling

    Andy,

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

    Thanks

    @hnla

    Participant

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

    @thealchemist

    Member

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

    @nahummadrid

    Participant

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

    `

    @thealchemist

    Member

    AHA! Thank you for your help! Looks nice!

    @drdave17

    Member

    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

    @nit3watch

    Participant

    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?

    @hnla

    Participant

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

    @hnla

    Participant

    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/

    @hnla

    Participant

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

    @nit3watch

    Participant

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

    @hnla

    Participant

    @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

    @nit3watch

    Participant

    @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

    @hnla

    Participant

    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!

    @nit3watch

    Participant

    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

    @hnla

    Participant

    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?

    @nit3watch

    Participant

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

    Working great >.<

    @hnla

    Participant

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

    @amavai

    Member

    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