Skip to:

Easy change of activity-design

  • Profile photo of nickrita


    The design of the acitivty-stream should be changegable easily.

    Expecially the font-size and color of the Link to a Post.

Viewing 9 replies - 1 through 9 (of 9 total)
  • Profile photo of Andy Peatling
    Andy Peatling


    I love these posts. So random. Build a child theme and change it to whatever your heart desires:

    Profile photo of Bowe


    I’m no css expert, but I thought the activity stream was really really really easy to modify.. you only need to tweak a few classes/id’s to get it to look quite a bit different.. So I can’t imagine an easier way to do it tbh

    Profile photo of Marco72


    I have to investigate further but I’d really want to style it so odd and even activities lines look lightly different. To improve readibility.

    Profile photo of nickrita


    Andy, I built a child-theme but I don’t find in the default.css which line is to change to edit the Link to the post.

    Bowe: If it is so really really really easy (I thoght this, too) then please tell me which line is to change to edit the Link to the post.

    Profile photo of D Cartwright
    D Cartwright


    Install firebug, right click on an activity item and click inspect. On the right is the css file and line number you need to look at.

    Profile photo of Xevo


    @ nickrita: I don’t believe all urls have a seperate class, although there might not even be one url with a special class.

    Profile photo of nickrita


    @ Xevo, thank you very much, you made my day! The Urls have no special classes. I solved my problem by adding one and put it behind this line .activity-list .activity-content a:first-child:focus { outline: none; }:

    .activity-list .activity-header a {

    background: #fff;

    color: #081831;

    font-family:Georgia,”Times New Roman”,Times,serif;




    The result can be seen on, which is my test-site for

    I had to change the code for the first-child, too, in order not to let it take the css from above:

    .activity-header a:first-child, span.highlight {

    background: #ececec;

    border-bottom: 1px solid #e4e3e3;

    border-right: 1px solid #e4e3e3;

    color: #777;

    font-size: 10px;

    font-family: Arial, Tahoma, Verdana, sans-serif;

    padding: 3px 8px;

    text-decoration: none;

    -moz-border-radius: 4px;

    -webkit-border-radius: 4px;

    border-radius: 4px;

    margin-right: 3px;


    I hope this will help everybody with the same problem as I had.

    Profile photo of Mike Pratt
    Mike Pratt


    but @Andy, I hate reading the instructions ;-)


    You could achieve zebra striping of the activity-stream LI elements using this approach (tested as working but I would defer to the more experienced as to whether it’s a valid or best)

    In file bp-themes/bp-default/activity/activity-loop.php

    add line ‘<?php $class = ‘even’; ?>’ above line 20 ‘<?php while ( bp_activities() ) : bp_the_activity(); ?>’

    Immediately below the while loop on line 20 add:

    ‘<?php $class = ($class == ‘even’) ? ‘odd’ : ‘even’; ?>’

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


    And add :

    ‘<?php print $class; ?>’ to line 5 so it looks like:

    ‘<li class=”<?php bp_activity_css_class() ?> <?php print $class; ?>” ‘

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

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Easy change of activity-design’ is closed to new replies.
Skip to toolbar